Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table> <tr> <th>...</th> </tr> </table>
Атрибуты
- abbr
- Краткое описание содержимого ячейки.
- align
- Определяет выравнивание содержимого ячейки по горизонтали.
- axis
- Группирует ячейки связанные между собой похожей информацией.
- background
- Задает фоновый рисунок в ячейке.
- bgcolor
- Цвет фона ячейки.
- bordercolor
- Цвет рамки.
- char
- Выравнивает содержимое ячейки по заданному символу.
- charoff
- Смещает содержимое ячейки относительно заданного символа.
- colspan
- Объединяет горизонтальные ячейки.
- headers
- Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
- height
- Высота ячейки.
- nowrap
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- scope
- Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
- valign
- Выравнивание содержимого ячейки по вертикали.
- width
- Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Пример
HTML 4.01IECrOpSaFx 6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег TH</title> <style type="text/css"> table { border-collapse: collapse; /* Отображать двойные линии как одинарные */ } th { background: #ccc; /* Цвет фона */ text-align: left; /* Выравнивание по левому краю */ } td, th { border: 1px solid #800; /* Параметры границы */ padding: 4px; /* Поля в ячейках */ } </style> </head> <body> <table cellspacing="0" border="1"> <tr> <th>Браузер</th> <th colspan="3">Internet Explorer</th> <th colspan="3">Opera</th> <th colspan="2">Firefox</th> </tr> <tr> <th>Версия</th> <td>5.5</td> <td>6.0</td> <td>7.0</td> <td>7.0</td> <td>8.0</td> <td>9.0</td> <td>1.0</td> <td>2.0</td> </tr> <tr> <th>Поддерживается</th> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> </table> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид ячеек, оформленных с помощью стилей
Таблицы
- Колонки таблицы
- Объемная таблица
- Простая таблица
- Сетка таблицы
- Таблица без рамки
- Таблица с рамкой
- Таблицы и стили
- Теги для таблиц
Тег th
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮Назад Полный HTML Ссылки Дальше ❯
Пример
Простая HTML-таблица с двумя ячейками заголовка и двумя ячейками данных:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Подробнее примеры ниже.
Определение и использование
Тег <th> определяет ячейку заголовка в таблице HTML.
Таблица HTML имеет два типа ячеек:
- Header cells — содержит сведения о заголовке (созданные с помощью <th> элемент)
- Standard cells — содержит данные (созданные с помощью <td> элемента)
Текст в <th> элементах выделен полужирным шрифтом и по умолчанию по центру.
Текст в элементах <td> является обычным и выровнен по левому краю по умолчанию.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<th> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Используйте атрибут COLSPAN и RowSpan, чтобы позволить содержимому охватывать несколько столбцов или строк!
Различия между HTML 4,01 и HTML5
Все атрибуты макета удаляются в HTML5.
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
abbr | text | Задает сокращенную версию содержимого в ячейке заголовка |
align | left right center justify char | Не поддерживается в HTML5. Выравнивание содержимого в ячейке заголовка |
axis | category_name | Не поддерживается в HTML5. Классифицирует ячейки заголовка |
bgcolor | rgb(x,x,x) #xxxxxx colorname | Не поддерживается в HTML5. Задает цвет фона ячейки заголовка |
char | character | Не поддерживается в HTML5. Выравнивание содержимого в ячейке заголовка по символу |
charoff | number | Не поддерживается в HTML5. Задает количество символов, которое будет выровнено по отношению к символу, указанному атрибутом char |
colspan | number | Указывает количество столбцов, которые должна охватывать ячейка заголовка |
headers | header_id | Указывает одну или несколько ячеек заголовка, связанных с ячейкой |
height | pixels % | Не поддерживается в HTML5.![]() Задает высоту ячейки заголовка |
nowrap | nowrap | Не поддерживается в HTML5. Указывает, что содержимое внутри ячейки заголовка не должно обтекать |
rowspan | number | Указывает количество строк, которые должны охватываться ячейкой заголовка |
scope | col colgroup row rowgroup | Указывает, является ли ячейка заголовка столбцом, строкой или группой столбцов или строк |
sorted | reversed number reversed number number reversed | Определяет направление сортировки столбца |
valign | top middle bottom baseline | Не поддерживается в HTML5. Вертикальное выравнивание содержимого в ячейке заголовка |
width | pixels % | Не поддерживается в HTML5. Задает ширину ячейки заголовка |
Глобальные атрибуты
Тег <th> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <th> также поддерживает Атрибуты событий в HTML.
Попробуйте примеры
Заголовки таблиц
Создание заголовков таблиц.
Таблица с подписью
Таблица HTML с подписью.
Теги внутри таблицы
Отображение элементов внутри других элементов.
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.
Похожие страницы
HTML Учебник: HTML Tables
HTML DOM Ссылки: TableHeader Object
CSS Учебник: Styling Tables
Параметры CSS по умолчанию
Большинство браузеров будут отображать <th> элемент со следующими значениями по умолчанию:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
❮Назад Полный HTML Ссылки Дальше ❯
Популярное
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
HTML-тег
❮ Назад Полный справочник HTML Далее ❯
Пример
Простая HTML-таблица с тремя строками, двумя ячейками заголовка и четырьмя ячейками данных:
Месяц | Экономия |
---|---|
Январь | 100 долларов США |
Февраль | $80 |
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Тег
определяет ячейку заголовка в таблице HTML.
HTML-таблица имеет два типа ячеек:
- Ячейки заголовков — содержат информацию заголовка (созданную с помощью
- Ячейки данных — содержат данные (созданы с помощью элемента)
Текст в элементах
выделен жирным шрифтом и центрирован по умолчанию.
Текст в элементах по умолчанию обычный и выровнен по левому краю.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<й> | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
сокращенный | текст | Указывает сокращенную версию содержимого в ячейке заголовка |
столбец | номер | Указывает количество столбцов, которые должна охватывать ячейка заголовка |
коллекторы | заголовок_id | Указывает одну или несколько ячеек заголовка, с которыми связана ячейка |
междурядья | номер | Указывает количество строк, которые должна охватывать ячейка заголовка |
прицел | col colgroup row rowgroup | Указывает, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк |
Глобальные атрибуты
9Тег 0033 также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Как выровнять содержимое внутри (с помощью CSS):
Месяц | Экономия |
---|---|
Январь | 100 долларов США |
Февраль | 80$ |
Попробуйте сами »
Пример
Как добавить фоновый цвет в ячейку заголовка таблицы (с CSS):
<таблица>
Месяц
Сбережения
Январь
100$
Попробуйте сами »
Пример
Как установить высоту ячейки заголовка таблицы (с помощью CSS):
Месяц | Экономия |
---|---|
Январь | 100 долларов США |
Попробуйте сами »
Пример
Как запретить перенос слов в ячейке заголовка таблицы (с помощью CSS):
Месяц | Мои сбережения на новую машину |
---|---|
Январь | 100 долларов |
Попробуйте сами »
Пример
Как вертикально выровнять содержимое внутри (с помощью CSS):
<таблица>
Месяц
Экономия
Январь
100$
Попробуйте сами »
Пример
Как установить ширину таблицы ячейка заголовка (с CSS):
<число
>Экономия
Месяц | |
---|---|
Январь | 100$ |
Попробуйте сами »
Пример
Как создать заголовки таблиц:
Имя< /th> | Электронная почта | Телефон |
---|---|---|
Джон Доу | john.![]() | 123-45-678 |
Попробуйте сами »
Пример
Как создать таблицу с заголовком:
Месяц | Экономия |
---|---|
Январь | 100 долларов |
Февраль | 80$ |
Попробуйте сами »
Пример
Как определить ячейки таблицы, которые охватывают более одной строки или один столбец:
Имя | Электронная почта | Телефон | |
---|---|---|---|
Джон Доу | john.doe@example.com | 123-45-678 | 212-00-546 |
Попробуйте сами »
Связанные страницы
Учебник по HTML: Таблицы HTML
Справочник по HTML DOM: Объект TableHeader 9 0003
Учебное пособие по CSS: Таблицы стилей
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент
со следующими значениями по умолчанию:
th {
display: table-cell;
вертикальное выравнивание: наследовать;
вес шрифта: полужирный;
выравнивание текста: по центру;
}
❮ Предыдущий
Полный справочник HTML
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3.
CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
903 54 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
900 28 ФОРУМ |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
HTML th rowspan Атрибут
❮ Тег HTML
Пример
HTML-таблица с ячейкой заголовка, занимающей три строки:
Mon й
Экономия Экономия на праздник! Январь 100$ Февраль 80$
Попробовать это Сам »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Атрибут rowspan
определяет количество строк, которые должна охватывать ячейка заголовка.
Поддержка браузера
Атрибут междурядья Да Да Да Да Да
Синтаксис
Значения атрибутов
Значение Описание номер Задает количество строк, которые должна охватывать ячейка заголовка.
Примечание. rowspan="0" сообщает браузеру, что ячейка должна охватывать последнюю строку раздела таблицы (thead, tbody или tfoot)
Дополнительные примеры
Пример
Использование rowspan="0" (работает в Chrome, Firefox и Opera):
Месяц Экономия Экономия на отпуск! Январь 100 долларов США 100 долларов США Февраль $80
Попробуйте сами »
❮ Тег HTML
900 04 ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3 Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.