HTML Тег <tbody>
Приклад
HTML таблиця з елементами <thead>, <tbody> та <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <tbody> використовується для групування основного вмісту в таблиці HTML.
Елемент <tbody> використовується в поєднанні з <thead> та <tfoot> елементами для визначення кожної частини таблиці (основного - body, верхнього - header, нижнього колонтитула - footer).
Браузери можуть використовувати ці елементи для прокручування тіла таблиці незалежно від верхнього та нижнього колонтитулів. Крім того, під час друку великої таблиці, яка охоплює кілька сторінок, ці елементи можуть увімкнути друк верхнього та нижнього колонтитулів таблиці вгорі та внизу кожної сторінки.
Примітка: Елемент <tbody> елемент повинен мати один або кілька тегів <tr> всередині.
Тег <tbody> слід використовувати в такому контексті: як дочірній елемент елемента <table>, після будь-яких <caption>, <colgroup> та <thead> елементів.
Порада: Елементи <thead>, <tbody> та <tfoot> за умовчанням не впливатимуть на макет таблиці. Однак ви можете використовувати CSS для стилізації цих елементів (див. приклад нижче)!
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <tbody> | Так | Так | Так | Так | Так |
Глобальні атрибути
Тег <tbody> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <tbody> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Стилізація <thead>, <tbody> та <tfoot> за допомогою CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Спробуйте самі »
Приклад
Як вирівняти вміст у <tbody> (за допомогою CSS):
<table style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Спробуйте самі »
Приклад
Як вертикально вирівняти вміст у <tbody> (за допомогою CSS):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody style="vertical-align:bottom">
<tr style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Спробуйте самі »
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <tbody> з наступними значеннями за замовчуванням:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
