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

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

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

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

Больше: thead

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

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

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

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

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

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

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

<thead>

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

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

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

<th>

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

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

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

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

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