Advanced Tables

The following is a more advanced table. A table like this can be used to hold text and images in position relative to each other. The border is shown here to make it easier to see how the table is constructed, but if it were invisible the contents of the cells would appear to be fixed.

The top row has three columns.

Column two.

Column three.

This cell spans two rows.

This cell spans two columns.

This cell spans two columns, too.

Two extra commands are needed to create a table like the one above:

<rowspan="2">

This tells the browser that this cell spans two rows. Add this in the line of HTML code that creates the cell that spans the two rows adjacent to it. Also add it to all cells in other columns that span two rows.

<colspan="2">

This tells the browser that this row spans two columns. Add this in the line of HTML code that creates the row that spans the two columns adjacent to it. Also add it to all cells in other rows that span two columns.

The code for the table above looks like:

<table border="1" cellspacing="1" cellpadding="7" width="580">
  <tr>
    <td width="40%">The top row has three columns.</td>
    <td width="30%">Column two.</td>
    <td width="30%">Column three.</td>
  </tr>
  <tr>
    <td width="40%" rowspan="2">This cell spans two rows.</td>
    <td width="60%" colspan="2">This cell spans two columns.</td>
  </tr>
  <tr>
    <td width="60%" colspan="2">This cell spans two columns, too.</td>
  </tr>
</table>

Nesting Tables

Tables can be nested, that is placed inside each other, as an alternative to using rowspan and colspan. This can make the HTML code very confusing, so consider creating the main table and the nested table separately, then cut and paste the HTML code for the nested table into the appropriate cell. This is a simple example of a table nested within another table.

The cell to the right contains the nested table.

Top Left

 
 

Bottom Right

 

This table has a cellpadding value of "2" so the background colour of the cell above (yellow) is visible around the nested table.