<<Темы
Урок 8. Табличная верстка
Элемент caption
Позволяет создавать заголовки таблицы. По умолчанию заголовки
центрируются и размещаются либо над, либо под таблицей. Заголовок может
состоять из любого текста и изображений. Текст будет разбит на строки,
соответствующие ширине таблицы. Иногда тэг используется для подписи под
рисунком. Для этого достаточно описать таблицу без границ. У этого тэга
есть один необязательный атрибут:
align
- служит для указания размецения заголовка относительно таблицы, возможные значения - top
(вверху, над таблицей) и bottom
(внизу, под таблицей)
<caption align=top>Таблица №1</caption>
<caption align=bottom>Таблица №2</caption>
Элементы thead, tfoot и tbody
Логическое разделение основных частей таблицы. Судя по названиям, можно легко догадаться, что
thead
- это заголовок таблицы, то есть верхняя строка ячеек;
tfoot
- нижняя строка ячеек;
tbody
- собственно сама таблица. Элементы поддерживают стандартные атрибуты:
align
- горизонтальное выравнивание в ячейках строки (значения
left
,
right
,
center
,
justify
)
valign
- вертикальное выравнивание содержимого строки (значения
top
,
middle
,
bottom
)
bgcolor
- цвет фона строки
background
- фоновый рисунок
<table border=1>
<caption>Таблица</caption>
<thead><th>столбец 1</th><th>столбец 2</th></thead>
<tfoot><td>столбец 1</td><td>столбец 2</td></tfoot>
<tbody>
<tr><td>ячейка 1</td><td>ячейка 2</td></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
</tbody>
</table>
Таблица
столбец 1 | столбец 2 |
столбец 1 | столбец 2 |
ячейка 1 | ячейка 2 |
ячейка 3 | ячейка 4 |
Элементы colgroup и col
Это довольно редко используемые элементы. Однако они полезны,
когда необходимо задать визуальные свойства столбцов таблицы, чтобы не
прописывать одно и то же для каждой ячейки столбца по отдельности.
Элементы colgroup
должны следовать сразу после caption
. Если этого элемента нет, тогда после table
. Элемент colgroup
используется для группировки col
и позволяет устанавливать свойства по умолчанию для всех вложенных в
него столбцов. Количество сгруппированных столбцов указывается
атрибутом span
, значением которого является целое число. Свойства каждого из столбцов задаются атрибутами тегов col
. Столбцы описываются слева направо. Первый col
задает свойства крайнего левого столбца таблицы и т. д.
<colgroup>
<col span=3 width=100> //для первых трех колонок ширина 100
<col span=2 width=75> //для следующих двух колонок ширина 75
</colgroup>