238 CHAPTER 5 More HTML5
Creating irregular tables
Tables need to be rectangular to work properly, but you’ll often need to present tables that
don’t contain the same number of cells in each row. In the case of the previous examples,
the footer contained the same number of cells as the other rows, but you only need to have
two cells, one for “Total:” and one for the total price. You might also want to add a column
that indicates Antique Cars versus Non-Antique Cars, but you don’t want a cell on every row
that says “Antique Car” or “Non-Antique Car”. You want to add a single cell that says “Antique
Cars” and is the combined height of all Antique Car rows. You want to add a single cell that
says “Non-Antique Cars” and is the combined height of all Non-Antique Car rows. Use the
rowspan or colspan attributes on the <td> or <th> element to solve this problem.
The colspan attribute tells the browser that a <td> or <th> element should be the size of
multiple horizontal cells. In the previous example, where you want the “Total:” text to span the
footer row, use <th colspan=”4”> as follows.
<tfoot>
<tr>
<th colspan="4">Total:</th>
<th>62,000</th>
</tr>
</tfoot>The default style for the <th> element is bold and centered. When “Total:” is displayed, it’s
centered within the four cells it spans. The CSS style rule is changed to right-align “Total:” as
follows.
tfoot th {background-color: #C2FE9A;}tfoot th:first-of-type {text-align: right;}tfoot th:last-of-type {text-align: right;}You could just right-align all <th> elements in the footer by eliminating the last two style
rules in this example and adding the text-align style to the first style rule. The rendered out-
put is shown in Figure 5-15.