Атрибут scope | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки. По своему действию напоминает атрибут headers, но используется для простых таблиц. Атрибут предназначен для экранных ридеров вроде речевых браузеров, в обычных браузерах результат добавления scope никак не заметен.
Синтаксис
<th scope="col | colgroup | row | rowgroup">...</th>
Значения
- col
- Ячейка заголовка установлена для колонки.
- colgroup
- Ячейка заголовка установлена для группы колонок.
- row
- Ячейка заголовка задана для строки.
- rowgroup
- Ячейка заголовка установлена для группы строк.
Значение colgroup применяется в таблице, в которой используется тег <colgroup> или при объединении ячеек с помощью атрибута colspan. Значение rowgroup требуется при объединении ячеек через атрибут rowspan.
Значение по умолчанию
Нет.
Пример
HTML 4.01IECrOpSaFx
<!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, атрибут scope</title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th scope="col">Месяц</th>
<th scope="col">Заработано</th>
</tr>
<tr>
<td scope="row">1</td>
<td>Январь</td>
<td>152</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Февраль</td>
<td>176</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Март</td>
<td>244</td>
</tr>
</table>
</body>
</html>
Тег th
Пример
Простая 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 | Классифицирует ячейки заголовка |
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 с подписью.
Теги внутри таблицы
Отображение элементов внутри других элементов.
Cлоктя, которые охватывают более одной строки/столбца
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.
Похожие страницы
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 тег <th> используется для создания заголовочной ячейки в HTML таблице. Он размещается внутри парного тега <tr>, который, в свою очередь, находится в теге <table>.
Тег <th> может содержать изображения, текст, формы, ссылки и другие HTML элементы, которые можно поместить в тело документа. Размер таблицы корректируется автоматически на основе ее содержимого.
Содержимое тега <th> по умолчанию отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида содержимого можно использовать CSS стили.
Обратите внимание, что все строки таблицы содержат одинаковое количество ячеек, которое соответствует количеству ячеек самой длинной строки. Если в одной строке содержится меньше ячеек, чем в других строках, то браузер автоматически заполнит строку, помещая пустые ячейки в конец этой же строки.
Если вам необходимо подчеркнуть, что данные в других ячейках отсутствуют, создайте ячейку без содержимого в необходимом месте.
Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.
Синтаксис ¶
<table>
<tr>
<th>...</th>
</tr>
</table>
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Месяц</th>
<th>Дата</th>
</tr>
<tr>
<td>Июнь</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>
Попробуйте сами!Результат¶
В этом примере наши заголовки — «Месяц» и «Дата». Для каждого заголовка мы использовали отдельный тег <th>.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Месяц и дата </th>
</tr>
<tr>
<td>Июнь</td>
<td>18.07.2014</td>
</tr>
</table>
</body>
</html>
Попробуйте сами!Результат¶
В этом примере значение атрибута colspan равно «2». Это означает, что ячейка заголовка должна охватывать два столбца.
Атрибуты¶
Тег <th> поддерживает также глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <th> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <th>:
Цвет текста внутри тега <th>:
Стили форматирования текста для тега <th>:
Другие свойства для тега <th>:
Тег | bookhtml.

