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

HTML HTML Tables Table Basics The Table Header Cell Element

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Posted by Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Can I place the <th> anywhere in my table row?

Hey everyone!

I am asking myself something: can I place the <th> anywhere in my table row? It means: if I want to place the <th> and its associated scope value in the second column of my row, it does not change anything, does it?

I want to integrate a table with the 2016 Olympic results (just for practicing my skills). Later I will use a database and PHP to sort the results and do some maths.

But for now here I am: I want to place the <th> in the second, and not the first, position of my row and I will add it the scope. Please find the code below:

<h1>2016 Olympic Results - Ten best countries.</h1>

    <table>
      <tr>
        <th scope="col">Position</th>
        <th scope="col">Country Name</th>
        <th scope="col">Gold Medals</th>
        <th scope="col">Silver Medals</th>
        <th scope="col">Bronze Medals</th>
        <th scope="col">Total of Medals</th>
      </tr>
      <tr>
        <td>1</td>
        <th scope="row">United States</th>
        <td>35</td>
        <td>33</td>
        <td>32</td>
        <td>100</td>
      </tr>
    </table>

I think I am right but this is just in case :).

Regards.

Thomas.

3 Answers

Graeme Oxley
Graeme Oxley
8,931 Points
Graeme Oxley
Graeme Oxley
8,931 Points

Hi Thomas,

Yes you can put the <th> anywhere in the table that you like, however keep in mind that the <th> tag is mostly a semantical element. By this I mean that it's purpose is to further define information, specifically in the case of devices that need to be able to make sense of information in order to interpret and pass on that information. It is very similar to the case of <b> versus <strong>.

<th> is intended to be used to show emphasis on something more important than the rest of the information. "scope" is intended to go beyond saying that something has importance or emphasis, and actually label the information that it is important to.

If your intention is to show emphasis visually (bolded, italic, colored, etc) then you need to use CSS to do so, however it is still recommended that you maintain the semantical value of the <th>. Solutions: (a) apply CSS directly to the <th> element, or (b) create a class with the desired visual emphasis to apply to the <th>.

tobiaskrause
tobiaskrause
9,160 Points
tobiaskrause
tobiaskrause
9,160 Points

Well hm yeah it is possible. But you could just add some css to the country <td>. Just font-weight: bold and they look like kidaa like a <th>. Of course you have to fix the position too. Maybe this also might help you:

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Thanks Tobiaus Krause.

According to W3C Validator (https://validator.w3.org/) it is perfectly correct and it passes the validation. So I guess you can put it anywhere in the table.

Thanks for you though :) .

Thomas.