Table Layout

layout hacks 1996 still works

Nested tables holding a page together, because CSS layout did not exist yet.

In 2026: Works fine, and that is the trouble: it renders identically today, so plenty of it is still out there. Screen readers announce it as a data table, and it reflows badly on a phone. Grid and flexbox replaced it.

Where it came from: Universal practice, roughly 1996 to 2006. Wikipedia ↗

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td colspan="2" bgcolor="#000080" height="60">
    <font face="Arial" color="#FFFFFF" size="5">&nbsp;MY HOME PAGE</font>
  </td>
</tr>
<tr valign="top">
  <td width="150" bgcolor="#CCCCCC">
    <table cellpadding="4" cellspacing="0" border="0" width="100%">
      <tr><td><a href="/">Home</a></td></tr>
      <tr><td><a href="/about.html">About</a></td></tr>
      <tr><td><a href="/links.html">Links</a></td></tr>
    </table>
  </td>
  <td bgcolor="#FFFFFF">
    <table cellpadding="10" cellspacing="0" border="0"><tr><td>
      Main content goes in here, three tables deep.
    </td></tr></table>
  </td>
</tr>
</table>

sandboxed demo · breaks nothing but itselfrestart

More in layout hacks