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

If you have mapped out your table in advance, you can set these attributes from HomeSite's Table Editor.

To access the Table Editor use the Table Editor button on the Tables tab on the speedbar.

Tables tab

Table Editor
Button

To create a table cell that will span more than one column:

Position your cursor in the cell in the left most column of the columns you want to span.
Then set the value--the number of cells you wish the cell your cursor is in to span--in the Column Span drop-down box.
Set any other values (height, width, alignment, background color) for that cell.
Return to your cursor and type the data for the cell.

To create a table cell that will span more than one row:

Position your cursor in the cell in the top most row of the rows you want to span.
Then set the value--the number of cells you wish the cell your cursor is in to span--in the Row Span drop-down box.
Set any other values (height, width, alignment, background color) for that cell.
Return to your cursor and type the data for the cell.

If necessary, use your Tab key to move your cursor to another cell and repeat the process.

When you have finished setting all of the values for all of the cells in your table, click on OK.

Your table and its contents will appear in your document.

Save your file and view it in your browsers.

Remember that Netscape Navigator and Microsoft Internet Explorer tend to interpret table and table cell tags differently, so be sure you are satisfied with the look of your table as it appears in both browsers.

If you want to add the ROWSPAN or COLSPAN attribute to any particular table cell in an existing table, use the Tag List to add a new tag and attribute to a particular table cell.

Note: See Start: Tour HomeSite 1.2 for a review of the ways to insert tags and attributes into your document.

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.