HTML Тег <td>
Приклад
Проста HTML-таблиця з двома рядками та чотирма клітинками таблиці:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <td> визначає стандартну клітинку даних у таблиці HTML.
Таблиця HTML має два види клітинок:
- Комірки заголовка - містять інформацію заголовка (створену за допомогою елемента <th>)
- Комірки даних – містять дані (створені за допомогою елемента
<td>)
Текст в елементах <td> стандартний і вирівняний за лівим краєм за замовчуванням.
Текст в елементах <th> за замовчуванням виділяється жирним шрифтом і вирівнюється по центру.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <td> | Так | Так | Так | Так | Так |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| colspan | number | Визначає кількість стовпців, які повинна охоплювати клітинка |
| headers | header_id | Визначає одну або кілька клітинок заголовка, з якими пов’язана клітинка |
| rowspan | number | Встановлює кількість рядків, які повинна охоплювати клітинка |
Глобальні атрибути
Тег <td> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <td> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Як вирівняти вміст у <td> (за допомогою CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td style="text-align:right">$100</td>
</tr>
<tr>
<td>February</td>
<td style="text-align:right">$80</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як додати фоновий колір до клітинки таблиці (за допомогою CSS):
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="background-color:#FF0000">January</td>
<td style="background-color:#00FF00">$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як встановити висоту клітинки таблиці (за допомогою CSS):
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="height:100px">January</td>
<td style="height:100px">$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як вказати відсутність перенесення слів у клітинці таблиці (за допомогою CSS):
<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як вертикально вирівняти вміст усередині <td> (за допомогою CSS):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">January</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
Спробуйте самі »
Приклад
Як встановити ширину клітинки таблиці (за допомогою CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td style="width:70%">January</td>
<td style="width:30%">$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 довідник: Об’єкт TableData
CSS підручник: Стилізація таблиць
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <td> з наступними значеннями за замовчуванням:
td {
display: table-cell;
vertical-align: inherit;
}
