HTML Table Elements: Building Accessible Data Tables

HTML Table Elements

HTML tables are designed for displaying tabular data — information that is naturally organized in rows and columns. While tables were historically misused for page layout, modern HTML reserves them strictly for data presentation.

Table Structure

A well-structured HTML table uses semantic grouping elements:

<table>
  <caption>Quarterly Sales Report</caption>
  <colgroup>
    <col>
    <col span="3" class="data-columns">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>1,200</td>
      <td>1,450</td>
      <td>1,600</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>3,500</td>
      <td>4,100</td>
      <td>4,800</td>
    </tr>
  </tfoot>
</table>

Key Elements

Element	Purpose
<table>	The table container
<caption>	Table title (must be first child)
<thead>	Groups header rows
<tbody>	Groups body rows
<tfoot>	Groups footer rows
<tr>	A table row
<th>	A header cell (bold, centered by default)
<td>	A data cell
<colgroup> / <col>	Column styling groups

Accessibility Best Practices

1. Always include a <caption> to describe the table
2. Use scope="col" on column headers and scope="row" on row headers
3. Use <thead>, <tbody>, and <tfoot> for semantic grouping
4. For complex tables, use the headers attribute on <td> elements
5. Never use tables for page layout — use CSS Grid or Flexbox