Какова цель для HTML-тела?

Question

Каковы основные причины, по которым кто-то использует HTML tbody в таблице? Это только для форматирования?

Я обычно использую head и body; Я не использовал thead и tbody.

Answer 1

Чтобы придать вашему столу смысловой смысл:

<table>
  <thead>
    <tr>
      <th>Person</th>
      <th>Amount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Person1</td>
      <td>$5.99</td>
      <td>02/03/09</td>
    </tr>
    <tr>
      <td>Person2</td>
      <td>$12.99</td>
      <td>08/15/09</td>
    </tr>
  </tbody>
</table>

Согласно спецификации :

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

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

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

Помимо важной семантической важности этого (подумайте, программы чтения с экрана), вы можете легко стилизовать заголовки отдельно от строк данных. Другой важный пример - плагины jQuery, такие как плагин Tablesorter , которые могут легко определить, как выглядит ваша структура данных.

Answer 2

Одним из замечательных применений, которые я нашел для tbody, является возможность прокручивания строк при сохранении видимого верхнего и нижнего колонтитула столбца. Это работает только в браузерах, которые на самом деле поддерживают CSS. Извините, нет Internet Explorer!

<tbody style="height: 150px; overflow-y: scroll">

Answer 3

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

И почему именно этот тег необходим, так как th определяет поля заголовка - браузер может определить, какая часть таблицы является заголовком по этим полям.

Какой смысл от thead и tbody? Они работают в некоторых случаях и нарушают HTML в других случаях. Они дублируют функциональность th. Они усложняют код и могут вызвать проблемы. Прежде чем я узнал о tbody, я предполагал, что tr-s являются дочерними элементами таблицы.

Answer 4

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

Кстати, даже если вы не укажете tbody, оно все равно неявно создано для вас.

Вы также можете использовать это для стилизации, например:

table thead tr { background-color: yellow; }
table tbody tr { background-color: #C9C9C9; }

Это также полезно в Javascript и jQuery для того, чтобы иметь таблицы с выбираемыми строками (просто в качестве одного примера). Обычно вас интересует только выбор или выделение строк в теле, а не строки заголовка вверху.

Answer 5

Да, его можно использовать для стилизации, а также для селекторов jQuery, чтобы помочь определить, какие элементы вы хотите выбрать. В конце концов, вы можете иметь tr теги в thead или tbody .

Answer 6

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

1. Чтобы обеспечить прокрутку тела независимо от верхнего и / или нижнего колонтитула
2. Чтобы упростить применение различных правил стиля к различным разделам таблицы.

<table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>