<table> <tr> <th>Column 1 heading</th> <th>Column 2 heading</th> <th>Column 3 heading</th> </tr> <tr> <td>Row 2, cell 1</td> <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td> </tr> <tr> <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table>
The first difference is that the
td tags of the first row have been replaced with
th tags. Whereas a
td is a standard data cell,
th is a header cell. As with
td elements, these must be enclosed inside
Spanning columns and rows
rowspan attributes have also been used in some of the
tdtags. If you look at this code in a browser, you will see that on the second row there are now two cells instead of three, the second cell spanning the second and third column. The
colspan attribute, which means “column span” will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third
td element — two cells are merged into one.
As with the simpler 3×4, 12-cell table, the numbers on these tables with merged cells should also add up. Although there are only 10 cells in this example, there are 2 spans.