Nested Tables

Topics on This Page

Nested Tables
Example

Nested Tables

You can put pretty much anything into a table cell. In particular, you can put another table into a table cell. This is called a nested table. The entire nested table must be placed into a single cell, but of course, you can have additional content in the cell besides the nested table.

A fairly common layout for a web page is to have a column on the left with site navigation links, and the remainder of the page content on the right. One way to create such a page is with nested tables. The outer table has a single row with two cells. The left cell is the navigation links column, while the right cell contains the remainder of the page. A nested table is often used for the page content in the right.

Here's an example:

<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffccff" width="100">
  Link #1
  <br />
  Link #2
  <br />
  Link #3
  <br />
  etc.
</td>
<td bgcolor="#ffffcc">
  <table border="0" cellpadding="2" cellspacing="0">
    <tr>
      <td> The page's contents go here,
           typically in a much more complicated
           table than this one!
      </td>
    </tr>
  </table>
</td>
</tr>
</table>

The outer table specifies a width of 100% so that the content can spread the width of the window. The left-side cell specifies a fixed width, and the right-cell gets the remaining width.

Note: If the content in the right side doesn't spread the remaining width of the page, Netscape 4 and earlier will widen the left column. IE and Netscape 6 will honor the fixed width requested in the left column.

Example

Here's an example of a table that contains another table in one of its cells. The other cells have other content.