Руководство по HTML

Полный список тегов HTML

HTML: <td> тег

HTML-тег <td> определяет стандартную ячейку в таблице HTML. Элемент <td> определяет ячейку таблицы, содержащую данные. Этот тег также часто называется элементом <td>.

Онлайн пример

　HTML-таблица с несколькими ячейками:

Пример

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Использование тега HTML td (Учебник по основам oldtoolbag.com)</title>
</head>
<body>
<table border="1">
　　<tr>
　　　　<th>Заголовок столбца 1</th>
　　　　<th>Заголовок столбца 2</th>
　　</tr>
　　<tr>
　　　　<td>Данные в столбце 1, строка 2</td>
　　　　<td>Данные в столбце 2, строка 2</td>
　　</tr>
　　<tr>
　　　　<td>Данные в столбце 1, строка 3</td>
　　　　<td>Данные в столбце 2, строка 3</td>
　　</tr>
　　<tr>
　　　　<td>Данные в столбце 1, строка 4</td>
　　　　<td>Данные в Столбце 2, Строке 4</td>
　　</tr>
</table>
</body>
</html>

Проверьте, посмотрите ‹/›

В этом примере документа HTML5 мы использовали тег <table>, чтобы создать таблицу с 2 столбцами и 4 строками. Первая строка таблицы определена с помощью первого тега <tr>. У нее есть 2 заголовочные ячейки, определенные тегом <th>. Вторые по четвертые строки таблицы определены с помощью тегов <td>, определяющих стандартные ячейки таблицы.

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Все основные браузеры поддерживают тег <td>.

Описание тега и его использования

Элемент <td> определяет стандартную ячейку в HTML-таблице.

У HTML-таблицы есть два типа ячеек:

Ячейка заголовка - содержит заголовковую информацию (создается элементом <th> (создается элементом <td>)
Стандартная ячейка - содержит данные (создается элементом <td>)

Текст в элементе <th> обычно представляется жирным и выровненным по центру.

Текст в элементе <td> обычно является обычным текстом, выровненным слева.

Советы и注意事项

Совет:Если необходимо расширить содержимое на несколько строк или столбцов, используйте атрибуты colspan и rowspan!

Различия между HTML 4.01 и HTML5

В HTML5某些 атрибуты HTML 4.01 больше не поддерживаются.

Атрибут

Атрибут	Значение	Описание
abbr	text	Не поддерживается HTML5. Определить сокращенную версию содержимого ячейки.
align	left 　right 　center 　justify 　char	Не поддерживается HTML5. Определить горизонтальное выравнивание содержимого ячейки.
axis	category_name	Не поддерживается HTML5. Классифицировать ячейку.
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 не поддерживает. HTML 4.01 уже弃用. Определить цвет фона ячейки.
char	character	Не поддерживается HTML5. Определить символ, по которому будет выравниваться содержимое.
charoff	number	Не поддерживается HTML5. Определить смещение отступа символа.
colspan	number	Определить количество столбцов, на которые можно расширить ячейку.
headers	header_id	Определить один или несколько заголовочных ячеек, связанных с ячейкой.
height	pixels %	HTML5 не поддерживает. HTML 4.01 уже弃用. Установить высоту ячейки.
nowrap	nowrap	HTML5 не поддерживает. HTML 4.01 уже弃用. Определить, будет ли содержимое ячейки разрываться.
rowspan	number	Установить количество строк, на которые можно расширить ячейку.
scope	col 　colgroup 　row 　rowgroup	HTML5 не поддерживает. Определяет метод связывания ячеек заголовка с ячейками данных.
valign	top 　middle 　bottom 　baseline	HTML5 не поддерживает. Определяет вертикальное положение содержимого ячейки.
width	pixels %	HTML5 не поддерживает. HTML 4.01 уже弃用. Определяет ширину ячейки.

Глобальные свойства

Поддержка тега <td> Глобальные свойства HTML.

Свойства событий

Поддержка тега <td> Свойства событий HTML.

Попробуйте - пример

Таблицельные ячейки,跨越多行或多列
Этот пример показывает, как определить таблицельные ячейки,跨越多行或多列.

Теги в таблице
Этот пример показывает, как элементы отображаются в различных элементах.

Отступ ячеек (Cell padding)
Этот пример показывает, как использовать Cell padding для создания отступа между содержимым ячейки и ее рамкой.

Интервал ячеек (Cell spacing)
Этот пример показывает, как использовать Cell spacing для увеличения расстояния между ячейками.

Связанные статьи

Урок HTML:HTML таблицы

Руководство по HTML DOM: Объект Td

HTML: <textarea> тег HTML: <tbody> тег