HTML scope 属性是用于定义标题单元格的 HTML 属性。它用于标题行、列、列组或行组。
第 <th> 元素将单元格指定为一组表单元格的标题。scope 和 headers 属性指定此组的性质。
注意:此属性由屏幕阅读器使用,但对浏览器没有可见影响。
如果未定义 scope 属性,则浏览器会自动选择应用标题单元格的单元格组。
语法
<th scope=" col | row | colgroup | rowgroup " >
- row:标题与其所属行的所有单元格相关。
- col:标题与其所属列的所有单元格相关。
- rowgroup:标头属于行组,并与其所有单元格相关。
- colgroup:标题属于并列组,并与其所有单元格相关。
适用对象
下面列出的元素允许使用 HTML scope 属性。
元素 | 描述 |
---|---|
<th> | HTML <th> 标签指定 HTML 表格的标题单元格。 |
HTML scope 属性的示例
以下示例将说明 HTML scope 属性,我们应该在何处以及如何使用此属性!
在 “th” 标签中使用 scope='col' 和 scope='row'
输出窗口显示一个表格,并突出显示应用于“th”元素的范围。
<!DOCTYPE html>
<html>
<head>
<title>HTML th scope Attribute</title>
<style>
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td {
text-align: center;
}
th[scope='col'] {
background-color: #696969;
color: #fff;
}
th[scope='row'] {
background-color: #d7d9f2;
}
</style>
</head>
<body>
<h3>HTML scope attribute in 'th'</h3>
<table>
<caption>Alien football stars</caption>
<tr>
<td>S.NO</td>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<td>1.</td>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<td>2.</td>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<td>3.</td>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
</body>
</html>
在 “th” 标签中使用 scope='colgroup' 和 scope='rowgroup'
输出窗口显示一个表格,应用于“th”元素的范围以粗体显示。
<!DOCTYPE html>
<html>
<head>
<title>HTML th scope Attribute</title>
</head>
<body>
<h3>HTML scope attribute in 'th'</h3>
<table border="1">
<tr>
<th scope="colgroup">Name</th>
<th scope="colgroup">Company</th>
<th scope="colgroup">Roles</th>
</tr>
<tr>
<th scope="rowgroup">Aman</th>
<td>QikepuCom</td>
<td>Technical content Engineer</td>
</tr>
<tr>
<th scope="rowgroup">Vivek</th>
<td>QikepuCom</td>
<td>Developer</td>
</tr>
</table>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
是否支持 | Yes | Yes | Yes | Yes | Yes |