Accessible Tables

After this lesson, you can connect headers to data using scope col and row in a simple table.

BEGIN WITH A QUESTION

Understanding begins with a question.

Hearing ‘Sunday, Weeding’ tells you the task for that day. Hearing only ‘Weeding’ loses the context. Header relationships preserve context when navigating a table.

Connect headers to data using scope col and row in a simple table.

UNDERSTAND THE CONCEPT

Scope explains the header direction

On th, scope="col" identifies a header for the column below; scope="row" identifies a header for the row beside it. Use these in simple tables with one header level. Browsers and assistive technologies can use these relationships when reading data.

Not every cell is a header

A day or category name can be a row header. Values such as book counts remain td. Do not put scope on td: it belongs to th header cells. Caption still provides context for the whole table.

Simplify before adding complexity

Tables with multiple header levels and merged cells need additional accessibility considerations. For the basics, avoid unnecessary rowspan and colspan. Dividing a large table into smaller ones may make it easier to read.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<table>
  <caption>Sample plant counts by area</caption>
  <thead><tr><th scope="col">Area</th><th scope="col">Count</th></tr></thead>
  <tbody>
    <tr><th scope="row">Balcony</th><td>4</td></tr>
    <tr><th scope="row">Yard</th><td>7</td></tr>
  </tbody>
</table>

BROWSER RESULT

Count names the numeric column; Balcony and Yard name the rows. These relationships are explicit.

COMMON MISTAKES

<td scope="row">Balcony</td>

Scope belongs on th. If Balcony names a row, change td to th scope="row".

TRY TOGETHER

Practice clarifies understanding.

01 The ‘Count’ th is in the first row and names the numbers below it. Which scope is appropriate?

rowcolTh cannot be used

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Complete the table’s reading relationships

Fix the fictional schedule: column headings use th scope="col", day names use th scope="row", and tasks remain td. Keep caption, thead, and tbody.

<table>
  <caption>Sample reading club schedule</caption>
  <thead><tr><th>Day</th><th>Activities</th></tr></thead>
  <tbody>
    <tr><td>Saturday</td><td>Reading together</td></tr>
    <tr><td>Sunday</td><td>Sharing notes</td></tr>
  </tbody>
</table>

index.htmlHTMLLn 1, Col 18 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Scope col names a column; scope row names a row.
Scope belongs on th.
Simple tables and clear captions reduce confusion.

TablesAccessibility

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML table °Accessibility °

Library: Three languages behind one page ↗

Take the Chapter Trial →