9.3. In Simple Tables Use The Scope Attribute To Associate Data Cells ...

You are here:

• Homepage
• >AcceDe Web Guidelines
• >HTML and CSS accessibility guidelines
• >9. Tables
• >9.2. Tag simple data table headers with <th> and scope

9.2. Tag simple data table headers with <th> and scope

A data table is simple when each header cell applies to all the cells in the row or column.

Tag each row and column header cell with the <th> tag

In each data table, tag each row and column header cell with the <th> tag.

In other words, whenever a cell is required to understand the data proposed in the table, it must be tagged with <th>.

Using the scope attribute on <th> tags

To associate headers with their corresponding data in this type of table, add the scope attribute to the <th> tags. The value of the attribute depends on whether the header cell concerns:

• An entire column: scope="col".
• An entire row: scope="row".

Example

<table> <caption>Average monthly temperatures of the 3 largest cities in Canada.</caption> <tr> <td>&nbsp;</td> <th scope="col">Toronto</th> <th scope="col">Montreal</th> <th scope="col">Vancouver</th> </tr> <tr> <th scope="row">June</th> <td>22°C</td> <td>28°C</td> <td>26°C</td> </tr> <tr> <th scope="row">July</th> <td>24°C</td> <td>30°C</td> <td>28°C</td> </tr> </table> Average monthly temperatures of the 3 largest cities in Canada.

Toronto	Montreal	Vancouver
June	22°C	28°C	26°C
July	24°C	30°C	28°C

Note

When the table contains only one header type, the scope attribute is not required.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

Email *

Comment *

Notify me of follow-up comments via email.

Current ye@r * Leave this field empty

Updates

01 September 2025Merging of two files and addition of a remark concerning the scope attribute

Back to top

• Graphic and functional accessibility guidelines
• HTML and CSS accessibility guidelines
  • 1. General structure
  • 2. Page title
  • 3. Languages
  • 4. HTML Grammar and Semantics
  • 5. Links and Buttons
  • 6. Images and Icons
  • 7. Forms
  • 8. Lists
  • 9. Tables
    • 9.1. Use <caption> to tag data table captions
    • 9.2. Tag simple data table headers with <th> and scope
    • 9.3. Tag complex data tables headers with <th> and headers and id
    • 9.4. Add role="presentation" to each layout <table>
  • 10. Using CSS
  • 11. Keyboard Navigation
  • 12. Iframes
  • 13. Additional rules for compliance
  • Complementary guidelines
• Main rich interface components accessibility guidelines
• Accessibility guidelines for editors (template)

Contact us

Toronto (Canada) Email: [email protected]

Paris (France) Email: [email protected]

• Website: www.atalan.fr
• Atalan on LinkedIn

For any comments, suggestions or complaints Email: [email protected]

AcceDe PDF project