<tr> должен быть внутри <tbody> - PullRequest
8 голосов
/ 03 мая 2011

Должна ли строка таблицы (<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>

Ответы [ 5 ]

6 голосов
/ 02 августа 2012

Вопреки тому, что сказал Террилл Томсон, таблица с тегами <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>
6 голосов
/ 03 мая 2011

Нет, <tr> может быть в <thead>, <tbody>, <tfoot> или не обязательно в любом из них.

1 голос
/ 09 мая 2011

Если у вас есть <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> 

В качестве альтернативы вы можете подумать, можно ли организовать данные в несколько таблиц или можно предоставить альтернативную версию, которая будет проще в использовании для пользователей программ чтения с экрана. Например, календарь событий может быть дополнительно представлен в виде списка событий.

1 голос
/ 03 мая 2011

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

Спецификация HTML4 для таблиц

0 голосов
/ 03 мая 2011

необязательно, поэтому ответ «да может быть снаружи» - см. http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3.
...