Flexible Tables Previous | Top | Next

 

Nested tables

 

Rules for nested tables:

  • Tables nested within fixed-width table cells will themselves necessarily be fixed-width tables.
  • Tables nested within flexible table cells must have the characteristics of a flexible-width table.
  • Always set the table width!

 

Nested table example:

 

First, set up the outer table. The width of the outer table is set to 100%, and the width of the cell in the first row is set to 100% (not strictly necessary, but it doesn't hurt).

 

Now we embed a table in the second row. This table divides the row into three columns. The table and the second column are set to 100% width.

This is where we would like our content to go. But we'd like margins between the text and the black borders.

Finally, we embed a table in the second column of the second row. This table provides margins around the text. The table and the center column width are set to 100%. There are spacer images in all of the cells that don't contain text.

This is the content. Notice that there are margins around the content so that it does not run into the black borders.

Here's the same set of tables, without borders.

This is the content. Notice that there are margins around the content so that it does not run into the black borders. 

<TABLE width="100%" cellspacing="0" cellpadding="0" border=0>
  <TR>
    <TD width="100%" bgcolor="#000000"><IMG src="img/great1.gif" width="600" height="50"
        alt"Flexible Tables are Great!"></TD>
  </TR>
  <TR>
    <TD bgcolor="#000000">
      <TABLE width="100%" cellspacing="0" cellpadding="0" border=0>
        <TR>
          <TD width=170 bgcolor="#000000"><IMG src="img/spacer.gif" width="170" height="1" alt=""></TD>
          <TD width="100%" bgcolor="#CCCCFF">
            <TABLE width="100%" cellspacing="0" cellpadding="0" border=0>
              <TR>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="15" alt=""></TD>
                <TD width="100%"><IMG src="img/spacer.gif" width="1" height="15" alt=""></TD>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="15" alt=""></TD>
              </TR>
              <TR>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="1" alt=""></TD>
                <TD width="100%">
                  This is the content. Notice that there are margins around the content so that
                  it does not run into the black borders.</TD>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="15" alt=""></TD>
              </TR>
              <TR>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="15" alt=""></TD>
                <TD width="100%"><IMG src="img/spacer.gif" width="1" height="15" alt=""></TD>
                <TD width=15><IMG src="img/spacer.gif" width="15" height="15" alt=""></TD>
              </TR>
            </TABLE>
          </TD>
          <TD width=40 bgcolor="#000000"><IMG src="img/spacer.gif" width="40" height="1" alt=""></TD>
        </TR>
      </TABLE>
    </TD>
  </TR>
  <TR>
    <TD bgcolor="#000000"><IMG src="img/spacer.gif" width="600" height="30" alt=""></TD>
  </TR>
</TABLE>

 
  Previous | Top | Next