Примеры таблиц
Табличные дескрипторы:
-
< table > — раздел описания таблицы;
-
< caption > — задание названия таблицы;
-
< th > — заголовочные ячейки;
-
< tr > — строка таблицы, содержащая ячейки;
-
< td > — ячейка таблицы;
-
< col > — описание столбцов;
-
< colgroup > — описание групп столбцов;
-
< tbody > — описание групп строк таблицы;
-
< tfoot > — строка ячеек, содержащая итоги по столбцам;
-
< thead > — группа заголовочных строк таблицы.
Простые примеры
Для создания таблицы необходимо три дескриптора: < table > , < tr > и < td >. Ниже приведен пример такой таблицы.
| Первая ячейка |
Вторая ячейка |
| Третья ячейка |
Четвертая ячейка |
Использование заголовка таблицы < caption > и заголовков столбцов < th >.
Заголовок таблицы, определенный дескриптором <caption>
| Заголовочные ячейки, |
определенные дескриптором |
<th> |
| ячейки, |
определенные дескрипторами |
<td> |
| которые группируются |
в строки дескрипторами |
<tr> |
Рамки, поля, отступы
Рассмотрим результат использования атрибутов border, cellspacing и cellpadding:
| border="10" | cellspacing="10" |
cellpadding="10" |
border="10" cellspacing="10" cellpadding="10" |
|
|
|
|
|
Раскрасим таблицу
Фон ячейки задается с помощью атрибута bgcolor:
| Использование bgcolor в дескрипторе <table> |
Использование bgcolor в дескрипторе <tr> |
Использование bgcolor в дескрипторе <td> |
Использование bgcolor в дескрипторе <tbody> |
|
|
|
|
|
Цвет границы определяется атрибутом bordercolor:
| Использование bordercolor в дескрипторе <table> |
Использование bordercolor в дескрипторе <tr> |
Использование bordercolor в дескрипторе <td> |
Использование bordercolor в дескрипторе <tbody> |
|
|
|
|
|
Эффект выпуклой рамки создается атрибутами bordercolorlight и bordercolordark:
| Использование bordercolorlight в дескрипторе <table> |
Использование bordercolorlight в дескрипторе <tr> |
Использование bordercolorlight
и bordercolordark в дескрипторе <td> |
Использование bordercolorlight
и bordercolordark в дескрипторе <table> |
|
|
|
|
|
Структурирование таблицы
Для структурирования таблицы используются дескрипторы col, colgroup, tbody, tfoot и thead.
Между прочим, для проведения линий внутри таблицы используется атрибут rules. Сейчас его значение groups.
| 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | 32 | 33 | 34 | 35 | 36 |
| 37 | 38 | 39 | 40 | 41 | 42 |
| 43 | 44 | 45 | 46 | 47 | 48 |
| 49 | 50 | 51 | 52 | 53 | 54 |
Очень интересно: дескриптор <colgroup> в каком-то смысле похож на дескриптор <br>. В смысле разбивки таблицы на блоки.
Между прочим, задание align="right" в дескрипторе <table> действительно задает не только положение таблицы справа, но и обтекание текста. Два в одном: и float и align!
Для того, чтобы это безобразие прекратилось, используется <br> с атрибутом clear.
А чтобы оно и не начиналось, выравнивать надо не таблицу, а объемлющий ее элемент <div>.
Таблицы и каскадные стили
С помощью таблиц каскадных стилей (CSS) можно управлять толщиной и видом рамки вокруг каждой ячейки.
ЗАМЕЧАНИЕ. Цвет фона с помощью таблиц каскадных стилей задается параметром background-color, в отличие от HTML, где используется атрибут bgcolor.
| solid |
double |
dashed |
| groove |
ridge |
dotted |
| inset |
outset |
↑groove
← outset ♦ ridge →
inset ↓ |
А вот то же самое, только покрупнее:
| solid |
double |
dashed |
| groove |
ridge |
dotted |
| inset |
outset |
ВСЕ |
Заметим, что в CSS есть и такое:
{border-сторона: width style color;}
Объединения ячеек таблицы
С помощью атрибутов rowspan и colspan можно объединить несколько ячеек в одну.
| Пример объединения ячеек |
А вот так делать не надо |
| 1 | 2 | 3 | 4 |
| 5 |
6 |
7 |
| 8 |
| 9 |
10 |
| 11 |
12 | 13 |
|
| Ячейка 1 |
Ячейка 2 |
Ячейка 3,
распространенная
на три строчки
|
| Ячейка 4 |
Ячейка 5 |
| Ячейка 6 |
Ячейка 7, распространеная на два столбца |
|
