НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

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;
}