Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Тег CAPTION

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Тег <CAPTION> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <TABLE>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Синтаксис

<table>
 <caption>Текст</caption>
...
</table>

Параметры

align
Определяет выравнивание заголовка по горизонтали.
valign
Устанавливает расположение заголовка до или после таблицы.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <CAPTION>

Валидный код<!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=windows-1251">
<title>Тег CAPTION</title>
</head>
<body>

<table width="100%" border="1" cellspacing="0" cellpadding="4">
<caption>
Таблица 3.2. Демонстрация катаболических процессов организма
</caption>

<tr>
<th>&nbsp;</th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr>
<td>Съел, кг</td>
<td>5</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>Выпил, л</td>
<td>6</td>
<td>8</td>
<td>2</td>
</tr>
<tr>
<td>Смог, раз</td>
<td>5</td>
<td>5</td>
<td>1</td>
</tr>
</table>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Вид заголовка таблицы в браузере Opera

Описание параметров тега <CAPTION>

Параметр ALIGN

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.

Синтаксис

<caption align="left | center | right | top | bottom">...</caption>

Аргументы

left
В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
right
В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
center
Заголовок располагается сверху таблицы по ее центру.
top
Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom
Заголовок размещается внизу таблицы по ее центру.

Значение по умолчанию

center — для браузера Internet Explorer; top — для других браузеров.

Аналог CSS

text-align

Пример 2. Выравнивание заголовка

Валидный код<!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=windows-1251">
<title>Тег CAPTION, параметр align</title>
</head>
<body>

<table width="100%" border="1" cellspacing="1" cellpadding="4">
<caption align="bottom">
Пример таблицы
</caption>
<tr>
<th>#</th>
<th>Чебурашка</th>
<th>Крокодил Гена</th>
<th>Шапокляк</th>
</tr>
<tr>
<td>1</td>
<td>FXD</td>
<td>URN</td>
<td>LWK</td>
</tr>
</table>
</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Размещение заголовка под таблицей

Параметр VALIGN

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр valign предназначен для размещения заголовка до таблицы или после нее. Этот параметр работает только в браузере Internet Explorer, а для всех остальных применяется align. Тем не менее, параметр align корректно действует и для IE, поэтому сочетание параметров align и valign необходимо только для этого браузера, когда требуется одновременное выравнивание заголовка по вертикали и горизонтали.

Синтаксис

<caption valign="bottom | top">...</caption>

Аргументы

bottom
Заголовок размещается под таблицей.
top
Заголовок размещается перед таблицей.

Значение по умолчанию

top

Пример 3. Заголовок внизу таблицы

Валидный код<!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=windows-1251">
<title>Тег CAPTION, параметр valign</title>
</head>
<body>
<table width="60%" border="1" cellspacing="1" cellpadding="4">
<caption align="right" valign="bottom">
Пример таблицы
</caption>
<tr><td>...</td></tr>
</table>
</body>
</html>




На главную









При использовании материалов сайта ссылка на comnew.ru обязательна!

x