Обязательно ли иметь <th> в какой-либо таблице?
https://stackoverflow.com/questions/2278018
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
необходимо ли иметь <th> в любой таблице?даже если таблица не имеет заголовка?
таблица имеет 3 других тега <thead> <tbody> <tfoot> нужно ли использовать все, даже если у меня ничего нет для нижнего колонтитула таблицы?Firefox по умолчанию добавляет все это в код.
и нужно ли это , <th> всегда должен быть в <thead>
и если у меня есть заголовок в содержимом, полученном от клиента, и заголовок находится за пределами таблицы, но связан с таблицей, то как я должен разместить этот заголовок для таблицы
В приведенной выше таблице
<h3>Heading of table<h3>
<table>......</table>
в качестве заголовка таблицы
<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>
или в качестве заголовка таблицы
<table>
<caption> Heading of table</caption>
Что хорошо для программы чтения с экрана и семантически корректно?
Решение
В соответствии с 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>), который вы можете использовать в строке таблицы.A <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> разделять или быть первой ячейкой в каждой строке в зависимости от структуры и характера вашей таблицы.
Другие советы
Использовать <th>s, если вы отображаете табличные данные — используйте по одному для каждого столбца.Это удобно для ваших постоянных пользователей и важно для программ чтения с экрана.Не использовать <th>s, если вы используете таблицу для макетирования (или других гнусных схем...)
Нет, не обязательно это иметь.Но не похоже, что ты используешь это правильно.Обычно у вас есть один для каждого столбца.Простой пример правильного использования th:
<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
Вы также можете сделать:
<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>
Ответ таков
ДА!
если вы используете таблицы для отображения табличных данных.
Табличные данные организованы в строки и столбцы не просто так. Значение элемента данных в ячейке таблицы определяется значением столбца и строки, в которых он появляется.
Важно идентифицировать те ячейки, которые придают значение строкам и столбцам, а не ячейки, которые просто содержат данные.
Например, следующая таблица не содержит абсолютно никакой значимой информации:
34 56 90 15 45 65 85 30 50 55 70 35
Цифры имеют значение только в том случае, если строкам и столбцам присвоены имена.Эти имена помечены с помощью <th>:
Февраль Май Август Ноябрь ИТ - Й Кеннеди IST
Конечно, мы до сих пор не знаем, что означают эти цифры, и именно поэтому <caption> необходим:
Средние температуры по месяцам в отдельных аэропортах
Февраль Май Август Ноябрь
ИТ - Й
Кеннеди
IST
Наконец, важно отметить такие детали, как единицы измерения, источники данных и т.д.Такого рода информация обычно содержится в нижнем колонтитуле таблицы:
Средние температуры по месяцам в отдельных аэропортах
Февраль Май Август Ноябрь
ИТ - Й
Кеннеди
IST
Temperatures in °F. Source: Publication #456 MNMO
Заголовок таблицы переходит в <caption>.Тот самый <thead> и <tfoot> разделы особенно полезны, когда таблица становится большой.Видишь Как бороться с разрывами страниц при печати большой HTML-таблицы для примера.
Вы можете использовать <colgroups> сгруппировать логически связанные данные.
Вы хотите использовать то, что лучше всего описывает ваши данные.
<caption> опишет всю таблицу. th создаст одну ячейку, которая обычно используется для описания одного столбца (но также может использоваться для заголовков строк).
thead, tfoot, и tbody.все они могут использоваться и являются необязательными при условии, что они расположены в указанном порядке, если используются, и у вас есть только один thead и один tfoot (но вы можете иметь несколько tbody.Многие браузеры (все?) добавят их неявно, если вы этого не сделаете, но в спецификации сказано, что они не являются обязательными.
th может появиться внутри любого tr независимо от того, где tr является.
<table> <tr> <td>text</td> </tr> </table>
Это минимальная таблица, которую я могу придумать.
Преимущества заключаются в семантике.Тот самый <th> означает T способный H идер.Используйте его для разметки заголовков ваших столбцов.Как правило, в пределах <thead>.
