Question

我知道这是语义上有效的HTML（在W3C验证过），但问题是它是否具有逻辑意义？具有名称的th是否适用于下一行中单元格的标题？

<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">John Baker</th>
        </tr>
        <tr>
            <td>US</td>
            <td>27</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

我想要的效果是将名称作为其余数据的标题，并将其放在表格的单独一行中。

或者我应该将它们保持在同一行并使用CSS将其移动到单独的行？

Answer 1

如果您的<th>特定于<tbody>（请记住，每个<tbody>可以有多个<table>），那么语义上正确的做法就是给它一个scope attribute：

<th colspan="3" scope="rowgroup">John Baker</th>

或者，如果您要将特定单元格定义为特定<th>，那么您可以使用headers attribute：

<table>
    <thead>
        <tr>
            <th id="header-country">Country</th>
            <th id="header-age">Age</th>
            <th id="header-sex">Sex</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3" id="header-1">John Baker</th>
        </tr>
        <tr>
            <td headers="header-country header-1">US</td>
            <td headers="header-age header-1">27</td>
            <td headers="header-sex header-1">Male</td>
        </tr>
    </tbody>
</table>

行标题在单独的行中

1 个答案: