Accessible Tables

Introduction

Tables are useful when information naturally fits into rows and columns. Examples include class schedules, product comparisons, sports results, and event timetables. A well-built table helps people quickly compare related values. An inaccessible table, however, can be confusing—especially for people using screen readers or navigating with a keyboard.

In this lesson, you will improve a simple table by identifying its headings and declaring what each heading describes. You will use the HTML th element for headings and the scope attribute to connect each heading to its row or column.

Remember: accessibility is not an extra feature added at the end. Clear structure helps everyone scan and understand information.

Why table headings matter

A data cell made with td contains information. A heading cell made with th labels related information. Visual users can often understand a table by looking across a row or up a column. A screen reader needs the same relationships to be marked in the HTML.

For example, if a cell contains 9:00 AM, a person needs to know whether that is the start time, end time, or something else. A correctly marked heading gives the cell useful context, such as “Monday, start time.”

The scope attribute

The scope attribute tells the browser what a heading applies to:

• scope="col" means the heading labels a column.
• scope="row" means the heading labels a row.

Use scope="col" for headings across the top of a table. Use scope="row" for headings at the start of each row. This creates a clear relationship between headings and data.

Worked example

Here is a class schedule without meaningful table headings:

<table>
  <tr>
    <td>Day</td>
    <td>Topic</td>
    <td>Room</td>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML</td>
    <td>101</td>
  </tr>
</table>

The first row looks like a header, but every cell is marked as ordinary data with td. Let us change those cells to th and add column scopes:

<table>
  <tr>
    <th scope="col">Day</th>
    <th scope="col">Topic</th>
    <th scope="col">Room</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML</td>
    <td>101</td>
  </tr>
</table>

Now the browser knows that “Day,” “Topic,” and “Room” are column headings. A person using assistive technology can understand what each data cell represents.

Rows can also have headings. In this example, each course name identifies the row:

<table>
  <tr>
    <th scope="col">Course</th>
    <th scope="col">Day</th>
    <th scope="col">Room</th>
  </tr>
  <tr>
    <th scope="row">HTML Basics</th>
    <td>Monday</td>
    <td>101</td>
  </tr>
</table>

The first cell in the second row is a row heading, so it uses th scope="row". The other cells remain td elements because they contain data.

Guided activity: Improve a workshop schedule

Work with a partner or follow the steps on your own. Your goal is to make the table structure clear before worrying about visual design.

1. Start with this table:

<table>
  <tr>
    <td>Session</td>
    <td>Time</td>
    <td>Leader</td>
  </tr>
  <tr>
    <td>Planning</td>
    <td>10:00</td>
    <td>Ari</td>
  </tr>
  <tr>
    <td>Testing</td>
    <td>11:00</td>
    <td>Sam</td>
  </tr>
</table>

1. Change the three cells in the first row from td to th.
2. Add scope="col" to each of those headings.
3. Decide whether the session names should also identify their rows. If they do, change “Planning” and “Testing” to th scope="row".
4. Leave the time and leader cells as td.
5. Read the finished code aloud. Can you describe every value using its row and column headings?

A strong solution will identify “Session,” “Time,” and “Leader” as column headings. If “Planning” and “Testing” are row headings, each row has an especially clear label.

Common mistake

A frequent mistake is using bold text or a heading element inside a table instead of using th. For example, placing strong around “Time” may make it look bold, but it does not tell assistive technology that “Time” labels a column. Use th for table headings. Visual appearance and semantic meaning are different things.

Another mistake is giving every cell a scope="col". Scope belongs on heading cells, not ordinary data cells. Check that your heading is a th and that the scope matches its direction.

Independent challenge

Create an accessible table for a small reading list. Include columns for Book, Author, and Minutes. Add at least three books. Use th scope="col" for the column headings. If each book name clearly labels its row, use th scope="row" for the book names and td for the other values.

Before you finish, check your work:

• Are all headings marked with th?
• Does every column heading have scope="col"?
• Do row headings, if used, have scope="row"?
• Are ordinary values marked with td?
• Can someone identify each value without relying only on its position or appearance?

Accessible structure is helpful structure. When your HTML explains how information is organized, more people can use it with confidence.