Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andre Kucharzyk
4,479 PointsWhy use both <th scope="col"> and <thead>
Why in this exercise we are using both <th> and <thead>? Arent they synonymous?
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">E-mail</th>
<th scope="col">Job role</th>
</tr>
</thead>
3 Answers
Steven Parker
231,275 PointsAs you can see from the example, the thead element encloses rows to identify them as header rows. It doesn't display anything in itself.
The th element is an actual cell that will contain header content to be displayed. It would be inside a row.
As to the scope attribute, it's true that heading cells in a thead row would generally relate to a column, but their might be some value (perhaps for styling or scripting) in explicitly defining their scope with the attribute.
The potential uses of the thead element and the scope attribute are not quite the same. The thead indicates entire rows containing heading header information. This could be used to include the header rows on each page of a printed, multi-page table, or to present a long table with a scrolling body and static header rows.
The scope attribute defines which cells a specific th header cell relates to. The th element is not only used for column headers, nor is it restricted to rows in a thead. The scope attribute might be used to give special styling to certain header cells based on their function.
Andre Kucharzyk
4,479 PointsThe scope="col" as well as thead element don't display anything in itself, so i don't get your point.
My question was why would you use both simultaneously when they achieve same exact thing.
Steven Parker
231,275 PointsIt depends on how you use them, they could be used for the same thing, but their usage could also be very different. I extended my original answer with some examples.
Elena Zhenilo
Front End Web Development Techdegree Student 2,778 PointsAs far as I understand it, <thead> is a kind of wrapper, like <div> or <section>, when you need to wrap elements to target them with CSS.