Тег <td>
Тег <td> (укр. – “клітинка таблиці”) використовується для визначення клітинки таблиці в HTML-документах. Він є одним з основних елементів при створенні таблиць, оскільки розміщує дані всередині таблиці. Кожен елемент <td> знаходиться всередині тега <tr>, який визначає рядок таблиці. Клітинки таблиць можуть містити текст, зображення, посилання, інші елементи HTML та навіть форми.
Тег <td> є одним із найважливіших для організації даних у таблиці. Кожна клітинка може бути стилізована або містити різноманітні HTML-елементи.
Атрибути
Специфічні атрибути
- colspan — дозволяє клітинці розтягнутися на кілька стовпців. Наприклад:
<td colspan="2">Розтягнута клітинка</td>- rowspan — дозволяє клітинці розтягнутися на кілька рядків. Наприклад:
<td rowspan="2">Розтягнута клітинка</td>Глобальні атрибути
Тег <td> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор елемента. Наприклад:
<td id="price-cell">10</td>- class — клас, який допомагає застосувати стилі CSS або групувати елементи. Наприклад:
<td class="highlight">Акція</td>- style — інлайн-стилізація клітинки. Наприклад:
<td style="background-color: #f0f0f0;">Дані</td>- lang — вказує мову вмісту клітинки. Наприклад:
<td lang="en">Data</td>- title — додатковий опис клітинки таблиці, який може бути корисним для доступності. Наприклад:
<td title="Ціна товару">10</td>
Приклад використання
<table>
<thead>
<tr>
<th>Назва</th>
<th>Ціна</th>
<th>Кількість</th>
</tr>
</thead>
<tbody>
<tr>
<td>Товар 1</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Товар 2</td>
<td>15</td>
<td>3</td>
</tr>
</tbody>
</table>
У цьому прикладі кожен тег <td> містить дані для певного стовпця таблиці: назва товару, ціна та кількість.
Додаткові моменти
- Тег
<td>є вбудованим (inline-block) елементом, тобто, він не розтягується на всю ширину контейнера, як блочний елемент, але може бути налаштований через CSS для зміни ширини та висоти. - Використовуйте атрибути colspan та rowspan для об’єднання кількох клітинок в одну, щоб представити більш складну структуру даних у таблиці.
- Стилізуйте клітинки таблиці за допомогою CSS для покращення вигляду. Це дозволяє уникнути застарілих атрибутів стилізації, таких як border або cellpadding.
