HTML <td> Tag
Тег <td> определяет стандартную ячейку данных в HTML-таблице. Он должен быть дочерним элементом <tr>, задающего строку таблицы.
Тег <td> задаёт стандартную ячейку данных в HTML-таблице. Он должен использоваться как дочерний элемент <tr>, который определяет строку таблицы. Для определения ячейки-заголовка используется тег <th>.
Тег <td> может содержать текст, форму, изображение, таблицу и другие элементы. По умолчанию содержимое выравнивается по левому краю.
Если вы представляете табличные данные в таблицах, каждая ячейка данных должна добавляться отдельно в виде элемента <td>.
Все строки таблицы содержат одинаковое количество ячеек, равное количеству ячеек в самой длинной строке. Если в строке меньше ячеек, браузер автоматически заполнит её, добавив пустые ячейки в конце.
Если необходимо подчеркнуть отсутствие данных в отдельных ячейках, создайте ячейку без содержимого в нужном месте.
Ячейки, добавленные браузером, не имеют границ, и если они идут подряд, то отображаются как единая объединённая ячейка.
Синтаксис
Тег <td> используется парно. Содержимое записывается между открывающим (<td>) и закрывающим (</td>) тегами.
HTML-тег <td>
<table>
<tr>
<td>...</td>
</tr>
</table>Пример использования HTML-тега <td>:
<!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>, чтобы растянуть одну ячейку на несколько столбцов или строк.
colspanзадаёт количество столбцов, которые занимает ячейка. Значение должно быть положительным целым числом; по умолчанию равно1. Ячейка сcolspan="2"занимает горизонтальное пространство двух обычных ячеек, поэтому строка, которой она принадлежит, должна содержать на один<td>меньше, чем остальные строки.rowspanзадаёт количество строк, которые занимает ячейка. Значение должно быть положительным целым числом; по умолчанию равно1. Ячейка сrowspan="2"распространяется на следующую строку, и в той строке следует убрать<td>, который должен был располагаться под ней.
Не допускайте, чтобы объединение выходило за пределы таблицы. Если colspan или rowspan выходит за край таблицы, браузеры обрезают его до доступного количества столбцов или строк, не добавляя новых. И наоборот: если не удалить ячейки, перекрываемые объединением, в строке окажется слишком много ячеек и разметка таблицы нарушится.
Пример HTML-тега <td> с атрибутом colspan:
<!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;
vertical-align: bottom;
}
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>
<td colspan="2">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Результат
Пример HTML-тега <td> с атрибутом rowspan:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Связывание ячеек с заголовками для обеспечения доступности
В простой таблице программы чтения с экрана автоматически связывают каждую ячейку данных с заголовком соответствующего столбца и строки. В сложной таблице — с несколькими уровнями заголовков или объединёнными ячейками — такая автоматическая привязка перестаёт работать. Чтобы подобные таблицы оставались доступными для вспомогательных технологий, добавьте каждому тегу <th> атрибут id, а затем перечислите соответствующие идентификаторы в атрибуте headers каждого связанного <td>. Ячейка может ссылаться на несколько заголовков — идентификаторы в этом случае разделяются пробелами.
Пример HTML-тега <td> с атрибутом headers:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Здесь каждая ячейка данных ссылается на описывающий её заголовок, поэтому программа чтения с экрана может объявить, например, «Rate: $25» вместо просто «$25».
Проблемы с разметкой <td>
По умолчанию каждая ячейка данных выравнивается по вертикали с ячейками в том же столбце других строк. Добавление лишнего <td> только в одну строку нарушает это выравнивание, поскольку все следующие ячейки в этой строке сдвигаются на один столбец вправо.
Например, в этой строке три ячейки, тогда как в остальных строках таблицы их две, поэтому ячейки больше не совпадают с заголовками:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>Решение — объединять ячейки с помощью colspan вместо добавления лишнего столбца. Здесь ячейка «March» охватывает оба столбца над итогами, сохраняя правильное выравнивание сетки:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| 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. |
| valign | top middle bottom baseline | Задаёт вертикальное выравнивание содержимого ячейки. Не поддерживается в HTML 5. Используйте вместо этого CSS-свойство vertical-align. |
| width | % pixels | Задаёт ширину ячейки. Не поддерживается в HTML 5. |
Тег <td> поддерживает Глобальные атрибуты и Атрибуты событий.
Атрибут scope не является допустимым для <td>; он принадлежит элементу <th>, где объявляет, к столбцу или строке относится заголовок. Используйте headers для <td>, чтобы сослаться на ячейки-заголовки.
Как стилизовать HTML-тег <td>
Наиболее распространённые стили для <td> управляют отступами, границами и выравниванием. Применяйте правила одновременно к td и th, чтобы ячейки-заголовки и ячейки данных выглядели согласованно:
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Связанные теги
<table>— контейнер, содержащий все строки и ячейки.<tr>— определяет строку таблицы; каждый<td>должен находиться внутри неё.<th>— определяет ячейку-заголовок, связанную с<td>через атрибутheaders.