Согласно HTML DTD это модель содержимого для таблиц HTML:
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION - - (%inline;)* -- table caption -->
<!ELEMENT THEAD - O (TR)+ -- table header -->
<!ELEMENT TFOOT - O (TR)+ -- table footer -->
<!ELEMENT TBODY O O (TR)+ -- table body -->
<!ELEMENT COLGROUP - O (COL)* -- table column group -->
<!ELEMENT COL - O EMPTY -- table column -->
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
Так что это недопустимый синтаксис:
<thead><th>Heading of table</th></thead>
Должно быть:
<thead><tr><th>Heading of table</th></tr></thead>
<th> элементы нигде не требуются. Это просто один из двух типов ячеек (другой - <td>), которые вы можете использовать в строке таблицы. <thead> - это необязательный раздел таблицы, который может содержать одну или несколько строк.
Редактировать: Что касается , почему использовать <thead>, есть несколько причин:
- Семантика: Вы различаете содержимое таблицы и «метаданные». Это чаще всего используется для разграничения заголовков столбцов и строк данных;
- Доступность: помогает людям, использующим программы чтения с экрана, понимать содержание таблицы;
- Неэкранные носители: Печать многостраничной таблицы может позволить разместить содержимое
<thead> в верхней части каждой страницы, чтобы люди могли понять, что означают столбцы, не откидывая назад несколько страниц;
- Стили: CSS можно применять к
<tbody> элементам, <thead> элементам, обоим или некоторым другим комбинациям. Это дает вам что-то еще, чтобы написать селектор против;
- Javascript: это часто возникает при использовании jQuery и подобных библиотек. Дополнительная информация полезна при написании кода.
В качестве примера (5) вы можете сделать это:
$("table > tbody > tr:nth-child(odd)").addClass("odd");
Элемент <thead> означает, что эти строки не будут стилизованы таким образом. Или вы можете сделать:
$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
с:
tr.hover { background: yellow; }
, что опять исключает <thead> строки.
Наконец, многие из тех же аргументов применимы к использованию элементов <th> над элементами <td>: вы указываете, что эта ячейка - не данные, а какой-то заголовок. Часто такие ячейки будут сгруппированы в одну или несколько строк в разделе <thead> или будут первой ячейкой в каждой строке в зависимости от структуры и характера вашей таблицы.