You can create horizontal sections in a data table by grouping rows within the table with the elements
<tfoot>. These sections or groups of rows then take on properties that can be useful in terms of styling and are helpful when printing multipage tables.
One or more table header rows can be formatted as
<thead>. There can only be one
<thead> element in a table. Likewise, you can only have one
<tfoot> element per table. It can include one or more rows of footer information.
The main body of the table can be formatted as
Here’s the interesting part. The
<thead> and the
<tfoot> must be marked up before the
<tbody> in the document flow. Here’s a super simple example:
<caption>An optional caption</caption>
<td>repeat the header info</td>
There’s a reason for this order in the document flow. It’s done so that the browser can render the top and the bottom of the table before beginning on the main part of the table. This also allows the header and footer section to be printed on every page when a long table is printed.
If the table is long enough to require scrolling on a screen or multiple pages in print, it’s a good idea to use the footer area to repeat or summarize the column header information from the headings.
In terms of CSS, these additional elements in the table give you additional hooks for CSS rules.
Support for these elements varies among browsers. In some browsers, when scrolling a long table, the
<tfoot> elements remain fixed while scrolling the