Caption and title

Add a title to a table with <caption> to improve accessibility.

The caption element

To give a table a title you use the <caption> tag. This tag describes what the table is about in one short sentence: 'Monthly Sales', 'Class List' and so on.

The <caption> tag is written right after the <table> opening, before any other tag. The browser shows this title above the table. Screen-reader users hear the title before the table, so they are prepared for the content.

A captioned table example

A captioned price list looks like this:

<table>
  <caption>Coffee Menu</caption>
  <tr>
    <th scope="col">Drink</th>
    <th scope="col">Price</th>
  </tr>
  <tr>
    <td>Espresso</td>
    <td>25 TL</td>
  </tr>
</table>

Here the title appears as a single line above the table. Adding a <caption> to every table is a good accessibility habit.

Exercise Write a captioned table

Add a <table> to body. Right after the <table> opening, write a <caption> title (for example Monthly Sales). Then add at least one <tr> row containing a <th> and a <td> (for example January / 5000 TL).

Show example solution

<body>
  <table>
    <caption>Monthly Sales</caption>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Amount</th>
    </tr>
    <tr>
      <td>January</td>
      <td>5000 TL</td>
    </tr>
  </table>
</body>

Test yourself

Where is <caption> written in a table?
- Right after <table>, before everything else
- Right before <table>
- At the very end, before </table>
- Inside every <tr>
Show answer

Right after <table>, before everything else — Correct. caption goes right after the <table> opening, before any row.

Open the table title

<table>
  ____>Price List</caption>
  <tr><td>Coffee</td><td>20 TL</td></tr>
</table>

Show answer

<table>
  <caption>Price List</caption>
  <tr><td>Coffee</td><td>20 TL</td></tr>
</table>

Match each tag to its role

<caption>

Title describing the table
<table>

Table container
<th>

Column header cell
<tr>

Row

Next lesson: Cell spanning

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies