Тег HTML <td>
Тег <td> задаёт стандартную ячейку данных в HTML-таблице. Его нужно использовать как дочерний элемент <tr>, который определяет строку в таблице. Для определения ячейки заголовка используется тег <th>.
Тег <td> может содержать текст, форму, изображение, таблицу и т. д. По умолчанию содержимое внутри него выравнивается по левому краю.
TIP
Если вы представляете табличные данные в таблицах, то каждая ячейка данных должна добавляться отдельно как элемент <td>.
Все строки в таблице содержат одинаковое количество ячеек, что соответствует количеству ячеек в самой длинной строке. Если в строке меньше ячеек, браузер автоматически заполнит строку, добавив пустые ячейки в её конце.
TIP
Более сложные таблицы могут содержать элементы <caption>, <colgroup>, <col>, <tfoot>, <tbody> или <thead>.
Если нужно подчеркнуть, что в других ячейках нет данных, создайте при необходимости ячейку без содержимого.
Ячейки, добавленные браузером, не имеют границ, и если они идут подряд, то будут отображаться как одна объединённая ячейка.
Синтаксис
Тег <td> используется в паре. Содержимое записывается между открывающим (<td>) и закрывающим (</td>) тегами.
HTML <td> Tag
<table>
<tr>
<td>...</td>
</tr>
</table>Пример тега HTML <td>:
Month and Date|Example of the HTML <td> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>В этом примере мы используем тег <tr> для определения строк таблицы, <th> — для определения ячеек заголовка, а <td> — для определения стандартных ячеек данных.
Атрибуты colspan и rowspan обычно используются с тегом <td>, чтобы содержимое занимало несколько столбцов или строк.
Пример тега HTML <td> с атрибутом colspan:
Company e-mail and date|Example of the HTML <td> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr style="height:60px;">
<td colspan="2" valign="bottom">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Результат
Пример тега HTML <td> с атрибутом rowspan:
Example with rowspan attribute|HTML <td> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>Month</th>
<th>Year</th>
</tr>
<tr>
<td style="background-color:#e6ebef;">March</td>
<td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
</tr>
<tr style="background-color:#e6ebef;">
<td style="background-color:#e6ebef;">April</td>
</tr>
</table>
</body>
</html>Проблемы с расположением <td>
По умолчанию элементы табличных данных выстраиваются вертикально, выравниваясь с элементами табличных данных в предыдущих и следующих строках. Например, если таблица содержит четыре строки ячеек данных, первая ячейка данных из каждой строки выравнивается с первой ячейкой данных в других строках. И если вы добавите дополнительный элемент <td> в одну строку, результат будет выглядеть неаккуратно. С помощью атрибута colspan вы можете решить эту проблему. Здесь ячейкам, расположенным ниже и выше дополнительной ячейки, будет указано занимать пространство двух ячеек табличных данных.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| abbr | text | Определяет сокращённую версию содержимого в ячейке или альтернативный текст. (Пользовательские агенты, такие как программы чтения с экрана, могут выводить это описание перед самим содержимым). Не поддерживается в HTML 5. |
| align | left right center justify char | Выравнивает содержимое в ячейке. Не поддерживается в HTML 5. |
| axis | category_name | Классифицирует ячейки с похожим содержимым. Не поддерживается в HTML 5. |
| background | background | Устанавливает фон в ячейке. Не поддерживается в HTML 5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Определяет цвет фона ячейки. Не поддерживается в HTML 5. |
| bordercolor | bordercolor | Устанавливает цвет границы. Не поддерживается в HTML 5. |
| char | character | Выравнивает содержимое в ячейке по символу. Используется только если атрибут align="char". Не поддерживается в HTML 5. |
| charoff | number | Устанавливает количество символов, на которое содержимое будет выровнено относительно символа, указанного атрибутом char. Используется только если атрибут align="char". Не поддерживается в HTML 5. |
| colspan | number | Определяет количество столбцов, на которое должна растягиваться ячейка. Значение атрибута должно быть положительным целым числом. Значение по умолчанию — 1. |
| headers | header_id | Указывает одну или несколько ячеек заголовка (определённых тегом <th>), с которыми связана стандартная ячейка. |
| height | % pixels | Устанавливает высоту ячейки. Не поддерживается в HTML 5. |
| nowrap | nowrap | Указывает, что содержимое внутри ячейки не должно переноситься. Не поддерживается в HTML 5. |
| rowspan | number | Указывает количество строк, на которое должна растягиваться ячейка. Значение атрибута должно быть положительным целым числом. Значение по умолчанию — 1. Не рекомендуется использовать значения выше 65534, так как они будут уменьшены до 65534. |
| scope | col colgroup row rowgroup | Определяет ячейки, к которым относится элемент заголовка (определённый в <th>). Не поддерживается в HTML 5. |
| valign | top middle bottom baseline | Указывает вертикальное выравнивание содержимого внутри ячейки. Не поддерживается в HTML 5. |
| width | % pixels | Устанавливает ширину ячейки. Не поддерживается в HTML 5. |
Тег <td> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать тег HTML <td>
{
"tag_name": "td"
}Практика
Какие атрибуты есть у тега HTML <td>?