Тег <th> — элемент языка html, используемый для создания заголовка таблицы и размещается внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Пример написания:
<table>
<tr>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Атрибуты тега <th>
abbr………………..Краткое описание содержимого ячейки.
align……………….Определяет выравнивание содержимого ячейки по горизонтали.
axis. ……………….Группирует ячейки связанные между собой похожей информацией.
background……..Задает фоновый рисунок в ячейке.
bgcolor……………Цвет фона ячейки.
bordercolor……….Цвет рамки.
char………………..Выравнивает содержимое ячейки по заданному символу.
charoff……………Смещает содержимое ячейки относительно заданного символа.
colspan……………Объединяет горизонтальные ячейки.
headers…………..Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
height…………….Высота ячейки.
nowrap……………Запрещает перенос строк.
rowspan…………..Объединяет вертикальные ячейки.
scope………………Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign………………Выравнивание содержимого ячейки по вертикали.
width………………Ширина ячейки.
Закрывающий тег не обязателен.
Язык HTML — это круто.
| Справочник HTML
Элемент <th> (от англ. «table header» ‒ «заголовок таблицы») определяет заголовочную ячейку HTML таблицы. Элемент <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.
В HTML таблице может быть два вида ячеек:
- Заголовочная ячейка ‒ содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>). По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
- Стандартная ячейка ‒ содержит табличные данные (создается при помощи элемента <td>). По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.
Содержимым элемента <th> может являться любой HTML-элемент, который можно поместить в тело документа: текст, формы, изображения, таблицы.
Примечание: Все строки таблицы содержат одинаковое количество ячеек, которое равно количеству ячеек самой длинной строки. Если в строке оказывается меньше ячеек, чем в других строках, то браузер автоматически помещает пустые ячейки в конец строки, таким образом заполняя ее. Если требуется разместить пустую ячейку в начале или середине строки, нужно создать ячейку без содержимого в нужном месте.
Обратите внимание, что ячейки, которые браузер добавляет автоматически, не имеют рамки, поэтому, если такие ячейки располагаются друг за другом, то они будут отображаться в виде одной объединенной ячейки.
Синтаксис
<table>
...
<tr>
...
<th> ... </th>
...
</tr>
...
</table>
Закрывающий тег
Не обязателен.
Атрибуты
- abbrУстарел в HTML5
- Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста.
Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- alignУстарел в HTML5
- Указывает выравнивание содержимого ячейки по горизонтали:
left — выравнивание содержимого ячейки по левому краю
center — выравнивание по центру
right — выравнивание по правому краю
justify — выравнивание по ширине (одновременно по правому и левому краю)
char — выравнивание по указанному символу - axisУстарел в HTML5
- Группирует ячейки связанные между собой похожей информацией.
- backgroundУстарел в HTML5
- Задаёт фоновый рисунок в ячейке.
- bgcolorУстарел в HTML5
- Назначает цвет фона ячейки.
- bordercolorУстарел в HTML5
- Устанавливает цвет рамки.
- charУстарел в HTML5
- Выравнивает содержимое ячейки по заданному символу.
Пример: <td char=»c» align=»char»>...</td>
- charoffУстарел в HTML5
- Задает смещение содержимого ячейки относительно заданного символа.
- colspan
- Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.
- headers
- Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- heightУстарел в HTML5
- Устанавливает высоту ячейки данных.
- nowrapУстарел в HTML5
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- scopeУстарел в HTML5
- Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:
col — ячейка заголовка установлена для колонки
colgroup — ячейка заголовка установлена для группы колонок
row — ячейка заголовка задана для строки
rowgroup — ячейка заголовка установлена для группы строк - valignУстарел в HTML5
- Назначает выравнивание содержимого ячейки по вертикали:
top — выравнивание содержимого ячейки по верхнему краю строки
middle — выравнивание по середине
bottom — выравнивание по нижнему краю
baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии - sortedОтсутствует в HTML 5.
1
- Определяет направление сортировки столбца:
reversed — реверсивное направление сортировки столбца
number — указывает обычную последовательность столбцов
reversed number — указывает обратную последовательность столбцов
number reversed — указывает реверсивную последовательность столбцов - widthУстарел в HTML5
- Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <th> со следующими значениями CSS по умолчанию:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
Различия между HTML 4.01 и HTML5
В HTML 5 была прекращена поддержка 9 атрибутов и одного в 5.1.
Пример использования:
Пример HTML: Попробуй сам <table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
</table>
Спецификации
Поддержка браузерами
Элемент | ||||||
<th> | 3+ | 1+ | 3.![]() |
1+ | 1+ | 1+ |
Элемент | ||||
<th> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как добавить рамку вокруг таблицы:
Граница таблицы
Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы
Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы
Как изменить ширину таблицы:
Ширина таблицы
Как объединить столбцы таблицы:
Объединение столбцов
Как создать заголовок таблицы:
Заголовок таблицы
Как применять теги группирования элементов таблиц:
Теги группирования элементов таблиц
Учебник HTML
HTML уроки: HTML Табицы
HTML Элементы
HTML и CSS с примерами кода
Тег <th>
(от англ. table heading — заголовок таблицы) предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Элемент <th>
должен размещаться внутри контейнера <tr>
, который в свою очередь располагается внутри <table>
.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
</table>
Закрывающий тег не обязателен.
Атрибуты
colspan
- Объединяет горизонтальные ячейки.
headers
- Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
rowspan
- Объединяет вертикальные ячейки.
Также для этого элемента доступны универсальные атрибуты.
colspan
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Синтаксис
<th colspan="<число>">...</th>
Значения
Любое целое положительное число больше 1.
Значение по умолчанию
1
Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers
не заметен.
Для связывания ячеек между собой, ячейке в <th>
пишется атрибут id
, а в другой ячейке — атрибут headers
со значением, совпадающим со значением id
.
Синтаксис
<th>...</th>
<th headers="<идентификатор>">...</th>
Значения
Один или несколько идентификаторов, разделённых между собой пробелом.
Значение по умолчанию
Нет.
rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Синтаксис
<th rowspan="<число>">...</th>
Значения
Любое целое положительное число больше 1.
Значение по умолчанию
1
Значения ARIA role
role=columnheader
для заголовочной ячейки в столбцеrole=rowheader
для заголовочной ячейки в строке
Спецификации
Описание и примеры
<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>
Ссылки
- Тег
<th>
MDN (рус.)
HTML тег th | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 02.03.2009
Тег <th> (англ. table header — заголовок таблицы) — тег-контейнер, определяет ячейку-заголовок таблицы.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<table>
<tr>
<th> ... </th>
</tr>
</table>
Атрибуты
Основные Вспомогательные События
abbr | содержимое ячейки в сокращённой форме |
---|---|
align | выраванивание текста в строке
|
axis | список разделённых запятыми имён категорий ячейки |
background | URL фонового изображения для ячейки. В спецификации HTML 4.01 отсутствует |
bgcolor | цвет фона ячейки |
bordercolor | цвет рамки. В спецификации HTML 4.01 отсутствует |
bordercolordark | цвет правой и нижней частей рамки. В паре с bordercolorlight создает трехмерный эффект В спецификации HTML 4. ![]() |
bordercolorlight | цвет левой и верхней частей рамки. В паре с bordercolordark создает трехмерный эффект В спецификации HTML 4.01 отсутствует |
char | определяет символ по которому происходит выравнивание. Значением по умолчанию является символ десятичной точки |
charoff | определяет смещение первого в строке символа выравнивания |
colspan | число ячеек, объединяемых по горизонтали |
class | определяет имя используемого класса |
dir | определяет направление символов:
|
headers | список ячеек с заголовочной информацией для текущей ячейки данных |
height | высота ячейки Не рекомендуется, согласно спецификации HTML 4.01 |
id | уникальный индетификатор |
lang | определяет используемый язык |
nowrap | запрещает перенос слов в ячейке Не рекомендуется, согласно спецификации HTML 4.![]() |
onclick | щелчек на элементе |
ondblclick | двойной щелчек на элементе |
onkeydown | нажатие клавиши, когда элемент имеет фокус |
onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
onmousemove | движение указателя мыши, когда элемент имеет фокус |
onmouseout | смещение указателя мыши с элемента |
onmouseover | помещение указателя мыши на элемент |
onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
rowspan | число ячеек, объединяемых по вертикали |
scope | набор ячеек данных, для которых текущая заголовочная ячейка предоставляет заголовочную информацию
|
style | задает встроенную таблицу стилей |
title | добавляет всплывающую подсказку |
valign | вертикальное выраванивание в ячейке
|
width | ширина ячейки.![]() |
Пример
Задаем ширину и горизонтальное выравнивание:
<table>
<tr><th align="center">№ п/п</th><th align="center">Фамилия</th></tr>
<tr><td>1</td><td>Иванов</td></tr>
<tr><td>2</td><td>Петров</td></tr>
</table>
Объединение ячеек:
<table>
<tr>
<th>№ п/п</th><th>Род</th><th>Вид кактуса</th><th>количество в оранжерее, шт</th><th>заказано, шт</th>
</tr>
<tr>
<td>1</td><th rowspan="2">Gymnocalycium</th><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
<tr>
<td>1</td><td>Gymnocalycium hybopleurum</td><td>15</td><td>8</td>
</tr>
</table>
Рекомендации по использованию
- закрывающий тег рекомендован (</th>)
- располагается внутри тега <tr>
- тег <th> может содержать CDATA, строчные и блочные элементы
- большинство браузеров отображают содержимое тега <th> полужирным шрифтом с выравниванием по центру ячейки
- обязательных атрибутов нет
- не рекомендуем использовать атрибуты для оформления ячеек, вместо этого применяйте таблицы стилей
В HTML есть два типа ячеек:
- заголовочные — созданы с помощью тега <th>, текст в них полужирный, расположен по центру;
- обычные — созданы с помощью тега <td>, текст обычной жирности, выровнен под левый край.
Ячейки могут быть пустыми (не содержать данных). Некторые браузеры не отображают рамки пустых ячеек, чтобы это обойти впишите пробел ( ) в ячейку.
Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— table { border: 1px solid #000; /* оформляем границы таблицы */ border-collapse: collapse; /* убираем отступы между ячейками */ border-spacing: 0; margin-bottom: 18px; /* отступ между таблицами */ } td, th { border: 1px solid #000; /* оформляем границы ячеек */ } —> </style> </head> <body> <table> <tr><th align=»center»>№ п/п</th><th align=»center»>Фамилия</th></tr> <tr><td>1</td><td>Иванов</td></tr> <tr><td>2</td><td>Петров</td></tr> </table> <table> <tr> <th>№ п/п</th> <th>Род</th> <th>Вид кактуса</th> <th>количество в оранжерее, шт</th> <th>заказано, шт</th> </tr> <tr> <td>1</td> <td rowspan=»2″>Gymnocalycium</td> <td>Gymnocalycium hybopleurum</td> <td>15</td> <td>8</td> </tr> <tr> <td>2</td> <td>Gymnocalycium valnicekianum</td> <td>26</td> <td>6</td> </tr> <tr> <td>3</td> <td rowspan=»2″>Mammillaria</td> <td>Mammillaria discolor</td> <td>2</td> <td>0</td> </tr> <tr> <td>4</td> <td>Mammillaria johnstonii</td> <td>14</td> <td>4</td> </tr> </table> </body> </html> Сделай код и жми тутРезультат:
большой полигонHTML-тэг
Пример
Простая таблица HTML с тремя строками, двумя ячейками заголовка и четырьмя ячейками данных:
Месяц | Экономия |
---|---|
Январь | 100 |
февраль | 80 |
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег Таблица HTML имеет два типа ячеек: Текст в элементах Текст в элементах Тег Тег Как выровнять содержимое внутри <таблица> Как добавить цвет фона в ячейку заголовка таблицы (с помощью CSS): <таблица> Как установить высоту ячейки заголовка таблицы (с помощью CSS): <таблица> Как запретить перенос слов в ячейке заголовка таблицы (с помощью CSS): Как выровнять содержимое по вертикали внутри <таблица> Как установить ширину ячейки заголовка таблицы (с помощью CSS): <таблица> Как создавать заголовки таблиц: Как создать таблицу с подписью: <таблица> Как определить ячейки таблицы, охватывающие более одной строки или одного столбца: Учебное пособие по HTML: таблицы HTML Ссылка на HTML DOM: объект TableHeader Учебное пособие по CSS: таблицы стилей Большинство браузеров будут отображать элемент th { ❮ HTML-тег Укажите, что две ячейки заголовка являются заголовками для
столбцы: <таблица> Атрибут области Примечание: Атрибут Элемент HTML Этот элемент включает глобальные атрибуты. Значение по умолчанию, когда этот атрибут не указан, — Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте. Таблицы BCD загружаются только в браузере Если вы создали новую веб-страницу в HTML5, ваш тег В этом примере документа HTML5 мы создали таблицу с помощью тега Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег В этом HTML 4.01 Пример переходного документа, мы создали таблицу с помощью тега Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег В этом XHTML 1.0 Пример переходного документа, мы создали таблицу с помощью тега Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег В этом XHTML 1.0 Пример строгого документа, мы создали таблицу с помощью тега Если вы создали новую веб-страницу в XHTML 1.1, ваш тег В этом XHTML 1.1 Пример документа, мы создали таблицу с помощью тега Тег Тег В таблицах HTML данные расположены вертикально в столбцы. Если вы хотите отобразить первую строку таблицы в виде меток или заголовков, для содержимого первой строки таблицы вы должны использовать элементы Обратите внимание, что все строки в таблице имеют одинаковое количество ячеек, что эквивалентно количеству ячеек в самой длинной строке. Если в строке меньше ячеек, браузер автоматически заполнит строку, поместив в ее конец пустые ячейки. Если необходимо подчеркнуть, что в других ячейках нет данных, создайте ячейки без содержимого там, где это необходимо. Ячейки, добавленные браузером, не имеют границ, и если они идут одна за другой, они будут отображаться как одна интегрированная ячейка. Тег В этом примере нашими заголовками являются« Месяц »и« Дата », которые мы определяем с помощью тегов Атрибут colspan обычно используется с тегом В этом примере значение атрибута colspan равно« 2 ». Это означает, что ячейка заголовка должна охватывать два столбца. Тег Тег HTML Этот тег должен быть вложен в тег Также см. Тег <стиль> table, td, th {
граница: сплошной черный 1px;
} <таблица> Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить дополнительную информацию о том, как этот элемент должен выглядеть или вести себя. Элемент Возможные значения: Следующие ниже атрибуты являются стандартными для всех элементов HTML. Следовательно, вы можете использовать эти атрибуты с тегом Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5». Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием. Большинство атрибутов содержимого обработчика событий можно использовать для всех элементов HTML, но некоторые обработчики событий имеют определенные правила относительно того, когда их можно использовать и к каким элементам они применимы. Подробнее см. Атрибуты содержимого обработчика событий HTML. определяет ячейку заголовка в таблице HTML. элемент) ) по умолчанию выделен полужирным шрифтом и центрирован. по умолчанию обычный и выровнен по левому краю. Поддержка браузера
Элемент Есть Есть Есть Есть Есть Атрибуты
Атрибут Значение Описание abbr текст Задает сокращенную версию содержимого ячейки заголовка colspan номер Определяет количество столбцов, которые должна занимать ячейка заголовка. заголовки header_id Определяет одну или несколько ячеек заголовка, с которыми связана ячейка. пролет между рядами номер Определяет количество строк, которые должна занимать ячейка заголовка. область применения столб
colgroup
ряд
rowgroup Указывает, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк. Глобальные атрибуты
также поддерживает глобальные атрибуты в HTML. Атрибуты событий
также поддерживает атрибуты событий в HTML. Другие примеры
Пример
(с помощью CSS): Месяц Экономия январь 100 февраль 80 долларов Пример
Месяц Экономия январь 100 Пример
Месяц Экономия январь 100 Пример
Попробуй сам » Месяц Мои сбережения на новую машину Январь 100 Пример
(с помощью CSS): Месяц Экономия январь 100
Попробуй сам » Пример
Месяц Экономия январь 100
Попробуй сам » Пример
Попробуй сам » Имя Электронная почта Телефон Джон Доу джон. [email protected]
123-45-678 Пример
Месяц Экономия январь 100 февраль 80 долларов
Попробуй сам » Пример
Попробуй сам » Имя Электронная почта Телефон Джон Доу джон[email protected] 123-45-678 212-00-546 Связанные страницы
Настройки CSS по умолчанию
со следующими значениями по умолчанию:
display: таблица-ячейка;
вертикальное выравнивание: наследование;
font-weight: жирный;
выравнивание текста: центр;
} Атрибут области действия HTML
Пример
Месяц Экономия 1 Январь
г. 100 2 февраль
г. 80 Определение и использование
указывает, является ли ячейка заголовка заголовком для столбца, строки или группы столбцов или строк. scope
не имеет визуального эффекта в обычных веб-браузерах, но может быть
используется программами чтения с экрана. Поддержка браузера
Атрибут область применения Есть Есть Есть Есть Есть Синтаксис
Значения атрибутов
Значение Описание столб Указывает, что ячейка является заголовком столбца ряд Указывает, что ячейка является заголовком для строки colgroup Указывает, что ячейка является заголовком для группы столбцов группа строк Указывает, что ячейка является заголовком для группы строк
❮ HTML-тег — HTML: язык разметки гипертекста
определяет ячейку как заголовок группы ячеек таблицы. Точный характер этой группы определяется атрибутами
области
и заголовков
. Категории содержимого Нет. Разрешенное содержание Потоковое содержимое, но без потомков содержимого верхнего, нижнего колонтитула, секционирования или содержимого заголовка. Отсутствие тега Начальный тег является обязательным.
Конечный тег может быть опущен, если за ним сразу следует элемент или или если в его родительском элементе больше нет данных. Допущенные родители Элемент . Неявная роль ARIA заголовок столбца
или заголовок строки
Разрешенные роли ARIA Любая Интерфейс DOM HTMLTableCellElement
abbr
colspan
1
. Значения выше 1000 будут считаться неправильными и будут установлены на значение по умолчанию (1). , которые применяются к этому элементу. пролет между рядами
1
; если его значение установлено на 0
, оно продолжается до конца раздела таблицы ( ,
,
, даже если неявно определено), которому принадлежит ячейка.
Значения выше 65534 сокращаются до 65534.
объем
).Может иметь следующие значения: строка
: заголовок относится ко всем ячейкам строки, к которой он принадлежит. col
: заголовок относится ко всем ячейкам столбца, которому он принадлежит. группа строк
: заголовок принадлежит группе строк и относится ко всем ее ячейкам. Эти ячейки могут быть размещены справа или слева от заголовка, в зависимости от значения атрибута dir
в элементе .
colgroup
: заголовок принадлежит группе colgroup и относится ко всем ее ячейкам. row
, col
, rowgroup
или colgroup
, тогда браузеры автоматически выбирают набор ячеек, к которым применяется ячейка заголовка. Устаревшие атрибуты
выровнять
слева
: содержимое выравнивается по левому краю ячейки. центр
: содержимое центрируется в ячейке. справа
: содержимое выравнивается по правому краю ячейки. по ширине
(только с текстом): содержимое растягивается внутри ячейки так, чтобы покрывать всю ее ширину. char
(только с текстом): содержимое выравнивается по символу внутри элемента с минимальным смещением. Этот символ определяется атрибутами char
и charoff
. слева
. слева,
, по центру,
, справа,
или , выровняйте значения
по ширине, примените свойство CSS text-align
к элементу. char
, присвойте свойству text-align
то же значение, которое вы использовали бы для char
.Не реализовано в CSS3. ось
id
группы ячеек, к которой применяется этот заголовок. Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте: вместо этого используйте атрибут области действия
. bgcolor
Этот атрибут может использоваться с одной из шестнадцати предопределенных цветовых строк:
Примечание. черный
= «# 000000» зеленый
= «# 008000» серебро
= «# C0C0C0» лайм
= «# 00FF00» серый
= «# 808080» оливковый
= «# 808000» белый
= «#FFFFFF» желтый
= «# FFFF00» бордовый
= «# 800000» флот
= «# 000080» красный
= «# FF0000» синий
= «# 0000FF» фиолетовый
= «# 800080» бирюзовый
= «# 008080» фуксия
= «# FF00FF» аква
= «# 00FFFF» Не используйте этот атрибут, так как он нестандартен и реализован только в некоторых версиях Microsoft Internet Explorer: для элемента
следует использовать стили с использованием CSS.Чтобы создать аналогичный эффект, используйте вместо этого свойство background-color
в CSS. символ
align
не задано значение char
, этот атрибут игнорируется. Примечание: Не используйте этот атрибут, так как он устарел в последней версии стандарта. Чтобы добиться того же эффекта, вы можете указать символ в качестве первого значения свойства text-align
, Unimplemented in CSS3. чугун
Его значение определяет продолжительность этого сдвига.
высота
height
. валин
Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте: вместо этого используйте свойство базовая линия
: размещает текст рядом с нижней частью ячейки и выравнивает его по базовой линии символов, а не по нижней части. Если символы не опускаются ниже базовой линии, значение базовой линии дает тот же эффект, что и нижний . внизу
: размещает текст в нижней части ячейки. по центру
: центрирует текст в ячейке. вверху
: текст размещается в верхней части ячейки. vertical-align
CSS. ширина
cellspacing
и cellpadding
, а ширина элемента
также может создать дополнительную ширину.Но если ширина столбца слишком мала для правильного отображения конкретной ячейки, при отображении он будет расширяться. Примечание: Не используйте этот атрибут, так как он устарел в последнем стандарте: вместо этого используйте свойство CSS width
. HTML: tag
HTML5 Документ
может выглядеть так:
techonthenet.com
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные в столбце 1, строке 2
Данные в столбце 2, строке 2
Данные в столбце 3, строке 2
, который имеет 3 столбца и 2 строки.В строке 1 таблицы есть 3 ячейки заголовка, определенные с помощью тега
. В строке 2 таблицы используется тег для определения стандартных ячеек таблицы. HTML 4.01 Переходный документ
может выглядеть так:
01 Переходный пример от www.techonthenet.com
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные в столбце 1, строке 2
Данные в столбце 2, строке 2
Данные в столбце 3, строке 2
, который имеет 3 столбца и 2 строки. В строке 1 таблицы есть 3 ячейки заголовка, определенные с помощью тега
. В строке 2 таблицы используется тег для определения стандартных ячеек таблицы. Переходный документ XHTML 1.0
может выглядеть так:
w3.org/1999/xhtml">
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные в столбце 1, строке 2
Данные в столбце 2, строке 2
Данные в столбце 3, строке 2
, который имеет 3 столбца и 2 строки. В строке 1 таблицы есть 3 ячейки заголовка, определенные с помощью тега
. В строке 2 таблицы используется тег для определения стандартных ячеек таблицы. Строгий документ XHTML 1.0
может выглядеть так:
0 Strict // EN" "http: // www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные в столбце 1, строке 2
Данные в столбце 2, строке 2
Данные в столбце 3, строке 2
, который имеет 3 столбца и 2 строки. В строке 1 таблицы есть 3 ячейки заголовка, определенные с помощью тега
. В строке 2 таблицы используется тег для определения стандартных ячеек таблицы. XHTML 1.1, документ
может выглядеть так:
1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
Заголовок столбца 1
Заголовок столбца 2
Заголовок столбца 3
Данные в столбце 1, строке 2
Данные в столбце 2, строке 2
Данные в столбце 3, строке 2
, который имеет 3 столбца и 2 строки. В строке 1 таблицы есть 3 ячейки заголовка, определенные с помощью тега
Попробуйте сами ». В строке 2 таблицы используется тег для определения стандартных ячеек таблицы. HTML th Tag — Изучение HTML
определяет ячейку заголовка в таблице HTML. Он должен использоваться как дочерний элемент , который, в свою очередь, объявлен в теге . Для определения стандартной ячейки данных используется тег
. может содержать текст, изображение, форму, ссылки или любой другой элемент HTML, который может использоваться в теле документа HTML. Размер таблицы автоматически регулируется в зависимости от размера ее содержимого. вместо элементов . По умолчанию содержимое тега выделено жирным шрифтом и центрировано.Чтобы изменить его внешний вид, вы можете использовать стили CSS. Заголовки таблиц также могут быть легко стилизованы независимо от остального содержимого таблицы благодаря этому элементу. Синтаксис¶
используется парами. Контент записывается между открывающим ( ) и закрывающим ( ) тегами.
<таблица>
...
Пример тега HTML
: ¶
Месяц
Дата
июнь
18.07.2018
Результат¶
для каждого из них. Оба тега мы помещаем в . , чтобы содержимое могло охватывать несколько столбцов. Давайте посмотрим на это в действии. Пример HTML-тега
с атрибутом colspan: ¶
Попробуйте сами »
Месяц и дата
июн
18.07.2014
Атрибуты¶
также поддерживает глобальные атрибуты и атрибуты событий. Как оформить тег
? Общие свойства для изменения визуального веса / акцента / размера текста в теге
: Цвет текста в теге
: Стили макета текста для тега
: Другие свойства, на которые стоит обратить внимание для тега
: HTML-тег
используется для указания ячейки заголовка (или заголовка таблицы) в таблице. , который, в свою очередь, также должен быть вложен правильно.Вы можете узнать больше, просмотрев спецификации тегов .
для объявления табличных данных. Ячейка заголовка Ячейка заголовка Ячейка 1 Ячейка 2 Атрибуты
принимает следующие атрибуты. Атрибут Описание colspan
Задает количество столбцов, через которые проходит текущая ячейка. rowspan
Задает количество строк, через которые проходит текущая ячейка. заголовки
Задает список разделенных пробелами ячеек заголовков, содержащих информацию об этой ячейке.Значение должно соответствовать идентификатору ячейки заголовка (который устанавливается с помощью атрибута id
). Этот атрибут полезен для невизуальных браузеров. область действия
Этот атрибут используется в ячейках заголовка и указывает ячейки, которые будут использовать информацию этого заголовка. строка
(текущая строка) столбец
(текущий столбец) группа строк
(текущая группа строк) colgroup
(текущая группа столбцов) abbr
Задает альтернативную метку для ячейки заголовка.Например, это может быть сокращенная форма ячейки полного заголовка, расширение или другая формулировка. Глобальные атрибуты
, а также со всеми другими тегами HTML. ключ доступа
автокапитализировать
класс
контентный
данные- *
директор
перетаскиваемый
скрыто
id
режим ввода
это
идентификатор товара
itemprop
itemref
поз. Сфера действия
тип позиции
язык
часть
слот
проверка орфографии
стиль
tabindex
название
перевести
Обработчики событий
onabort
onauxclick
onblur
отмена
oncanplay
oncanplaythrough
на замену
onclick
вкл.
контекстное меню
Копия
на смену
нарезка
ondblclick
онтраг
ондрагенд
ондрагентер
ондрагэксит
ондраглев
вперед
ondragstart
капля
на срок замены
пусто
завершено
ошибка
onfocus
onformdata
на входе
недействительно
нажатие клавиши
нажатие клавиши
onkeyup
onlanguagechange
под нагрузкой
загруженные данные
загруженные метаданные
при загрузке
onmousedown
onmouseenter
onmouseleave
onmousemove
на мышке
над мышью
onmouseup
паста
на паузу
в игре
на ходу
в процессе
на скорость изменения
возобновлено
по размеру
прокрутка
нарушение политики безопасности
востребовано
в поиске
при выборе
на смену
установлен
onsubmit
приостановлено
ontimeupdate
рычаг
в объёме поменять
ожидает
на колесе
HTML | th Tag — GeeksforGeeks
<
html
>
<
head
>
<
> название тег
title
>
<
style
>
body {
text-align: center;
}
h2 {
цвет: зеленый;
}
th {
цвет: синий;
}
стол, корпус, тд {
граница: 1 пиксель сплошной черный;
граница-обрушение: обрушение;
}
стиль
>
головка
>
<
корпус
6 >
9000
<
центр
>
<
h2
> GeeksforGeeks
h2
>
<
h3
> th Tag
h3
>
<
table
>
<
thead
>
<
tr
>
95 900 29
<
th
> Имя
th
>
<
th
> Идентификатор пользователя
th
>
tr
>
thead
>
<
tbody
>
<
tr
>
<
td
> Shashank
td
>
<
td
> @shashankla
td
>
85
tr
>
<
tr
>
<
td
> GeeksforGeeks
td
>
<
td
> @geeks
td
>
tr
>
кузов
>
таблица
>
центр
>
корпус
>
html
>