Tables: Advanced Table Design

Once you have mastered the basic table and learned how to control the look of the data in the individual table cell, you will want to create more complex table designs.

HTML allows you to:

Insert a table within a table.

Adjust table cells so that one cell spans two or more rows.

Adjust table cells so that one cell spans two or more columns.

Use tables to align the images on your web page.

Span Table Rows

To create a table cell that spans more than one row, use the ROWSPAN attribute within the opening <TD> tag of the cell you want to expand.

<TD ROWSPAN="x">Cell data</TD>
creates a cell that spans x number of rows.

Span Table Columns

To create a table cell that spans more than one column, use the COLSPAN attribute within the opening <TD> tag of the cell you want to expand.

<TD COLSPAN="y">Cell data</TD>
creates a cell that spans "y" number of columns

Position Images

The ROWSPAN and COLSPAN attributes are especially useful for positioning images on your web page.

It is much easier to accurately place an image in a table cell than it is to align the image with regular text.

In the example below I have used a table border so you can see the row and column spanning. Without the border, the visitor to your site would not realize you had used a table to position the images.

The HTML for the above table (without the cell contents) is:

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" WIDTH="65%">

<TR>
<TD WIDTH="25%" ROWSPAN="3"></TD>
<TD WIDTH="25%"></TD>
<TD WIDTH="25%"></TD>
<TD WIDTH="25%"></TD>
</TR>

<TR>
<TD WIDTH="75%" COLSPAN="3"></TD>
</TR>

<TR>
<TD WIDTH="25%"></TD>
<TD WIDTH="25%"></TD>
<TD WIDTH="25%"></TD>
</TR>

</TABLE>

Nested Tables

You may or may not have realized that this web page is actually a borderless, three-column table.

The table above is actually a nested table, i.e., a table within a table.

To create a table within a table, add another <TABLE></TABLE> tag pair within the <TD></TD> tag pair of your choice.