Тег <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>Результат
В этом примере мы задали строки таблицы тегами <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>Результат
Пример с атрибутом 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>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| 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>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <td>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <td>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <td>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
Что такое HTML тег <td>?
Правильный!
Неправильно!