CODEWITHSUNDEEP
htmlsemantics
Jawad
Jawad

Reputation: 6672

The Correct Way to Organize Tables

I have this markup

<div id="standards">
<table border="1">
    <thead>
        <tr>
            <th>Markup</th>
            <th colspan="4">HTML</th>
            <th colspan="4">XHTML</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Version</th>
            <td colspan="3">4.01</td>
            <td>5</td>
            <td colspan="3">1.0</td>
            <td>5</td>
        </tr>
        <tr>
            <th>Flavour</th>
            <td>Strict</td>
            <td>Transitional</td>
            <td>Frameset</td>
            <td>N/A</td>
            <td>Strict</td>
            <td>Transitional</td>
            <td>Frameset</td>
            <td>N/A</td>
        </tr>
        <tr>
            <th>Support</th>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
        </tr>
    </tbody>

My question is should I leave the first and second "tr" in the "tbody" as it is now, or should I move them to "thead" from the point of view of semantics. The table as can be seen, has 3 headers. What would be the correct way of doing this? Here is the fiddle

Fiddle

Upvotes: 2

Views: 762

Answers (2)

Paul Sham
Paul Sham

Reputation: 3205

You can have multiple <tr>'s in <thead> according to the w3 documentation for HTML4 and HTML5 and doing that would fit your table in terms of semantics, so go ahead and move them to the thead.

Upvotes: 1

No Results Found
No Results Found

Reputation: 102735

If this table really has 3 rows of headers (not data), put them in <thead>.

<td> is for actual data in general.

There's nothing wrong with <th> in a table row, it indicates that the cell is header for that particular row.

You're fine the way it is.

Upvotes: 1

Related Questions