开发者

The Correct Way to Organize Tables

开发者 https://www.devze.com 2023-03-07 06:29 出处:网络
I have this markup <div id=\"standards\"> <table border=\"1\"> <thead> <tr> <th>Markup</th>

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


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消