Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
caption-side

Значения свойства caption-side

top Заголовок таблицы находится над таблицей.
bottom Заголовок таблицы находится под таблицей.
left Заголовок таблицы находится слева от таблицы.
right Заголовок таблицы находится справа от таблицы.

Выравниванием заголовок таблицы

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Выравниванием заголовок таблицы(caption)</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue; background:rgb(000,000,000);color:white;}
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.CAPTION { caption-side: bottom }
11.COLGROUP {visibility:collapse;}
12.</STYLE>
13.</HEAD>
14.<BODY>
15.<TABLE>
16.<CAPTION>Выравниванием заголовок таблицы(caption) по низу таблицы</CAPTION>
17.<COLGROUP span="2" id="redborder"></COLGROUP>
18.<TR id="row1">
19. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
20.<TR id="row2">
21. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
22.<TR id="row3">
23. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
24.</TABLE>
25.
26.
27.</BODY>
28.</HTML>
Выравниванием заголовок таблицы(caption)
Выравниванием заголовок таблицы(caption)
Для левой и правой стороны размещения заголовка страницы не рекомендуется использовать свойство width со значением auto, так как браузер в этом случае может выбрать самый узкий размер ширины для заголовка таблицы.

Для горизонтального выравнивания в элементе caption используется свойство text-align, а для вертикального свойство vertical-align.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство vertical-align: для таблицы</TITLE>
  5.<STYLE type="text/css">
  6.TABLE {
  7.border-collapse: collapse;
  8.height:300px;width:300px;
  9.border: 1px solid black;
10.vertical-align:baseline;}
11.TR#row1 { border: 3px solid blue; }
12.TR#row2 { border: 1px solid black }
13.TR#row3 { border: 1px solid black }
14.CAPTION { caption-side: bottom }
15.</STYLE>
16.</HEAD>
17.<BODY>
18.<TABLE>
19.<CAPTION>Свойство vertical-align: для таблицы</CAPTION>
20.<COLGROUP span="2" id="redborder"></COLGROUP>
21.<TR id="row1">
22. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
23.<TR id="row2">
24. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
25.<TR id="row3">
26. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
27.</TABLE>
28.
29.
30.</BODY>
31.</HTML>
32.
Свойство vertical-align: для таблицы
Свойство vertical-align: для таблицы

Дополнительный пример выравнивания заголовка таблицы:

  1.CAPTION { caption-side: bottom;
  2. width: auto;
  3. text-align: left }
  4.
  5.

Заголовок будет размещен снизу таблицы, а текст выровнен по левому краю ячейки.

Нижеуказанный пример выравнивает таблицы по центру, что достигается благодаря свойствам margin-left(rigth):auto, а заголовок будет размещен слева от таблицы с внешним отступом.

  1.BODY {
  2. margin-left: 8em
  3.}
  4.TABLE {
  5. margin-left: auto;
  6. margin-right: auto
  7.}
  8.CAPTION {
  9. caption-side: left;
10. margin-left: -8em;
11. width: 8em;
12. text-align: right;
13. vertical-align: bottom
14.}


Доступ и установка с jQuery

  • Получить свойство captionSide: val = $("div").css("captionSide");
  • Установить свойство captionSide: $("div").css({"captionSide":"..."});
  • Установить свойство captionSide: $("div").css("captionSide","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org