Атрибут scope HTML тега <th>

Значение и применение

Атрибут scope (HTML тега <th>) определяет набор ячеек данных для которых текущая заголовочная ячейка предназначена (столбец / строка / группа столбцов / группа строк / в зависимости от контекста). Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.elements.th.scope
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
scope✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис:

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

Отличия HTML 4.01 от HTML 5

Нет.

Значения атрибута

Значение Описание
col Указывает, что заголовочная ячейка относится ко всем ячейкам данных в столбце в котором она определена.
colgroup Указывает, что заголовочная ячейка относится ко всем ячейкам данных в группе столбцов, которую она охватывает.
row Указывает, что заголовочная ячейка относится ко всем ячейкам данных в строке, в которой она определена.
rowgroup Указывает, что заголовочная ячейка относится ко всем ячейкам данных в группе строк, которую она охватывает.
auto Автоматическое определение связей по структуре таблицы применяется при отсутствии атрибута или недопустимом значении. auto — название состояния, а не допустимое значение атрибута.

Примеры, попробуйте сами

Атрибут scope элемента th

Атрибут описывает связь или назначение заголовков и не обязан менять внешний вид. Изучите разметку таблицы.

base.css
CSS
/* Границы помогают увидеть ячейки и их объединение. */
table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid;
    padding: 4px;
}
index.html
HTML
<table>
  <caption>
    Заказ
  </caption>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Блокнот</th>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Карандаш</th>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Всего</th>
      <td>5</td>
    </tr>
  </tfoot>
</table>