Тег <th>
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
поддержка браузерами:
IExplorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
спецификация:
HTML: | 3.2 | 4.01 | 5.0 |
XHTML: | 1.0 | 1.1 |
синтаксис:
<table>
<tr>
<th>...</th>
</tr>
</table>
атрибуты:
abbr - Атрибут abbr предназначен для краткого описания содержимого ячеек.
align - Задает выравнивание содержимого ячейки по горизонтали.
axis - Позволяет группировать колонки или строки связанные между собой близкой информацией.
background - Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы.
bgcolor - Устанавливает цвет фона ячейки.
bordercolor - Устанавливает цвет рамки вокруг ячейки.
char - Атрибут char позволяет выравнить содержимое ячейки по заданному символу.
charoff - Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа.
colspan - Устанавливает число ячеек, которые должны быть объединены по горизонтали.
headers - Позволяет связать ячейки таблицы с заголовками.
height - Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого.
nowrap - Добавление атрибута nowrap к тегу <th> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой.
rowspan - Устанавливает число ячеек, которые должны быть объединены по вертикали.
scope - Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки.
valign - Устанавливает вертикальное выравнивание содержимого ячейки.
width - Задает ширину ячейки.
align - Задает выравнивание содержимого ячейки по горизонтали.
axis - Позволяет группировать колонки или строки связанные между собой близкой информацией.
background - Определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы.
bgcolor - Устанавливает цвет фона ячейки.
bordercolor - Устанавливает цвет рамки вокруг ячейки.
char - Атрибут char позволяет выравнить содержимое ячейки по заданному символу.
charoff - Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа.
colspan - Устанавливает число ячеек, которые должны быть объединены по горизонтали.
headers - Позволяет связать ячейки таблицы с заголовками.
height - Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого.
nowrap - Добавление атрибута nowrap к тегу <th> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой.
rowspan - Устанавливает число ячеек, которые должны быть объединены по вертикали.
scope - Атрибут scope связывает между собой ячейки с заголовком и обычные ячейки.
valign - Устанавливает вертикальное выравнивание содержимого ячейки.
width - Задает ширину ячейки.
закрывающий тег:
Не обязателен
пример кода:
<!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 width="100%" 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>