Question

我只是想知道默认情况下HTML <table>元素是否隐式将属性scope =“col”应用于<th>元素中包含的第一组<thead>元素？

当我在浏览器中呈现下面的第一组HTML时，它似乎会自动检测到1月，2月，3月，4月等的<th>单元格是列的标题。那么scope =“col”是否需要添加到标记，因为它将以这种方式自动呈现？

 <table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>March</th>
            <th>April</th>
            <th>May</th>
            <th>June</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Firefox</th>
            <td>37.1</td>
            <td>36.6</td>
            <td>36.3</td>
            <td>35.8</td>
            <td>35.2</td>
            <td>34.4</td>
        </tr>
        </tr>   
    </tbody>
</table>

第二组标记包括添加到Jan，feb，March April等标签的scope =“col”。是否有必要？正如上面的示例似乎将这些<th>呈现为列，而不使用作用域“col”。

我知道scope属性在普通的Web浏览器中没有视觉效果，但可以被屏幕阅读器使用。那么为了更好的语义标记和可访问性，是否应该添加它？

<table>
        <caption>2009 Employee Sales by Department</caption>
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">Jan</th>
                <th scope="col">Feb</th>
                <th scope="col">March</th>
                <th scope="col">April</th>
                <th scope="col">May</th>
                <th scope="col">June</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Firefox</th>
                <td>37.1</td>
                <td>36.6</td>
                <td>36.3</td>
                <td>35.8</td>
                <td>35.2</td>
                <td>34.4</td>
            </tr>
            </tr>   
        </tbody>
    </table>

Answer 1

根据HTML5 spec，scope属性默认为auto：

范围属性的缺失值默认为自动状态。

此值以

为特征

自动状态使标题单元格应用于基于上下文选择的一组单元格。

所以我假设，屏幕阅读器将能够正确检测上下文，这反过来意味着您不必显式定义属性，除非您有rowgroup和{colgroup的一些特殊实例或用例{1}}值。

Answer 2

您可以使用范围attrribute更多地指定表的含义。在普通的表中，我甚至不会使用它，但如果你的表在你的页面上有意义，并且人们想要接管它，那么使用它会很方便，特别是在阅读器上。但是，如果你只是添加表来做一些小的东西，就把它留下来。就个人而言，如果表格真正扩展，你应该只考虑这个问题。

定义如下：

定义和用法

scope属性指定标题单元格是否为标题   列，行或列或行组。

这来自W3网站，顺便说一句。

HTML col属性

2 个答案: