HTML and CSS —

Grouping Table Rows

You can also group table rows using three elements that define the row groups based on function. The elements include thead, tfoot, and tbody for table head, table foot, and table body, respectively (see Example 4-16).

Example 4-16. Grouping table rows
<thead>
<tr>
<th>Table Head</th>
<th>Table Head</th>
<th>Table Head</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Table Foot</td>
<td>Table Foot</td>
<td>Table Foot</td>
</tfoot>
<tbody>
<tr>
<td>Table Body</td>
<td>Table Body</td>
<td>Table Body</td>
</tr>
</tbody>
</tr>
</table>

Browser support is more consistent for these elements. Figure 4-17 shows the results.

Figure 4-17. Grouping by rowyou'll notice that I've defined the foot in the middle of the table, but the row defined as the table foot still appears at the foot of the table.