Русский
Русский
English
Свойства CSS
Статистика
Реклама

caption-side

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию top
Наследуется Да
Применяется К <caption> или ко всем элементам, у которых значение display установлено как table-caption.
Ссылка на спецификацию открыть в новой вкладке
Описание
Определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.
Синтаксис
caption-side: top | bottom
Аргументы
top - Располагает заголовок по верхнему краю таблицы.
bottom - Заголовок располагается под таблицей.
right - Заголовок размещается справа от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
left - Заголовок размещается слева от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
Пример

<!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-side</title>
<style type="text/css">
table {
width: 100%; /*Ширина таблицы*/
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.captionSide
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru