234 CHAPTER 5 More HTML5
<tr>
<th>Total:</th>
<th></th>
<th></th>
<th></th>
<th>62,000</th>
</tr>
</tfoot>
</table>
In addition to adding structure to the table, you can use the <thead>, <tbody>, and
<tfoot> elements to control the styling of the <th> elements better. Without these elements,
how would you provide a different style to the header and footer? The following style rules
provide an example of such styling.
thead th {
background-color: #BDEAFF;
width: 100px;
}tbody th {
background-color: #FFFF99;
}tfoot th {
background-color: #C2FE9A;
}tfoot th:last-of-type {
text-align: right;
}td {
text-align: center;
}td:last-of-type {
text-align: right;
}
The rendered table is shown in Figure 5-14. The following is a description of the style rules
applied.
■■The first style rule applies a blue background color to the header and sets the width of
all columns to 100 pixels.
■■The second style rule applies a yellow background color to the vertical header.
■■The third style rule applies a green background color to the footer.
■■The fourth style rule applies right alignment to the price in the footer.
■■The fifth style rule centers the text of all table cells.
■■The last style rule applies right alignment to the price cells.