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



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

Модель таблицы в CSS2 складывается из следующих составляющих:

  1. Таблица;
  2. Заголовок таблицы;
  3. Строки;
  4. Группы строк;
  5. Столбцы;
  6. Группы столбцов;
  7. Ячейки.

Пример группировки строк и столбцов:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Пример группировки столбцов</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue }
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.CAPTION { caption-side: top }
11.COLGROUP#redborder {border: 5px solid red }
12.</STYLE>
13.</HEAD>
14.<BODY>
15.<TABLE>
16.<CAPTION>Группировка столбцов</CAPTION>
17.<COLGROUP></COLGROUP><COLGROUP></COLGROUP>
18.<COLGROUP id="redborder"></COLGROUP>
19.<TR id="row1">
20. <TH>Заголовок 1<TD>Первая ячейка<TD>Вторая ячейка
21.<TR id="row2">
22. <TH>Заголовок 2<TD>Третья ячейка<TD>Четвертая ячейка
23.<TR id="row3">
24. <TH>Заголовок 2<TD>пятая ячейка<TD>Шестая ячейка
25.</TABLE>
26.</BODY>
27.</HTML>
28.
Пример группировки столбцов
Пример группировки столбцов
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Группировка столбцов с объединением</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue }
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.CAPTION { caption-side: top }
11.COLGROUP#redborder {border: 5px solid red }
12.</STYLE>
13.</HEAD>
14.<BODY>
15.<TABLE>
16.<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>
29.
Группировка столбцов с объединением
Группировка столбцов с объединением
Группировка строк и столбцов с использованием элемента TBODY
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Элемент TBODY</TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue }
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.CAPTION { caption-side: top }
11.COLGROUP#redborder {border: 5px solid red }
12.TBODY.first {border: 5px solid red }
13.</STYLE>
14.</HEAD>
15.<BODY>
16.<TABLE>
17.<CAPTION>TBODY объединён красной рамкой</CAPTION>
18.
19.<COLGROUP></COLGROUP><COLGROUP></COLGROUP>
20.<COLGROUP id="redborder"></COLGROUP>
21.<TBODY class="first">
22.<TR id="row1">
23. <TH>Заголовок 1<TH>Заголовок 2<TH>Заголовок 3
24.<TR id="row1">
25. <TD>Первая ячейка<TD>Вторая ячейка<TD>Третья ячейка
26.<TR id="row2">
27. <TD>Четвертая ячейка<TD>Пятая ячейка<TD>Шестая ячейка
28.<TR id="row3">
29. <TD>Седьмая ячейка<TD>Восьмая ячейка<TD>Девятая ячейка
30.</TBODY>
31.</TABLE>
32.</BODY>
33.</HTML>
34.
Элемент TBODY
Элемент TBODY
Группировка строк и столбцов с использованием элемента TFOOT
  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Подвал таблицы - TFOOT </TITLE>
  5.<STYLE type="text/css">
  6.TABLE { border-collapse: collapse }
  7.TR#row1 { border-top: 3px solid blue }
  8.TR#row2 { border-top: 1px solid black }
  9.TR#row3 { border-top: 1px solid black }
10.CAPTION { caption-side: top }
11.TFOOT.first {border: 5px solid red }
12.</STYLE>
13.</HEAD>
14.<BODY>
15.<TABLE>
16.
17.<CAPTION>Подвал таблицы</CAPTION>
18.
19.
20.<TR id="row1">
21. <TH>Заголовок 1<TH>Заголовок 2<TH>Заголовок 3
22.<TR id="row1">
23. <TD>Первая ячейка<TD>Вторая ячейка<TD>Третья ячейка
24.<TR id="row2">
25. <TD>Четвертая ячейка<TD>Пятая ячейка<TD>Шестая ячейка
26.<TFOOT class="first">
27. <TR id="row3">
28. <TD>Седьмая ячейка<TD>Восьмая ячейка<TD>Девятая ячейка
29.</TFOOT>
30.</TABLE>
31.
32.
33.</BODY>
34.</HTML>
35.
Подвал таблицы
Подвал таблицы

Спецификация CSS2 позволяет, с помощью свойства display, создавать из не предопределенных элементов (как правило, это элементы XML) элементы таблицы. Для этого в свойстве display необходимо указать следующие значения:

table (В HTML: TABLE) Задёт тип элемента как блочный, элемент рассматривается в качестве таблицы: блок принимает форму прямоугольника.
inline-table (В HTML: TABLE) Задёт тип элемента как строчный, элемент рассматривается в качестве таблицы.
table-row (В HTML: TR) Элемент рассматривается как строка таблицы, содержащая ячейки.
table-row-group (В HTML: TBODY) Элемент рассматривается как группы строк.
table-header-group (In HTML: THEAD) Подобно 'table-row-group', но данная группа строк будет находиться выше строк, сгруппированных значением table-row-group, но ниже заголовка таблицы. При печати, сгруппированные нижние строки могут повторяться на каждой странице.
table-footer-group (In HTML: TFOOT) Подобно 'table-row-group', но данная группа строк будет находиться ниже строк, сгруппированных значением table-row-group, но выше нижнего заголовка таблицы. При печати, сгруппированные нижние строки могут повторяться на каждой странице.
table-column (In HTML: COL) Элемент определяется как столбец таблицы.
table-column-group (In HTML: COLGROUP) Элемент рассматривается как сгруппированные столбцы.
table-cell (В HTML: TD, TH) Элемент рассматривается как ячейка таблицы.
table-caption (In HTML: CAPTION) Элемент – заголовок таблицы.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Создаём из нет абличных элементов таблицу</TITLE>
  5.<STYLE type="text/css">
  6.div#table { display:table;border:2px solid grey;}
  7.#row1 { display:table-row;}
  8.#row1 div {display:table-cell;border:2px solid grey;}
  9.</STYLE>
10.</HEAD>
11.<BODY>
12.<div id="table">
13.
14.<div id="row1">
15. <div>Ячейка 1</div><div>Ячейка 2</div><div>Ячейка 3</div>
16.</div>
17.<div id="row1">
18. <div>Ячейка 1</div><div>Ячейка 2</div><div>Ячейка 3</div>
19.</div>
20.
21.</BODY>
22.</HTML>
23.
Создаём из не табличных элементов таблицу
Создаём из не табличных элементов таблицу

По умолчанию элементы таблицы имеют следующие свойства:

  1.TABLE { display: table }
  2.TR { display: table-row }
  3.THEAD { display: table-header-group }
  4.TBODY { display: table-row-group }
  5.TFOOT { display: table-footer-group }
  6.COL { display: table-column }
  7.COLGROUP { display: table-column-group }
  8.TD, TH { display: table-cell }
  9.CAPTION { display: table-caption }

В CSS2 существует достаточно сложный механизм создания предопределенных элементов из не предопределенных элементов. Например, если в качестве строки берется элемент P и в качестве ячейки элемент T, но для элемента P не указано свойство «table-row», то автоматически будет создан анонимный объект между элементом P и элементом T со свойством «table-row». В общем, спецификация CSS2 не одобряет использование данного механизма, а требует точного указания типов элементов.

Элемент COL

К элементам col допустимо применять 4 свойства:

  1. border (рамка элемента применятся, если свойство border-collapse установлено как collapse для таблицы);
  2. background (фон элемента, если свойство background у строки (tr) не соответствует transparent, то фон элемента tr имеет больший приоритет, чем фон элемента col);
  3. width (минимальная ширина элемента);
  4. visibility (видимость элемента, единственное значение для элементов colgroup и col- collpase).

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


Александр Ермаков. Хостинг - www.pwstudio.org