Подтвердить что ты не робот

Когда использовать tbody, colgroup, thead и т.д. В таблице HTML?

Когда я узнал о таблицах HTML, меня не учили о tbody, thead, tfoot, colgroup. Когда вы должны использовать их? Я пошел на сайт W3Schools, и я понимаю, как они работают, но не когда их использовать или не использовать.

Ответ 1

Вы используете их, если хотите предоставить дополнительную информацию о своей таблице и упорядочить ее содержимое. Они также могут влиять на визуальное отображение вашей таблицы в некотором роде (хотя это может различаться в разных браузерах - например, поддержка <colgroup>/<col> крайне неоднородна).

Например, если у вас есть строки заголовков сверху и снизу, вы должны группировать их в <thead> и <tfoot> соответственно, а строки данных - в <tbody>. Браузеры гарантируют, что <tfoot> всегда отображается внизу, независимо от того, помещаете ли вы его перед или после каких-либо элементов <tbody> или <tr> ¹ или сколько данных у вас в таблице, что полезно, если ваша таблица потенциально имеет много строк:

<table>
  <caption>High Scores</caption>
  <thead>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </thead>
  <tfoot>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </tfoot>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>10000</td></tr>
    <tr><td>2</td><td>Bob</td><td>9000</td></tr>
    <tr><td>3</td><td>Carol</td><td>8500</td></tr>
    <tr><td>4</td><td>Dave</td><td>8000</td></tr>
    <!-- Up to 100 data rows -->
  </tbody>
</table>

В противном случае по умолчанию все строки сгруппированы в один <tbody> (даже если вы явно не используете теги <tbody></tbody> в своей таблице). Следовательно, если у вас есть строки заголовков в нижней части таблицы, вам придется поместить их в самую нижнюю часть таблицы, чтобы они отображались последними:

<table>
  <caption>High Scores</caption>
  <tr><th>#</th><th>Name</th><th>Score</th></tr>

  <tr><td>1</td><td>Alice</td><td>10000</td></tr>
  <tr><td>2</td><td>Bob</td><td>9000</td></tr>
  <tr><td>3</td><td>Carol</td><td>8500</td></tr>
  <tr><td>4</td><td>Dave</td><td>8000</td></tr>
  <!-- Up to 100 data rows -->

  <tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>

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

¹_{Обратите внимание, что требуется, чтобы a <tfoot>, если вы его используете, помещался перед любыми элементами <tbody> или <tr> в предыдущих спецификациях вплоть до и включая HTML 4 и XHTML 1 для проверки на эти доктрины. Это больше не относится к HTML5.}