Skip navigation

Provide a summary and a caption for tables.

(see guidelines for overcoming access barriers)

The summary is placed in the <table> tag at the beginning of the table. The summary attribute allows a browser or screen reader to expose or read the contents of the summary attribute if the user wishes.

The CAPTION element's text should describe the nature of the table. There are a number of formatting elements for placing the caption around the table, but different browsers may display the same caption in different layouts.

Example:

Using a summary and a caption or ‘title’ for tables:

IT333 - Peripherals classes Wednesdays term 1

Name

Students

Classroom

Barb

17

a.1

John

29

a.2

Jessica

25

a.3

Code for a summary and a caption or ‘title’ for tables


<table summary = "This table depicts the classroom location, teacher
name and student numbers for the IT subject IT333 - Peripherals.">
  <caption>IT333 - Peripherals classes Wednesdays term 1</caption>
  <tr>
    <th id="t1"><p>Name</p></th>
    <th id="t2"><p>Students</p></th>
   <th id="t3"><p>Classroom</p></th>
  </tr>
  <tr>
    <td headers="t1"><p>Barb</p></td>
    <td headers="t2"><p>17</p></td>
    <td headers="t3"><p>a.1</p></td>
  </tr>
  <tr>
    <td headers="t1"><p>John</p></td>
    <td headers="t2"><p>29</p></td>
    <td headers="t3"><p>a.2</p></td>
  </tr>
  <tr>
    <td headers="t1"><p>Jessica</p></td>
    <td headers="t2"><p>25</p></td>
    <td headers="t3"><p>a.3</p></td>
  </tr>
</table>

Back to top