... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 

 
Яндекс.Метрика
 
 

caption-side

 

 

 

Браузер 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
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS2
Значение по умолчанию top
Наследуется Да
Применяется К <CAPTION> или ко всем элементам, у которых display: table-caption.
Аналог HTML <caption align="top | bottom">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side

Описание

Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.

Синтаксис

caption-side: top | bottom

Аргументы

top
Располагает заголовок по верхнему краю таблицы.
bottom
Заголовок располагается под таблицей.
right
Заголовок размещается справа от таблицы. Это значение работает только в браузерах Firefox и Mozilla.
left
Заголовок размещается слева от таблицы. Это значение работает только в браузерах Firefox и Mozilla.

Пример

Валидный CSS
Валидный HTML
<!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>Расположение заголовка</title>
<style type="text/css">
table {
width: 350px; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойную рамку между ячейками */
}
td {
border: 1px solid green; /* Параметры границы */
padding: 5px; /* Поля в ячейке */
}
caption {
caption-side: bottom; /* Заголовок под таблицей */
}
</style>
</head>
<body>
<table>
<caption>Расклад карт</caption>
<tr>
<td>&nbsp;</td> <td>&spades;</td> <td>&clubs;</td> <td>&hearts;</td> <td>&diams;</td>
</tr>
<tr>
<td>Чебурашка</td> <td>6</td> <td>3</td> <td>1</td> <td>3</td>
</tr>
<tr>
<td>Крокодил Гена </td> <td>1</td> <td>5</td> <td>5</td> <td>2</td>
</tr>
<tr>
<td>Шапокляк</td> <td>3</td> <td>4</td> <td>6</td> <td>0</td>
</tr>
<tr>
<td>Крыса Лариса </td> <td>3</td> <td>1</td> <td>1</td> <td>8</td>
</tr>
</table>
</body>
</html>

Показать пример выполнения кода

Объектная модель

[window.]document.getElementById("elementID").style.bottom

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены