HTML таблицы: thead vs th

155

Похоже (в любом случае в соответствии с примерами на этой странице ), что если вы используете THEAD, вам не нужно использовать TH.

Это правда? Если да, то каковы преимущества / недостатки THEAD против TH?

Крис
источник

Ответы:

124

<thead>Тег используется для группирования содержания заголовка в HTML - таблице. theadЭлемент должен быть использован в сочетании с , tbodyи tfootэлементами.

Больше: thead

Вы используете <thead>для инкапсуляции всей строки (или строк), чтобы обозначить их как заголовок таблицы. Согласно спецификации,

«Это разделение позволяет агентам пользователя поддерживать прокрутку тел таблицы независимо от заголовка и ножки таблицы. При печати длинных таблиц информация о заголовке и ножке таблицы может повторяться на каждой странице, содержащей данные таблицы».

<th>с другой стороны, используется для стилизации конкретной ячейки как ячейки заголовка, а не обычной ячейки данных.

sgokhales
источник
22
Я всегда использую их обоих.
11
Это один древний веб-сайт, на который вы ссылаетесь в «Больше: thead».
masterxilo
см. также: Документ Mozilla developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
Адриен Бе
3
@masterxilo Что ты ожидал? HTML сам по себе чертовски древний.
Дэн Бешард
1
@ Kano Не могли бы вы возразить, что кто-то ссылается на 30-летний RFC, который все еще используется? Какое значение имеет возраст страницы до тех пор, пока информация все еще актуальна?
jmbpiano
65

<th>фактически является заменой, <td>когда вы хотите пометить ячейку как ячейку заголовка.

Если вы хотите использовать <thead>и <th>не забудьте гнездо <th>внутри <tr>. В противном случае код может быть недействительным.
Пример:

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

rflw
источник
2
Это не отвечает на первоначальный вопрос, это скорее дополнение и должно быть комментарием, а не ответом.
Джеральд Шнайдер
7
Я знаю, но у меня слишком мало очков репутации, чтобы оставлять комментарии, поэтому я постарался опубликовать ответ. Извините, я виноват, но правила обслуживания всего стека иногда странные для меня.
rflw
28
На самом деле, этот ответ является единственным, показывающим использование TH и THEAD. +1 за это!
barrypicker
4
Если вы напишите «Преимущество в том, что вы thможете использовать внутри, theadа также внутри tbody, оба элемента полезны в их собственном контексте». это отвечает на вопрос ... Джеральд просто придирчив к тому, как вы написали ответ, но на самом деле это единственный ответ, предоставивший содержательный пример.
CPHPython
1
Я даже не знаю , что thполучает смелый ред по умолчанию, без дополнительных CSS, спасибо за это!
CPHPython
11

thявляется более конкретным, чем то, что может находиться внутри thead. thЯчейки указать заголовок соответствующих tdячеек. Фактически вы можете добавить headersв tdячейку атрибут, который указывает на идентификатор thячейки (для программ чтения с экрана). Так thчто напрямую связано tdс этой колонкой.

Тем не менее, theadможет содержать любую информацию ... обычно да, она включает в себя thячейки, но она также может включать в себя все, что вы считаете нужным в качестве информации в верхней части таблицы (кроме подписи, поскольку у нее есть собственный тег как хорошо).

Ник Мэннинг
источник
6

<thead> отличается тем, что может использоваться для повторения строки заголовка в верхней части страницы в печатных версиях.

Диодей - Джеймс Макфарлейн
источник
6

<thead>

Строки таблиц могут быть сгруппированы в голову столика, стол ногу, и один или более разделы таблицы тела, используя THEAD, TFOOTи TBODYэлементы, соответственно. Это разделение позволяет агентам пользователя поддерживать прокрутку тел таблицы независимо от ее головы и ноги. Когда печатаются длинные таблицы, информация о заголовке и основании таблицы может повторяться на каждой странице, содержащей данные таблицы.

Заголовок таблицы и ножка таблицы должны содержать информацию о столбцах таблицы. Тело таблицы должно содержать строки данных таблицы.

При наличии каждый THEAD, TFOOT и TBODY содержит группу строк. Каждая группа строк должна содержать хотя бы одну строку, определенную элементом TR.

<th>

Ячейки таблицы могут содержать два типа информации: информация заголовка и данные. Это различие позволяет агентам пользователя четко отображать заголовок и ячейки данных даже при отсутствии таблиц стилей. Например, визуальные пользовательские агенты могут представлять текст ячейки заголовка жирным шрифтом. Синтезаторы речи могут отображать информацию заголовка с отчетливым перегибом голоса.

Элемент TH определяет ячейку, которая содержит информацию заголовка. Пользовательские агенты имеют две части информации заголовка: содержимое элемента TH и значение атрибута abbr. Пользовательские агенты должны отображать либо содержимое ячейки, либо значение атрибута abbr. Для визуальных носителей последний может быть подходящим, когда недостаточно места для визуализации полного содержимого ячейки. Для невизуальных носителей аббревиатура может использоваться как сокращение для заголовков таблиц, когда они отображаются вместе с содержимым ячеек, к которым они применяются.

Источник: http://www.w3.org/TR/html4/struct/tables.html.

smartrahat
источник
3

Насколько я могу судить по опыту, нет никакой разницы в рендеринге, если вы не используете CSS для определения разницы в рендеринге. <td>Внутри <thead>будет оказывать такой же , как <th>внутри <table>или <tbody>.

amphetamachine
источник
Элемент thead также содержит строки.
DanMan
1
Я думаю, что вы имеете в виду <td>внутри <thead>рендера то же, что и а <th>, а не то, что <tr>делает.
радостный
0

Здесь нет жестких правил. <thead>Элемент просто еще один способ группировать столбцы и строки, так же , как <tbody>и <tfoot>есть. Таким образом, у вас есть больше возможностей для написания сценариев и форматирования.

DanMan
источник