Is it valid to use more than one thead or tfoot element in a table?

html

responsive-design

best-practices

accessibility

byAlex Kataev·Dec 23, 2024

According to the standards of HTML, a table can have only one thead and one tfoot. Incorporating more may lead to HTML validation failure and browsers may misinterpret the markup. The structure of your tables should follow the sequence of a single thead, followed by multiple tbody if required, and capped with a single tfoot to maintain proper semantics and display.

<table>
  <thead> <!-- Header rows rule: There can be only one! 😎 --> </thead>
  <tbody> <!-- Body rows: Hey, invite your friends! 🥳 --> </tbody>
  <tfoot> <!-- Footer rows rule: One is enough, trust me. ⛔ --> </tfoot>
</table>

Handling the need for multiple headers or footers

To accommodate data representation that seems to demand multiple headers or footers, consider creating separate tables each with their distinct thead and tfoot. Alternatively, JavaScript arrays can be used to illustrate and dynamically render grouped data. This technique preserves both a clean document layout and HTML validity, ensuring universality of browser compatibility and accessibility convenience.

Design and data integrity

Maintaining consistent design throughout your tables improves overall data interpretation. Use matching CSS styling across tables to enhance presentation and retain a harmonious aesthetic. A single thead and a single tbody or multiples thereof per table increases clarity and keeps your data presentation free of clutter.

Coping with complex data

Trying to fit complex data into a table? Here are handy pointers:

Group related data: Use colspan and rowspan to merge entries, maintaining single thead and tfoot while presenting complex relationships.
JavaScript magic: Manipulate data using JavaScript to create rows as per your needs. Extremely useful when dealing with dynamic or user-generated data.

// Just using my magic wand (a.k.a JavaScript)
generatedRows = myComplexData.map(data => /* code to generate rows */);

Modular design: Design reusable tables for repeated patterns to maximize code reuse and scalability.

In-table headers and footers

When you want to indicate secondary headers or footers within a tbody, do so without violating the spec by:

Using <th> elements within your tbody to create emphasis and distinction for certain rows. Think of them as your team's supporting actors.

<tbody>
  <tr><th>Supporting Actor on Stage!</th></tr>
  <tr><td>Follow the Script 🎬</td></tr>
</tbody>

Defining and applying custom CSS classes to visually differentiate these secondary header or footer rows.

Practices for accessibility

To enhance readability and functionality for all users, including those with assistive devices:

Add a <caption> to provide an overview of the table content and assist users in navigating through your table data.
Use scope attribute on <th> elements to point out if they serve as headers for columns, rows, or groups of either.
Employ ARIA roles and properties whenever necessary to improve the experience for users with screen readers.