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

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,610 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,919 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>.

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,610 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.