HTML Тег <tr>
Приклад
Проста HTML-таблиця з трьома рядками; один рядок заголовка та два рядки даних:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <tr> визначає рядок у таблиці HTML.
Елемент <tr> містить один або декілька <th> або <td> елементів.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <tr> | Так | Так | Так | Так | Так |
Глобальні атрибути
Тег <tr> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <tr> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Як вирівняти вміст всередині <tr> (за допомогою CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="text-align:right">
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як додати фоновий колір до рядка таблиці (за допомогою CSS):
<table>
<tr style="background-color:#FF0000">
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як вертикально вирівняти вміст усередині <tr> (за допомогою CSS):
<table style="height:200px">
<tr style="vertical-align:top">
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="vertical-align:bottom">
<td>January</td>
<td>$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як створити заголовки таблиці:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як створити таблицю з підписом:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як визначити клітинки таблиці, які охоплюють більше ніж один рядок або стовпець:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Таблиці.
HTML DOM довідник: Об’єкт TableRow.
CSS підручник: Стилізація таблиць.
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <tr> з наступними значеннями за замовчуванням:
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
