Building Tables - HTML5 with CSS3 - page 213

</tr>
</thead>
<tr>
<th scope="row">Utility Belts</th>
<td>9</td>
</tr>
<tr>
<th scope="row">Grappling Hooks</th>
<td>27</td>
</tr>
<tr>
<th scope="row">Smoke Pellets</th>
<td>623</td>
</tr>
</table>
The thead element adds semantic value to the data table by explicitly designating the headers that apply
to the entire table. As a child of the table element, the thead element should appear after any caption
and colgroup elements (more on these elements later in the chapter) and before any tbody , tfoot , or tr
elements. There can be only one thead element per table.
The thead element may contain multiple rows, so long as those rows contain headings that act as
headings for the entire table. Additional rows containing more headings or cells with supportive content are
also permitted. You could, for instance, add a second row containing td elements that provide more
information about the columns to which they belong.
You may choose to omit a thead element's end tag only if the thead is immediately followed by a tbody
or tfoot element. The end tag is required in other cases. But as we've mentioned before, including end
tags, even when optional, makes your code more readable and less prone to parsing errors.
As you can see in Figure 7-5, the thead element has no visual impact on the table to which it belongs. It
can, however, be used as a hook using descendant selectors to style its child elements. We'll show an
example of this technique near the end of this chapter.
Figure 7-5. Browser output of a table with a table heading row group
Required Attributes
There are no required elements for the thead element.
Optional Attributes
Aside from the global attributes, the thead element has no additional optional attributes.