Table with Thead Tbody Tfoot

Code

<table>
  <caption>Employee Salaries</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Department</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Engineering</td>
      <td>$95,000</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Sales</td>
      <td>$72,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$167,000</td>
    </tr>
  </tfoot>
</table>

Explanation

Structures tabular data with thead (headers), tbody (data rows), and tfoot (summary) for clear semantics. scope="col" on th cells identifies header-to-column relationships for accessibility. caption provides a table title, and colspan merges cells for footer totals.

More HTML Snippets