[Статья] 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