Foundation HTML5 with CSS3

Chapter 7

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.