Html-таблицы: thead vs th

Ответ 1

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

Подробнее: thead

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

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

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

Ответ 2

<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>

Ответ 3

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

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

Ответ 4

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

Ответ 5

<thead>

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

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

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

<th>

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

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

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

Ответ 6

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

Ответ 7

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