HTML table elements: thead, tfoot, tbody

You can create horizontal sections in a data table by grouping rows within the table with the elements <thead>, <tbody> and <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 <tbody>.

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>
<th>A header</th>
<td>repeat the header info</td>
<td>Some data</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 <thead> and <tfoot> elements remain fixed while scrolling the <tbody>.

2 thoughts on “HTML table elements: thead, tfoot, tbody”

  1. Tables offer me more control over data in the body of my web pages than CSS sometimes. I know CSS is the way forward but I still use tables and hope they don’t become deprecated unless they already are?

    1. Tables haven’t been deprecated, but they are meant to hold rows and columns of data. You would probably get better results from the search engines if you laid out your pages using semantic HTML positioned with CSS. I have some old sites in my portfolio that still use tables-based layouts, and the visual effect is good, but the underlying code is not helpful or accessible to everyone.

Leave a Reply