Header cells

Create accessible table headers with <th> and the scope attribute.

Header cells: th

<td> is any data cell; but a table's first row usually holds headers: 'Fruit', 'Price', 'Day' and so on. For these headers you use <th> (table header) instead of <td>.

<th> cells are shown bold and centered by default. Their real value is not appearance but meaning: screen readers announce them as headers and link them to their column.

The scope attribute

You can state explicitly which cells a <th> header describes with the scope attribute. It has two common values:

scope="col" — this cell heads a column
scope="row" — this cell heads a row

Example: <th scope="col">Fruit</th>. This small touch lets screen readers describe the table aloud correctly.

A headered price list

Here is an example with a header row and one data row:

<table>
  <tr>
    <th scope="col">Fruit</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>5 TL</td>
  </tr>
</table>

The first row holds <th> cells; the rows below use <td>. This small difference makes the table both clearer and more accessible.

Exercise Add a header row

Add a <table> to body. The first <tr> row should hold two <th scope="col"> headers (for example Fruit, Price). The second <tr> row should hold two <td> cells (for example Apple, 5 TL).

Show example solution

<body>
  <table>
    <tr>
      <th scope="col">Fruit</th>
      <th scope="col">Price</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>5 TL</td>
    </tr>
  </table>
</body>

Test yourself

When should you use <th> instead of <td>?
- When you want a colored cell
- When you write a column or row header
- When you want a wider cell
- When you want to leave a cell empty
Show answer

When you write a column or row header — Correct. <th> is for column or row headers; it adds meaning and accessibility.

Mark the column header

<th ____>Fruit</th>

Show answer

<th scope="col">Fruit</th>

Match each value to its meaning

scope="col"

Column header
scope="row"

Row header
<th>

Header cell
<td>

Data cell

Next lesson: Table sections

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies