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
Примеры
<!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
<!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
<!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