HTML - scope 属性

HTML 的 **scope** 是一个 HTML 属性，用于定义表头单元格。它用于表头行、列、colgroup 或 rowgroup。

<th> 元素将单元格指定为一组表格单元格的表头。scope 和 headers 属性指定此组的性质。

注意：此属性由屏幕阅读器使用，但对浏览器没有可见影响。

如果未定义 scope 属性，则浏览器会自动选择表头单元格适用的单元格组。

语法

<th scope=" col | row | colgroup | rowgroup " >

row：表头与它所属行的所有单元格相关。
col：表头与它所属列的所有单元格相关。
rowgroup：表头属于一个 rowgroup，并与它的所有单元格相关。
colgroup：表头属于一个 colgroup，并与它的所有单元格相关。

应用于

下面列出的元素允许使用 HTML **scope** 属性。

元素	描述
<th>	HTML <th> 标签指定 HTML 表格的表头单元格。

HTML scope 属性示例

下面的示例将说明 HTML scope 属性，以及我们应该在哪里以及如何使用此属性！

在“th”标签中使用 scope='col' 和 scope='row'

输出窗口显示一个表格，并且为“th”元素应用的 scope 突出显示。

<!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”元素应用的 scope 以粗体显示。

<!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>tutorialspoint</td>
         <td>Technical content Engineer</td>
      </tr>
      <tr>
         <th scope="rowgroup">Vivek</th>
         <td>tutorialspoint</td>
         <td>Developer</td>
      </tr>
   </table>
</body>

</html>

支持的浏览器

属性
scope	是	是	是	是	是

html_attributes_reference.htm

打印页面