HTML <th> тег

  • Предыдущая страница <tfoot>
  • Следующая страница <thead>

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

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

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

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

По умолчанию:<th> Текст в элементе жирный и выравнен по центру.

По умолчанию, текст в элементе <td> является обычным и выравненным по левому краю.

См. также:

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

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

Урок CSS:Настройка стиля формы

Пример

Пример 1

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

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 2

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

<table style="width:100%">
  <tr>
    <th style="text-align:left">Месяц</th>
    <th style="text-align:left">Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 3

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

<table>
  <tr>
    <th style="background-color:#FF0000">Месяц</th>
    <th style="background-color:#00FF00">Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
 </table>

Попробуйте сами

Пример 4

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

<table>
  <tr>
    <th style="height:100px">Месяц</th>
    <th style="height:100px">Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

Попробуйте сами

Пример 5

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

<table>
  <tr>
    <th>Месяц</th>
    <th style="white-space:nowrap">Деньги на новый автомобиль</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

Попробуйте сами

Пример 6

Как выровнять по вертикали <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>￥3400</td>
  </tr>
</table>

Попробуйте сами

Пример 7

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

<table style="width:100%">
  <tr>
    <th style="width:70%">Месяц</th>
    <th style="width:30%">Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
</table>

Попробуйте сами

Пример 8

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

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th>Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Попробуйте сами

Пример 9

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

<table>
  <caption>Сбережения每个月</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>￥4500</td>
  </tr>
</table>

Попробуйте сами

Пример 10

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

<table>
  <tr>
    <th>Имя</th>
    <th>Электронная почта</th>
    <th colspan="2">Телефон</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Попробуйте сами

Атрибут

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

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

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

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

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

Стандартные настройки CSS

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <tfoot>
  • Следующая страница <thead>