Тег HTML <tbody>
Тег <tbody> определяет содержимое тела (набор строк) HTML-таблицы, создавая в ней отдельный семантический блок. Тег <tbody> используется вместе с тегами <thead> и <tfoot>, которые соответственно задают заголовок и нижний колонтитул таблицы.
Тег <tbody> должен использоваться как дочерний элемент <table> после элементов <caption>, <colgroup> (если они есть) и <thead>. В HTML5 элемент <tfoot> может располагаться либо перед, либо после элемента <tbody>.
TIP
Элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на расположение таблицы. Используйте CSS-свойства, чтобы настроить внешний вид таблицы.
При печати документа элементы <thead> и <tfoot> определяют информацию, которая может быть одинаковой или очень похожей на каждой странице многостраничной таблицы, тогда как содержимое тега <tbody> будет меняться от страницы к странице.
При использовании <tbody> нельзя иметь элементы <tr> (строки таблицы), которые являются дочерними элементами <table>, но не включены в <tbody>. Если вы используете строки, не относящиеся к заголовку и нижнему колонтитулу, они должны находиться внутри элемента <tbody>.
Для каждой таблицы можно использовать более одного элемента <tbody>, если они идут подряд. Это разделит строки в больших таблицах на секции, и вы сможете форматировать каждую из них отдельно.
Синтаксис
Тег <tbody> используется в паре. Содержимое записывается между открывающим (<tbody>) и закрывающим (</tbody>) тегами.
HTML <tbody> Tag
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Пример тега HTML <tbody>:
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot style="background-color:grey;">
<!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody style="background-color:lightgrey;">
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>Результат
Пример тега HTML <tbody> с тегами <thead> и <tfoot>:
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #8ebf42;
color: #fff;
}
tbody {
background-color: #f3ebeb;
}
tfoot {
background-color: #ccc7c7;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2500</td>
</tr>
</tfoot>
</table>
</body>
</html>Атрибуты
| Attribute | Values | Description |
|---|---|---|
| align | right left center justify char | Указывает выравнивание содержимого внутри элемента <tbody>. Не поддерживается в HTML5 |
| bgcolor | bgcolor | Задает цвет фона строк внутри элемента <tbody>. Не поддерживается в HTML5. |
| char | character | Указывает выравнивание содержимого внутри элемента <tbody> по символу. Используется только когда атрибут align="char". Не поддерживается в HTML5. |
| charoff | number | Указывает количество символов, на которое содержимое внутри элемента <tbody> будет выровнено относительно символа, заданного атрибутом char. Используется только когда атрибут align="char". Не поддерживается в HTML5. |
| valign | top bottom middle baseline | Указывает вертикальное выравнивание содержимого внутри элемента <tbody>. Не поддерживается в HTML5. |
Тег <tbody> также поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать тег HTML <tbody>
{
"tag_name": "tbody"
}Практика
Что верно о теге HTML <tbody> согласно информации, представленной на w3docs.com?