HTML - scope 属性_HTML 菜鸟教程

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

<< HTML - sandbox 属性 HTML - selected 属性 >>