CSS модель таблиц

Slyweb

Поиск CSS свойств и HTML элементов:

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

[Статья] CSS модель таблиц

Раздел "Таблицы в CSS"

Модель таблицы, согласно спецификации CSS2 строится исходя из того, что заголовок таблицы (TH) является необязательным элементом таблицы, обязательными элементами являются строки (TR) и столбцы (TD). При этом существует возможность группировки, как столбцов, так и строк. Группировка предназначена для выделения специфичных данных расположенных на одном уровне.

Описание

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

Таблица;
Заголовок таблицы;
Строки;
Группы строк;
Столбцы;
Группы столбцов;
Ячейки.

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

  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

Группировка строк и столбцов с использованием элемента 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 свойства:

border (рамка элемента применятся, если свойство border-collapse установлено как collapse для таблицы);
background (фон элемента, если свойство background у строки (tr) не соответствует transparent, то фон элемента tr имеет больший приоритет, чем фон элемента col);
width (минимальная ширина элемента);
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

Возможно, Вам будет интересно прочитать статьи о jQuery:

Форма для комментариев

Версия справочника CSS 1.0 Справочник CSS создан 2010-12-01

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.	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 }

Подробный справочник CSS и HTML

Элемент COL

Возможно, Вам будет интересно прочитать статьи о jQuery: