Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег td | назначение, синтаксис, атрибуты, примеры

Тег td

Последнее обновление: 23.01.2011

Тег <td> (англ. table data — данные таблицы) — тег-контейнер, задает ячейку таблицы.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<table>
<tr>
<td> ... </td>
</tr>
</table>

Атрибуты



abbr содержимое ячейки в сокращённой форме
align выраванивание текста в строке

  • left — по левому краю (по умолчанию)
  • center — по центру
  • right — по правому краю
  • justify — по ширине
axis список разделённых запятыми имён категорий ячейки
background URL фонового изображения для ячейки. В спецификации HTML 4.01 отсутствует
bgcolor цвет фона ячейки
bordercolor цвет рамки. В спецификации HTML 4.01 отсутствует
bordercolordark цвет правой и нижней частей рамки. В паре с bordercolorlight создает трехмерный эффект
В спецификации HTML 4.01 отсутствует
bordercolorlight цвет левой и верхней частей рамки. В паре с bordercolordark создает трехмерный эффект
В спецификации HTML 4.01 отсутствует
char определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки
charoff определяет смещение первого в строке символа выравнивания
colspan число ячеек, объединяемых по горизонтали
class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
headers список ячеек с заголовочной информацией для текущей ячейки данных
height высота ячейки Не рекомендуется, согласно спецификации HTML 4.01
id уникальный идентификатор
lang определяет используемый язык
nowrap запрещает перенос слов в ячейке.
Не рекомендуется в спецификации HTML 4.01!
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
rowspan число ячеек, объединяемых по вертикали
scope набор ячеек данных, для которых текущая заголовочная ячейка предоставляет заголовочную информацию

  • row — для оставшейся части строки
  • col — для оставшейся части столбца
  • rowgroup — для оставшейся части группы строк
  • colgroup — для оставшейся части группы столбцов
style задает встроенную таблицу стилей
title добавляет всплывающую подсказку
valign вертикальное выраванивание в ячейке

  • baseline — по базовой линии
  • bottom — по нижнему краю
  • middle — по центру (по умолчанию)
  • top — по верхнему краю
width ширина ячейки. Не рекомендуется, согласно спецификации HTML 4.01

Пример

Задаем ширину и горизонтальное выравнивание:


<table width="300px">
<tr><th width="30%" align="center">№ п/п</th><th align="center">Фамилия</th></tr>
<tr><td width="30%">1</td><td>Иванов</td></tr>
<tr><td width="30%">2</td><td>Петров</td></tr>
</table>

Объединение ячеек:


<table>
<tr>
<th>№ п/п</th><th>Род</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th>
</tr>
<tr>
<td>1</td><td rowspan="2">Gymnocalycium</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
<tr>
<td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
</table>

Рекомендации по использованию

В HTML есть два типа ячеек:

  • заголовочные — созданы с помощью тега <th>, многие браузеры по умолчанию отображают текст в них полужирный, расположен по центру;
  • обычные — созданы с помощью тега <td>,по умолчанию текст обычной жирности, выровнен влево.

Тег <td> определяет стандартную ячейку таблицы.

Ячейки могут быть пустыми (не содержать данных). Некторые браузеры не отображают рамки пустых ячеек, чтобы это обойти впишите пробел (&nbsp;) в ячейку.

Твой код:

Результат: