Вопрос по accessibility, html-validation, html – http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3
а таблицы (<tr>
) должны быть в теле таблицы (<tbody>
), если таблица имеет тело таблицы, или она может существовать вне тела таблицы?
<table>
<tr>
<td colspan='2'>...</td>
</tr>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tr>
<td colspan='2'>...</td>
</tr>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
<tr>
вне<tbody>
, страница не будет подтверждена:http://validator.w3.org
Как отметили другие,<tbody>
не является обязательным, если вы не используете<thead>
или же<tfoot>
, Основная причина использования последних двух элементов заключается в том, что верхний и нижний колонтитулы повторяются на каждой странице, если печатается длинная таблица.
Похоже, вы можете создать что-то вроде календаря, где вы хотите иметь чередующиеся строки<th>
(например, для дат) и<td>
(например, для событий в эту дату). Если это так, вы не должны переносить чередующиеся строки в<thead>
а также<tbody>
- это может сбить с толку браузеров, когда дело доходит до печати страницы. Если вы просто не включите элементы группировки, ваша таблица будет проверена. Однако некоторые средства чтения с экрана могут быть смущены этой разметкой и применять самый верхний ряд заголовков ко всем ячейкам под ними. Для такой сложной таблицы, как эта, вам нужно добавить дополнительную разметку, чтобы читатели экрана понимали, как организована таблица. Вот ваша таблица с доступной разметкой:
<table summary="A brief description of how the table is organized, for screen reader users">
<tr>
<th colspan='2' id="header1">...</th>
</tr>
<tr>
<td headers="header1">...</td>
<td headers="header1">...</td>
</tr>
<tr>
<th colspan='2' id="header2">...</th>
</tr>
<tr>
<td headers="header2">...</td>
<td headers="header2">...</td>
</tr>
</table>
В качестве альтернативы вы можете решить, можно ли организовать данные в несколько таблиц или можно предоставить альтернативную версию, которая будет проще в использовании для пользователей программ чтения с экрана. Например, календарь событий может быть дополнительно представлен в виде списка событий.
<tr>
теги за пределами<thead>
, <tfoot>
а также<tbody>
теги, но внутри<table>
теги будут проверены на соответствиеСлужба проверки разметки W3C.
Этот документ был успешно проверен как HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
</head>
<body>
<table>
<thead>
<th colspan="2">head1</th>
<th>head2</th>
</thead>
<tfoot>
<th colspan="2">foot1</th>
<th>foot2</th>
</tfoot>
<tr><td colspan="3">this row is outside of thead and tfoot</td></tr>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>3-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</body>
</html>
<tbody>
используется для обозначения тела вашего<table>
, если ваша таблица содержит<thead>
(заголовок таблицы) или<tfoot>
(нижний колонтитул) элементы. Если ваша таблица не содержит этих элементов, вы можете не использовать<tbody>
.
Правильное использование будет:
<table>
<thead><tr><th>Item </th><th>Cost </th></tr></thead>
<tbody><tr><td>Stack Overflow</td><td>Free </td></tr>
<tr><td>Something cool</td><td>$1.00</td></tr></tbody>
</table>
tbody> является необязательным, поэтому ответ «да, ;tr> может быть снаружи» - смотритеhttp://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 .
<tr>
может быть в<thead>
, <tbody>
, <tfoot>
или это не должно быть ни в одном из них.
thead
, tbody
или жеtfoot
элементы, еслиtr
находится непосредственно внутриtable
браузер будетДобавлять a tbody
содержатьtr
s. Итак, это вродеделает.
David Thomas
tbody
исходит из эксцентричности SGML, в которой вы можете опустить начальный тег и / или конечный тегнесколько элементов. Когда начальный тег и конечный тегtbody
опущены, парсер будет просто предполагать, что здесь должно бытьtbody
элемент и добавляет его к анализируемой модели дерева. Обратите внимание, что в XML такая причудливость не допускается, поэтому, если вы пропуститеtbody
в документе XML и проанализировать его как XML, затемtbody
не будет добавлено в проанализированное дерево. Это будет иметь эффект, еслиtbody
упоминается в правиле CSS.
jasso
tbody
элемент добавляется динамически (отображается в Web Inspector, но не в источнике фрейма). демонстрацияв JS Fiddle.
David Thomas
<tbody>
быть показано в визуализированном HTML, или это что-то динамически сделано без изменения кода?
Brook Julias