Html tr td: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Ячейка HTML-таблицы. Тег — журнал «Доктайп»

Тег <td> используется для создания ячейки таблицы. Он должен быть вложен в тег <tr>, который, в свою очередь, вложен в тег <table>. Ячейка может содержать текст, изображения, формы, список и другие HTML-элементы.

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Атрибуты тега <td>:

colspan — количество объединяемых ячеек по горизонтали.
rowspan — количество объединяемых ячеек по вертикали.
headers — список id элементов, которые связаны с ячейкой.

Примеры использования

Таблица с тремя колонками (имя, фамилия и возраст) и тремя строками данных:

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

В этом примере ячейки в первой строке таблицы определены с помощью тега <th>, который используется для заголовков таблицы, вместо <td>:

<table>
  <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

В этом примере используется атрибут

colspan, чтобы объединить ячейки в первой строке таблицы и создать заголовок для двух колонок:

<table>
  <tr>
    <td colspan="2">Сумма</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Товар 1</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Товар 2</td>
    <td>75</td>
    <td>25</td>
  </tr>
</table>

Важно запомнить

Если ячейка пустая, используйте <td></td> вместо <td/> для лучшей читаемости кода.
В одной строке таблицы должно быть одинаковое количество ячеек.

Если в ячейке нет содержимого, она всё равно отображается, но имеет нулевую высоту и ширину.
Если содержимое не помещается в ячейке, браузер автоматически изменит её размеры.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

31 марта 2023