Benjamin Lu

everyday is cool

The Tables Behind Early Web Layouts

A table gives the browser rows and columns to work with. In an early website layout, those cells could hold the site menu and the main article. You can see how the arrangement worked with a small historical reconstruction.

<table width="100%" border="1">
  <tr>
    <td width="160" valign="top">
      <a href="index.html">Home</a><br>
      <a href="about.html">About</a>
    </td>
    <td valign="top">
      <h1>Welcome</h1>
      <p>This is the main part of the page.</p>
    </td>
  </tr>
</table>

The border makes it easy to see where the browser put each cell. Try adding a long heading or narrowing the window. The cells are tied together in one row, so the navigation does not naturally move above the article when there is less room.

Reading this kind of markup is useful when you open an archived page and want to find out which table carries the layout and which table contains actual data. For a new site, use CSS for page layout and reserve HTML tables for data.