CODEWITHSUNDEEP
htmlcsshtml-table
notthehoff
notthehoff

Reputation: 1242

Can using a <th> tag after a <td> cause problems?

I am encountering a piece of html I have to edit where the table looks like the included code below. It feels a little dirty and is messing with css I have to apply. Other than making dom manipulation/styling a bit odd, are there instances where this is good practice?

<table>
    <tbody>
        <tr>
            <td> <a href="">edit</a> <a href="">new</a></td>
            <th>I AM THE IMPORTANT CELL</th>
            <td>things</td>
            <td>more things</td>
        </tr>
    </tbody>
</table>

Upvotes: 4

Views: 1952

Answers (2)

recursive
recursive

Reputation: 86074

The distinction between <th> and <td> is a semantic one. There are visual differences, but that's just the default user-agent stylesheet, and can be overridden. As part of the html spec, it's specifically intended that <th> headers can be headers for both rows and columns. There's intended to be flexibility in how you use them. It doesn't cause any problems.

In fact, the example in the specification uses a <th> after a <td>.

  <tr> <td> <th scope=rowgroup> Cats <td> <td>

http://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html#the-th-element

Upvotes: 5

Pratik
Pratik

Reputation: 1138

TH is supposed to be used as a header cell. If it is a header, then ideally, so should have all the other columns as headers too, coz you should ideally be having a header's row, followed by your data rows. It is a perfectly valid HTML though, but it does not use the correct elements for the purpose.

<table>
    <tbody>
        <tr>
            <th> <a href="">edit</a> <a href="">new</a></th>
            <th>I AM THE IMPORTANT CELL</th>
            <th>things</th>
            <th>more things</th>
        </tr>
        <tr> <!-- data cells--> </tr>
    </tbody>
</table>

Upvotes: -1

Related Questions