caption-side | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Вторник, 06.12.2016
Главная » Справочник CSS3 » Свойства таблицы


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


caption-side | Свойство CSS

Свойство caption-side устанавливает положение заголовка таблицы.




Свойство caption-side устанавливает положение заголовка таблицы.При этом имеется в виду расположение заголовка находящегося в таблице внутри тега <caption>.Свойство применимо ко всем элементам находящимся внутри тега <caption>,а так же к элементам у которых значение display прописано как table-caption,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные значения caption-side


Значение
Описание
topЗаголовок таблицы распологается вне таблицы,в верхней части
bottomЗаголовок таблицы распологается вне таблицы,в нижней части
leftЗаголовок таблицы распологается вне таблицы,с лева ( на момент создания статьи поддерживалось не всеми браузерами )
rightЗаголовок таблицы распологается вне таблицы,с права ( на момент создания статьи поддерживалось не всеми браузерами )
inheritНаследует значения от родителя

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство caption-side</title>
<style type="text/css">
<!--
caption.top {
caption-side:top;
padding-bottom:10px;
font-size:20px;
text-decoration:blink;
}
caption.bottom {
caption-side:bottom;
padding-top:10px;
font-size:20px;
text-decoration:blink;
}
table {
border-collapse:separate;
border-spacing:20px 10px;
width:400px;
color:white;
background:#252525;
}
td {
border:5px double red;
color:white;
background:blue;
text-align:center;
font-size:20px;
}
-->
</style>
</head>
<body>
<table>
<caption class="top">Устанавливаем заголовок в верхней части</caption>
<tr>
<td>&clubs;</td>
<td>&spades;</td>
<td>&hearts;</td>
<td>&diams;</td>
</tr>
</table>
<br>
<table>
<caption class="bottom">Устанавливаем заголовок в нижней части</caption>
<tr>
<td>&clubs;</td>
<td>&spades;</td>
<td>&hearts;</td>
<td>&diams;</td>
</tr>
</table>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side
Категория: Свойства таблицы | Добавил: IZOTOP (16.05.2012) | Автор: Меренков Михаил E W
Просмотров: 523 | Теги: css, свойство, caption-side, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]