Building Tables - HTML5 with CSS3 - page 218

Like the thead and tbody elements, the tfoot element may only have tr elements as children. Those tr
elements, in turn, may only have th or td elements as children. The tfoot element's end tag is optional if
the element is immediately succeeded by a tbody element or if there is no more content in the table.
Like the thead element, the tfoot does not directly impose any styling on its children. It can, however, be
used as a hook for styling its child elements with descendant selectors in CSS.
Required Attributes
There are no required elements for the tfoot element.
Optional Attributes
There are no additional optional attributes for the tfoot element other than the global attributes.
Columns
This chapter has thus far dealt with the structure and semantics of tables largely in terms of rows. An
HTML table is composed of a collection of rows containing headers and cells that can be organized into
row groups. But what if you need to add information on a column-by-column basis? Or, what if you need to
style cells that appear in a particular column a certain way? For these cases, there are two elements at
your disposal that prescribe meaning to a table's columns: colgroup and col .
colgroup
The colgroup element represents a logical grouping of one or more columns in a table. Defining one or
more column groups, when sensible, also provides you with an opportunity for richer styling of the table
element and its child elements. You can, for instance, define a column group that contains three or four
columns and use CSS to set the width of that column group. The browser would then take that width and
distribute it amongst the columns within the group.
The colgroup has a conditional content model, which means that the rules governing what elements the
colgroup can or can't contain can change depending on the condition of the element. For instance, if the
span attribute is defined, then the element should be empty, as shown in Listing 7-17.
Listing 7-17. A table with an empty colgroup
<table>
<colgroup span="2">
<tr>
<th scope="row">Utility Belts</th>
<td>9</td>
</tr>
</table>
If the span attribute is not defined, then the colgroup must contain one or more col elements (see Listing
7-18). We'll discuss the col element in detail shortly.