Тег <td> используется для создания стандартной ячейки HTML таблицы. Тег должен находиться внутри контейнера <tr>, который определяет строки таблицы. Для определения заголовочной ячейки используется тег <th>.

Содержимым тега <td> может быть любой HTML элемент; текст, форма, изображение, таблица и т.д. По умолчанию содержимое ячейки отображается обычным шрифтом и выравнивается по левому краю.

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

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

Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.

Синтаксис

<table>
 <tr>
   <td>...</td>
 </tr>
</table>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Месяц</th>
        <th>Дата</th>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>Март</td>
        <td>10.09.2018</td>
      </tr>
      <tr style="background-color:lightgrey;">
        <td>Июнь</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Результат

tdexample1

В этом примере мы задали строки таблицы тегами <tr>, заголовочные ячейки определили тегами <th>, а стандартные ячейки - тегами <td>.

Атрибуты colspan и rowspan обычно используются с тегом <td>, чтобы содержимое охватывало несколько столбцов или строк.

Пример с атрибутом colspan

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td { 
        padding: 10px; 
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Эл.  почта компании</th>
        <th>Дата</th>
      </tr>
      <tr>
        <td style="background-color:#e6ebef;"><a href="#">[email protected]</a></td>
        <td style="background-color:#e6ebef;">01.09.2017</td>
      </tr>
      <tr style="height:60px; background-color:#e6ebef;">
        <td colspan="2" valign="bottom"  style="background-color:#a3cced;">[email protected]; <strong>01.09.2017 </strong><span style="font-size:14px;">(received date)</span></td>
      </tr>
    </table>
  </body>
</html>

Результат

tdexample2

Пример с атрибутом rowspan

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td { 
        padding: 10px; 
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Месяц</th>
        <th>Год</th>
      </tr>
      <tr>
        <td  style="background-color:#e6ebef;">Март</td>
        <td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
      </tr>
      <tr style="background-color:#e6ebef;">
        <td style="background-color:#e6ebef;">Июнь</td>
      </tr>
    </table>
  </body>
</html>

Результат

tdexample3

Атрибуты

Атрибут Значение Описание
abbr text Определяет сокращенный вариант содержимого ячейки, либо выступает в роли альтернативного текста.
align left
right
center
justify
char
Выравнивает содержимое ячейки данных таблицы.
Не поддерживается в HTML5.
axis category_name Задает группировку ячеек, связанных между собой похожей информацией.
Не поддерживается в HTML 5.
background background Задает фоновый рисунок в ячейке.
Не поддерживается в HTML 5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Задает цвет фона ячейки таблицы.
Не поддерживается в HTML 5.
bordercolor bordercolor Задает цвет рамки.
Не поддерживается в HTML 5.
char character Выравнивает содержимое ячейки данных таблицы по заданному символу. Атрибут char используется только если атрибут align = "char".
Не поддерживается в HTML 5.
charoff number Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево. Атрибут charoff используется только, если атрибут align = "char".
Не поддерживается в HTML 5.
colspan number Атрибут определяет количество столбцов, которое ячейка должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 1000, т.к. они могут быть сокращены до этого числа. Значение по умолчанию 1.
headers header_id Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом <th>. Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов.
height %
pixels
Задает высоту ячейки.
Не поддерживается в HTML 5.
nowrap nowrap Указывает, что содержание в ячейке не должно переноситься.
Не поддерживается в HTML 5.
rowspan number Атрибут определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scope col
colgroup
row
rowgroup
Задает способ связывания заголовочной ячейки (HTML тег <th>) с ячейками данных в таблице.
Не поддерживается в HTML 5.
valign top
middle
bottom
baseline
Задает вертикальное выравнивание содержимого в ячейке данных.
Не поддерживается в HTML 5.
width %
pixels
Задает ширину ячейки данных.
Не поддерживается в HTML 5.

Тег <td> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <td> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <td>:

Цвет текста внутри тега <td>:

Стили форматирования текста для тега <td>:

Другие свойства для тега <td>:

Поддержка браузера

chrome edge firefox safari opera

Практикуйте свои знания

Что такое HTML тег <td>?
Считаете ли это полезным?