Примеры таблиц
Табличные дескрипторы:
- < 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, распространеная на два столбца |
|
http://www.jwy.narod.ru/web/html_express/32_table_exmpl.html
