- Stack Overflow"> - Stack Overflow">Why Use Both And - Stack Overflow

Trang chủ » Html Table Scope Col » Why Use Both And - Stack Overflow

Có thể bạn quan tâm

Just browsing Stack Overflow? Help us improve your experience. Sign up for research
    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 Why use both <thead> and <th scope="col"> Ask Question Asked 4 years, 9 months ago Modified 4 years, 9 months ago Viewed 3k times 5

I'm currently reading "HTML & CSS: Design and Build Web Sites" by Jon Duckett and in chapter 6, which is about tables, there is an example as follows:

<!DOCTYPE html> <html> <head> <title>Tables</title> </head> <body> <table> <thead> <tr> <th scope="col"></th> <th scope="col">Home starter hosting</th> <th scope="col">Premium business hosting</th> </tr> </thead> <tbody> <tr> <th scope="row">Disk space</th> <td>250mb</td> <td>1gb</td> </tr> <tr> <th scope="row">Bandwidth</th> <td>5gb per month</td> <td>50gb per month</td> </tr> <tr> <th scope="row">Email accounts</th> <td>3</td> <td>10</td> </tr> <tr> <th scope="row">Server</th> <td>Shared</td> <td>VPS</td> </tr> <tr> <th scope="row">Support</th> <td>Email</td> <td>Telephone and email</td> </tr> <tr> <th scope="row">Setup</th> <td>Free</td> <td>Free</td> </tr> <tr> <th scope="row">FTP accounts</th> <td>1</td> <td>5</td> </tr> </tbody> <tfoot> <tr> <td></td> <td colspan="2">Sign up now and save 10%!</td> </tr> </tfoot> </table> </body> </html>

I read here that <thead> element defines a set of rows defining the head of the columns of the table. And scope="col" on <th> element is used to indicate that it is a heading for a column. My question is, do we really need to use both or is using one of them sufficient? Can/does <thead> do anything that scope="col" can't/doesn't do or vice versa?

  • html
  • html-table
Share Improve this question Follow asked Feb 6, 2020 at 14:43 user11748261user11748261 1
  • 2 webaim.org/techniques/tables/data – epascarello Commented Feb 6, 2020 at 14:56
Add a comment |

2 Answers 2

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

An important aspect here is accessibility: By using th elements both on top and to the left with according scope attributes (col/row), screenreaders "understand" (and read/output in some way) that there are two headers for each td- one on top and one to the left. The important thing for that is not the thead element (which some browsers even add automatically if it isn't included in the original code, but which couldn't possibly be added for a column), but the th elements, which indicate header cells.

Share Improve this answer Follow edited Feb 6, 2020 at 15:25 answered Feb 6, 2020 at 14:53 Johannes's user avatar JohannesJohannes 67.6k22 gold badges83 silver badges137 bronze badges Add a comment | 1

While the <th> element defines the first row of your table as the header (e.g. via giving it a different style), the three tags <thead><tbody><tfoot> define the structure of your table. One example case is that some browsers enable scrolling of the table body independently of the header and footer.

You don't have to use any of them, it always depends on how you want your table to look and be structured.

Share Improve this answer Follow answered Feb 6, 2020 at 14:48 PaulS's user avatar PaulSPaulS 9224 silver badges18 bronze badges 0 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.

  • The Overflow Blog
  • Your docs are your infrastructure
  • Featured on Meta
  • More network sites to see advertising test [updated with phase 2]
  • We’re (finally!) going to the cloud!
  • Call for testers for an early access release of a Stack Overflow extension...
7 HTML Table Tag without the Thead Tag 18 What is benefit of <thead> 120 HTML table td meaning 193 html tables: thead vs th 4 Why is <td></td><td></td> not the same as <td colspan="2"></td> 1 If a table has no thead, should it have a tbody? 11 Why use the th element instead of td element? 48 Is it required to use thead, tbody and tfoot tags? 1 How to stye <THEAD> tag in HTML (with css): 7 Is td allowed inside thead?

Hot Network Questions

  • Table structure with multiple foreign keys and values
  • How to design for API use cases that need different data from the same table?
  • Student is almost always late, and expects me to re-explain everything he missed
  • Is there a limit below a panel's rating for bonding neutrals and grounds?
  • Reducing wattage of a portable car heater
  • Why is a pure copper cathode necessary in the electrolytic refining of copper?
  • What is this Stardew Valley item?
  • Why is Anarchism not considered fundamentally against the "democratic order" in Germany?
  • Is there a cryptographic method that can only decrypt for a certain range of seeds?
  • p column type stops compilation in RevTeX
  • If the hard problem of consciousness is unanswerable, is it a hard problem or just a bad question?
  • Should I ask for physical recommendation letters now to avoid future issues with professors' availability?
  • Angular orientation of exact solution of the Hydrogen Schrödinger Equation
  • Find the Smallest Data Type for a Number
  • Can this strong directional blur at wide apertures still be explained by the usual arguments?
  • Why hot refers to being closer and cold refers to moving away in the hotter/colder game?
  • Sorites paradox and emergence
  • Responsibility for clearing gutters? (Landlord and Tenant Act 1985)
  • How do you calculate the number of skid patches on a fixie?
  • Is Isaiah's suffering servant the prophet Jeremiah?
  • How to combine the multiple collections as a collection in geometry node?
  • Are there any examples of exponential algorithms that use a polynomial-time algorithm for a special case as a subroutine (exponentially many times)?
  • Why does Japanese not have a native "tu" sound?
  • It will not last
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

Từ khóa » Html Table Scope Col