0
0
HTMLmarkup~5 mins

Table accessibility basics in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tables show data in rows and columns. Making them accessible helps everyone, including people using screen readers, understand the data clearly.

When you want to display a schedule or calendar on a website.
When showing product prices or features in a comparison chart.
When presenting data like survey results or statistics.
When creating a list of contacts with details like phone and email.
When you need to organize information that fits best in rows and columns.
Syntax
HTML
<table>
  <caption>Table title</caption>
  <thead>
    <tr>
      <th scope="col">Column header</th>
      <th scope="col">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>Data cell</td>
    </tr>
  </tbody>
</table>

The <caption> tag gives the table a clear title for screen readers.

Use scope="col" for column headers and scope="row" for row headers to help screen readers understand the table structure.

Examples
This table has a caption and uses scope attributes for headers, making it easy to understand.
HTML
<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$1000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$1200</td>
    </tr>
  </tbody>
</table>
Row headers help screen readers announce the name before the role for each person.
HTML
<table>
  <caption>Team Members</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>Designer</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>Developer</td>
    </tr>
  </tbody>
</table>
Sample Program

This example shows a simple accessible table with a caption and proper header scopes. It is easy to read visually and by screen readers.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Accessible Table Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 1rem 0;
    }
    caption {
      caption-side: top;
      font-weight: bold;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.5rem 1rem;
      text-align: left;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <main>
    <table>
      <caption>Weekly Schedule</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>Yoga class</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>Grocery shopping</td>
        </tr>
        <tr>
          <th scope="row">Wednesday</th>
          <td>Work meeting</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <caption> to describe the table's purpose.

Use scope attributes on <th> to help screen readers link headers to cells.

Keep tables simple and avoid using tables for layout to improve accessibility.

Summary

Tables organize data in rows and columns for easy reading.

Use <caption> and scope attributes to make tables accessible.

Accessible tables help everyone, especially people using screen readers, understand the data clearly.