Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


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>

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

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

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

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

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


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

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

Атрибуты <th>

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

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

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


События атрибутов <th>

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


Еще примеры <th>

Пример

Как выровнить содержимое внутри <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>
Попробуйте сами »

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

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

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

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


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

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

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