САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

HTML Тег <th>


Пример

Простая HTML таблица с тремя строками, двумя ячейками заголовка и четырьмя ячейками данных:

<table>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »

Определение и использование

Тег <th> определяет ячейку заголовка в HTML таблице.

HTML таблица имеет два вида ячеек:

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

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

Текст в элементах <td> по умолчанию являются регулярными и выровненными по левому краю.


Поддержка браузеров

Элемент
<th> Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
abbr text Определяет сокращенную версию содержимого в ячейке заголовка
colspan number Указывает количество столбцов, которые должна охватывать ячейка заголовка
headers header_id Указывает одну или несколько ячеек заголовка, с которыми связана ячейка
rowspan number Указывает количество строк, которые должна занимать ячейка заголовка
scope col
colgroup
row
rowgroup
Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк

Глобальные атрибуты

Тег <th> также поддерживает Глобальные атрибуты в HTML.


События атрибутов

Тег <th> также поддерживает События атрибутов в HTML.



Еще примеры

Пример

Как выровнить содержимое внутри <th> (с помощью CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Месяц</th>
    <th style="text-align:left">Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как добавить цвет фона в ячейку заголовка таблицы (с помощью CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Месяц</th>
    <th style="background-color:#00FF00">Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
 </table>
Попробуйте сами »

Пример

Как установить высоту ячейки заголовка таблицы (с помощью CSS):

<table>
  <tr>
    <th style="height:100px">Месяц</th>
    <th style="height:100px">Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как указать отсутствие переноса слов в ячейке заголовка таблицы (с помощью CSS):

<table>
  <tr>
    <th>Месяц</th>
    <th style="white-space:nowrap">Мои сбережения на новую машину</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как выровнить содержимое по вертикали внутри <th> (с помощью CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Месяц</th>
    <th style="vertical-align:bottom">Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как установить ширину ячейки заголовка таблицы (с помощью CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Месяц</th>
    <th style="width:30%">Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как создать заголовки таблиц:

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Андрей Щипунов</td>
    <td>and-shhipunov@example.com</td>
    <td>123-45-678</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как создать таблицу с подписью:

<table>
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$80</td>
  </tr>
</table>
Попробуйте сами »

Пример

Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:

<table>
  <tr>
    <th>Имя</th>
    <th>Email</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Андрей Щипунов</td>
    <td>and-shhipunov@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>
Попробуйте сами »

Связанные страницы

HTML Учебник: HTML Таблицы

HTML DOM Справочник: Объект TableHeader

CSS Учебник: Стили таблиц


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <th> со следующими значениями по умолчанию:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}