Introduction to HTML Tables

HTML tables are essential for displaying structured data in rows and columns. When built correctly with proper semantic markup, they become accessible to all users, including those using screen readers.

Basic Table Structure

Every HTML table follows a hierarchical structure:



html

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>January</th>
      <th>February</th>
      <th>March</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptops</td>
      <td>120</td>
      <td>135</td>
      <td>158</td>
    </tr>
    <tr>
      <td>Tablets</td>
      <td>85</td>
      <td>92</td>
      <td>76</td>
    </tr>
  </tbody>
</table>

Key Elements Explained

The <table> Element

The <table> element serves as the container for all table content. It defines the boundaries of your tabular data.

The <caption> Element

The <caption> provides a title or description for your table. It should be the first child of the <table> element and helps users understand what the table contains.



html

<table>
  <caption>Student Grades for Computer Science 101</caption>
  <!-- table content -->
</table>

The <thead> Element

The <thead> groups header content in a table. It typically contains one or more <tr> elements with <th> (table header) cells.



html

<thead>
  <tr>
    <th scope="col">Student Name</th>
    <th scope="col">Midterm</th>
    <th scope="col">Final</th>
    <th scope="col">Grade</th>
  </tr>
</thead>

Accessibility Best Practices

Using scope Attribute

The scope attribute helps screen readers understand the relationship between headers and data cells:

  • scope="col" - header applies to the entire column
  • scope="row" - header applies to the entire row



html

<table>
  <caption>Employee Information</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Department</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John Smith</th>
      <td>Engineering</td>
      <td>$75,000</td>
    </tr>
    <tr>
      <th scope="row">Jane Doe</th>
      <td>Marketing</td>
      <td>$68,000</td>
    </tr>
  </tbody>
</table>

Table Headers (<th> vs <td>)

Always use <th> for header cells and <td> for data cells. Screen readers announce headers differently, providing context to users.

Complete Example

Here's a comprehensive example combining all elements:



html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible Table Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
      font-weight: bold;
    }
    caption {
      font-size: 1.2em;
      margin-bottom: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <table>
    <caption>Quarterly Revenue by Product Category</caption>
    <thead>
      <tr>
        <th scope="col">Category</th>
        <th scope="col">Q1 2024</th>
        <th scope="col">Q2 2024</th>
        <th scope="col">Q3 2024</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Electronics</th>
        <td>$50,000</td>
        <td>$55,000</td>
        <td>$48,000</td>
        <td>$153,000</td>
      </tr>
      <tr>
        <th scope="row">Clothing</th>
        <td>$32,000</td>
        <td>$38,000</td>
        <td>$41,000</td>
        <td>$111,000</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Additional Accessibility Tips

  1. Always include a <caption> - It provides context for screen reader users
  2. Use semantic markup - <thead>, <tbody>, and <tfoot> when appropriate
  3. Provide adequate contrast - Ensure text and background colors meet WCAG guidelines
  4. Keep tables simple - Complex layouts can be confusing for assistive technologies