HTML - More on Tables

Another tag is the <th> - table header. This makes the content of the cell appear as a heading i.e. bold and centred.  To use them replace the <td> with <th> as follows

<tr>
<th>Header cell</th>
<td> content cell</td>
</tr>

Try replacing some tds with th on your examples to see the difference.

Spanning

A cell spans other cells when it spreads across more than one row or column. The rowspan or colspan is an attribute added to the <td> tag. See below for examples. Try some of your own.

<table width="50%" border="1">
<tr>
<th colspan="3"> Layout </th>
</tr>

<tr>
<td> Your Lifestyle </td>
<td> Size of Garden </td>
<td> Current Use of Space </td>
</tr>
</table>

The finished table

This will produce a table of two rows with first row just having one large cell, which spans across the 3 cells in the second row. The use of <th> ensures the cell will be a header cell.

The other way to use spanning, is to have a cell on the left of the other cells that spreads across the other rows:

<table width="50%" border="1">
<tr>
<th rowspan="3"> Design </th>
<td> Japanese</td>
</tr>

<tr>
<td> Water features </td>
</tr>
<tr>
<td> Size of Garden </td>
</tr>
</table>

The finished table

  top