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

Тег th

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

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

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис


<table>
<tr>
<th> ... </th>
</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><th rowspan="2">Gymnocalycium</th><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>

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

  • закрывающий тег рекомендован (</th>)
  • располагается внутри тега <tr>
  • тег <th> может содержать CDATA, строчные и блочные элементы
  • большинство браузеров отображают содержимое тега <th> полужирным шрифтом с выравниванием по центру ячейки
  • обязательных атрибутов нет
  • не рекомендуем использовать атрибуты для оформления ячеек, вместо этого применяйте таблицы стилей

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

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

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

Твой код:

Результат: