Building Tables - HTML5 with CSS3 - page 214

tbody
The tbody element, also known as a table row group , represents one or more rows that make up the body
of data of its parent table element. The tbody element may only have tr elements as its children and the
tbody itself must be a direct child of a table element. You can see an example in Listing 7-13.
Listing 7-13. A table with a table row group
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
The unique thing about this element is that there can be multiple tbody elements within a single table. You
may encounter a situation where, when dealing with a significantly large data set, it makes sense to break
that data set in distinct, logical groupings. To do so, you could simply wrap those groupings of table rows
into their own tbody elements. For example, an alphabetized list of names could be organized in separate
tbody elements for each letter of the alphabet.
If you add multiple tbody elements to your table, they must be siblings of one another; no nesting tbody
elements allowed! Another caveat worth noting: tbody elements and tr elements can't be siblings. If your
table includes one tbody element, any other rows need to be grouped in their own tbody as well, even if
it's a single row. For instance, the code in Listing 7-14 isn't valid.
Listing 7-14. An invalid table with sibling tr and tbody elements
<table>
<tr>
<td>Utility Belts</td>
<td>9</td>
</tr>
<tbody>
<tr>
<th scope="row">Grappling Hooks</th>