Какова цель для 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> 

According to the specification:

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

Столешница и стопка стола должны содержать информацию о колонках таблицы. Тело таблицы должно содержать строки данных таблицы.

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

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

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>