What's The Correct Scope Value To Use For An HTML Table Cell ...

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs What’s the correct scope value to use for an HTML <th> table cell than spans several columns? Ask Question Asked 15 years, 5 months ago Modified 8 years, 2 months ago Viewed 9k times 7

Say you’ve got an HTML table, with a <th> cell that spans several columns, e.g.

<table> <tr> <th colspan="3" scope="?">Scores</th> <!-- ...more headings here... --> </tr> <tr> <th scope="col">English</th> <th scope="col">Maths</th> <th scope="col">Science</th> <!-- ...more sub-headings here... --> </tr> <tr> <td>12</td> <td>16</td> <td>20</td> <!-- ...more cells here... --> </tr> </table>

What’s the correct value for the scope attribute for the spanning header cell? col seems incorrect as it’s heading several columns, but colgroup does’t seem right if I don’t actually have any colgroup tags.

• html
• html-table
• accessibility

Share Improve this question Follow edited Sep 25, 2016 at 16:17 Brian Tompsett - 汤莱恩 5,8757272 gold badges6060 silver badges133133 bronze badges asked Jun 7, 2009 at 19:37 Paul D. WaitePaul D. Waite 98.7k5757 gold badges201201 silver badges271271 bronze badges Add a comment |

3 Answers 3

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 9

The WebAIM (Web Accessibility in Mind) group has a great article on creating accessible data tables. Overall, they recommend avoiding spanned rows or columns, as screen readers cannot interpret the markup reliably.

Short of avoiding spanned columns altogether, I've had really good luck using the id/headers attributes in combination with the scope attribute. Although the markup is more verbose, this seems to simplify things for JAWS, and as a result it has less trouble interpreting the data.

This is what your example would look like with id/headers:

<table> <tr> <th id="scores" colspan="3">Scores</th> </tr> <tr> <th id="english" scope="col">English</th> <th id="maths" scope="col">Maths</th> <th id="science" scope="col">Science</th> </tr> <tr> <td headers="scores english">12</td> <td headers="scores maths">16</td> <td headers="scores science">20</td> </tr> </table> Share Improve this answer Follow answered Jun 9, 2009 at 21:35 Dave LockhartDave Lockhart 1,14111 gold badge1111 silver badges99 bronze badges 1

• 1 Great stuff, thanks. I’d lean on the side of the screen readers supporting the spec rather than everyone coding to their quirks, but it’s great to document the quirks. – Paul D. Waite Commented Jun 10, 2009 at 12:43

Add a comment | 5

According to the second example table in the HTML spec, it’s colgroup, despite the lack of colgroup tags.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Share Improve this answer Follow answered Jun 7, 2009 at 19:38 Paul D. WaitePaul D. Waite 98.7k5757 gold badges201201 silver badges271271 bronze badges Add a comment | 1

Perhaps the caption feature may be better suited for you...

<table> <caption>Scores</caption> <thead> <tr> <th scope="col">English</th> <th scope="col">Maths</th> <th scope="col">Science</th> </tr> </thead> <tbody> <tr> <td>12</td> <td>16</td> <td>20</td> </tr> </tbody> </table>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

Share Improve this answer Follow answered Dec 8, 2013 at 21:38 MetalAdamMetalAdam 57622 gold badges99 silver badges2828 bronze badges 2

• Ah — yes quite possibly. The actual use case I had in mind was a table with more columns than in my example HTML, so the heading that spans several columns didn’t actually span the entire table. I’ll amend the example accordingly. – Paul D. Waite Commented Dec 8, 2013 at 23:31
• 1 Gotcha. Dave's response in using the ID's seems to be exactly what you were looking for. You know, 4 years ago :) – MetalAdam Commented Dec 10, 2013 at 14:10

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• html-table
• accessibility

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Related

3 How to decide when to use <th> or when not? in <table> 3 HTML accessible tables - does th have to be the first column in a row? 2 Writing accurate <th> for accessible <table> 8 "id" and "headers" or "scope" for data table accessibility? 4 CSS style elements within <th> scope 5 Why use both <thead> and <th scope="col"> 3 HTML Table denoting non-data table cell 1 Table accessibility question for table elements question 0 one column table with multiple <th> 0 Accessibility issue with HTML table

Hot Network Questions

• Commencement and repeal dates in UK Acts of Parliament - meaning of "From and after"
• How can I solve a multi-delay differential equation?
• Can a contradiction exist in the antecedent of a sequent?
• How to utilize zener diode specs
• Why the second C in "recyceln" is pronounced [k] instead of [ts]?
• What does methenoel mean?
• Prove or disprove that the envelope of some chords of a conic section is another conic section
• How to avoid wasting reader investment with a thematically disappointing ending?
• Can I protect my EV car charger's cable with aluminum tape and a stainless steel hose helix?
• Scandinavian film, 1980s, possibly called Royal Toilet?
• Why「记」for shop names?
• Does the canonical distribution assign probability to microstates or macrostates?
• Why does VGA sync have 50 Ω drivers but 75 Ω cables?
• Are Quantum Algorithms better than classical algorithms for all problems?
• Did Superdana manufacture a 66 AC outlet power strip/surge protector?
• Why did General Groves mention the baby delivery count here?
• What should I do with a package that is delivered to my address but the name is wrong?
• Where in the Gospels does Jesus explain what 'The Truth' is?
• Will Spirit trade with SAVEQ when it recovers?
• Brushing pastries with jam
• Are periodic functions such as sine and cosine defined on surreal numbers?
• Why does glm in R with family binomial(link="log") sometimes require start values?
• 1980s or 90s space cartoon with a space prince and princess
• Boy who can see EM waves but loses the ability because of a thunderstorm

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html