Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Tables Table Basics The Table Header Cell Element

Sina Maleki
Sina Maleki
6,135 Points

<th> and scope attribute benefit

As all you've seen, after adding <th> with scope attribute in a code there is no change in preview, what is the benefits of using this tag in our table? Cheers,

3 Answers

Hello. the <th> tag creates a table header cell element. The text inside <th> elements are bold and centered by default, but the text inside <td> elements are regular and left aligned. ** <th> element is used only for the headings of the table so that people can identify what is the heading and what is the content ** The scope attribute identifies whether a cell is a header for a column, row, or group of columns or rows.

These may not bring up any visual changes but when search engines crawl through ur website it helps them to identify what is the header and what is the content. and also this helps people using screen readers Mark my answer as the best if i managed to help u

Emmanuel Molina
Emmanuel Molina
9,268 Points

Don't forget that with CSS you can target different tag to apply different styles. For example if you use td everywhere how do you put every header in bold ? If your headers are tagged with th it's easier.

JASON LEE
JASON LEE
13,655 Points

If you want to make the header in the top row bold, adding this to your .css seems to work

  th[scope="col"] {
  font-weight: bold; 
  }