Атрибут headers HTML тега <td>

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

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

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

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

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

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

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

Синтаксис:

HTML
<td headers =  "th_id" >

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

Нет.

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

Значение Описание
th_id Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. В случае если указывается несколько id, то они записываются как список строк, разделенных пробелом. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.

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

Атрибут headers элемента td

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

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    color: #24364b;
    font:
        16px/1.5 system-ui,
        sans-serif;
    overflow-wrap: anywhere;
}
label {
    display: block;
    margin: 12px 0;
}
input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}
textarea {
    vertical-align: top;
}
button {
    margin: 4px;
    padding: 6px 10px;
}
img {
    max-width: 100%;
}
fieldset {
    min-width: 0;
}
pre {
    max-width: 100%;
    overflow: auto;
}
:focus-visible {
    outline: 2px solid #35658a;
    outline-offset: 2px;
}

table {
    border-collapse: collapse;
    max-width: 100%;
}
th,
td {
    border: 1px solid #8094a6;
    padding: 8px;
    text-align: left;
}
index.html
HTML
<table>
  <tr>
    <th id="product" scope="col">Товар</th>
    <th id="count" scope="col">Количество</th>
  </tr>
  <tr>
    <th id="notebook" headers="product" scope="row">Блокнот</th>
    <td headers="notebook count">2</td>
  </tr>
</table>