HTML :: Тег <td>
В HTML тег <td> (от англ. table data cell – табличная ячейка с данными) предназначен для формирования ячеек с данными в таблице и должен размещаться внутри элемента <tr>. Ячейки таблицы могут содержать практически любые другие <html>-элементы, типичные для тела документа и предназначенные для отображения на странице пользователю, например, текст, изображения, медиа-контент, формы и даже другие таблицы.
Закрывающий тег может быть опущен, если за элементом следует другой элемент <td> или элемент <th> или же он является последним элементом родительского <tr>.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
Закрывающий тег: не обязателен.
Атрибуты
- colspan – используется для объединения ячеек таблицы по горизонтали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
- headers – связывает данную ячейку с одной или несколькими заголовочными ячейками, в качестве значения принимая через пробел id этих заголовочных ячеек. Атрибут предназначен для использования в речевых браузерах, поэтому в обычных браузерах его эффект не заметен.
- rowspan – используется для объединения ячеек таблицы по вертикали. В качестве значения принимает натуральное число, которое определяет количество объединяемых ячеек. По умолчанию используется 1.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/td
Примеры
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №1</title>
<!-- Для оформления используем стили, а не атрибуты -->
<style>
table, th,td{
border: 1px solid black;
}
table{
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<!-- Заголовок таблицы -->
<caption>Простая таблица с заголовком</caption>
<!-- Первая строка таблицы -->
<tr>
<!-- 2 заголовочные ячейки -->
<th>1-я колонка</th>
<th>2-я колонка</th>
</tr>
<tr>
<!-- 2 обычные ячейки -->
<td>Я – первая ячейка второй строки </td>
<td>Я – вторая ячейка второй строки</td>
</tr>
<tr>
<td>Я – первая ячейка третьей строки</td>
<td>Я – вторая ячейка третьей строки</td>
</tr>
</table>
</body>
</html>
Пример №1
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №2</title>
<!-- Для оформления используем стили, а не атрибуты -->
<style>
table, th,td{
border: 1px solid black;
}
table{
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<caption>Таблица с объединенными ячейками</caption>
<tr>
<!-- Объединяем 2 горизонтальные ячейки 1.1 и 1.2 -->
<td colspan="2" style="background-color: red">1.1+1.2</td>
<td>1.3</td> <td>1.4</td>
<!-- Объединяем 6 ячеек -->
<td rowspan="3" colspan="2" style="background-color: yellow">
1.5+1.6+<br>2.5+2.6+<br>3.5+3.6
</td>
<td>1.7</td> <td>1.8</td>
</tr>
<tr>
<td>2.1</td>
<!-- Объединяем 2 вертикальные ячейки 2.2 и 3.2 -->
<td rowspan="2" style="background-color: blue">2.2+<br>3.2</td>
<td>2.3</td> <td>2.4</td> <td>2.7</td> <td>2.8</td>
</tr>
<tr>
<td>3.1</td> <td>3.3</td> <td>3.4</td>
<td>3.7</td> <td>3.8</td>
</tr>
</table>
</body>
</html>
Пример №2
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример №3</title>
<!-- Для оформления используем стили, а не атрибуты -->
<style>
table, th,td{
border: 1px solid black;
}
table{
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<caption>Использование атрибута headers</caption>
<tr>
<th id="abiturient" colspan="3">Ф.И.О</th>
<th>Дата рождения</th>
</tr>
<tr>
<td headers="abiturient">Иванов</td>
<td headers="abiturient">Иван</td>
<td headers="abiturient">Иванович</td>
<td>3.05.1980</td>
</tr>
<tr>
<td headers="abiturient">Петренко</td>
<td headers="abiturient">Петр</td>
<td headers="abiturient">Петрович</td>
<td>21.07.1989</td>
</tr>
</table>
</body>
</html>
Пример №3