Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Справочник


HTML Теги



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;
}


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.