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.3. In simple tables use the scope attribute to associate data cells with their corresponding headers

9.3. In simple tables use the scope attribute to associate data cells with their corresponding headers

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

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".

<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

Find out more

1. Tables with two headers.

Comments

Add a comment

All fields are mandatory.

Name

Email

Comment

Notify me of follow-up comments via email.

Current ye@r * Leave this field empty

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. Mark up the row and column header cells with <th>
    • 9.3. In simple tables use the scope attribute to associate data cells with their corresponding headers
    • 9.4. Add role="presentation" to each layout <table>
  • 10. Using CSS
  • 11. Zoom and font size
  • 12. Keyboard Navigation
  • 13. Iframes
  • 14. Additional rules for compliance
  • Complementary guidelines
• Main rich interface components accessibility guidelines
• Accessibility guidelines for editors (template)

Contact us

Toronto (Canada) Email: contact@atalan.ca

Paris (France) Email: contact@atalan.fr

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

For any comments, suggestions or complaints Email: contact@atalan.fr

AcceDe PDF project