2.9. Таблицы

Базовые элементы для создания таблицы: table, tr и td.

<table>...</table> - элемент создания таблицы

Атрибуты

Базовые (id, class, style, title)

border="число"

cellpadding="число пикселей или %"

се11sрасing="число пикселей или %"

frame="void|above|below|hsides|lhs|rhs|vsides|box|border"

rules="all|cols|groups|none|rows"

summary="текст"

width="число, процент"

Устаревшие атрибуты

align

bgcolor

Нестандартные атрибуты

height = “число, процент"

<tr>...</tr> - строка таблицы

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

Устаревшие атрибуты

bgcolor

<td>...</td> - ячейка таблицы

Атрибуты

Базовые (id, class, style, title)

аbbr="текст"

align="left|center|right|justify|char"

axis="текст"

char="символ"

charoff="длина"

colspan="число"

headers="ccылки на id"

rowspan="число"

scope="row|col|rowgroup|colgroup"

valign="top|middle|bottom|baseline"

Устаревшие атрибуты

bgcolor

height

nowrap

width

Описательные элементы

<th>...</th> - ячейки заголовка

Атрибуты такие же, как и у элемента td

<caption>...</caption> - заглавие

Атрибуты базовые (id, class, style, title)

Устаревшие атрибуты

align="top|bottom|left|right"

Элемент caption должен идти сразу после открывающего тега элемента table, перед всеми остальными элементами таблицы.

Группы строк

В HTML и XHTML определяются элементы для обозначения групп строк, которые позволяют разделить строки на верх таблицы (thead), низ таблицы (tfoot) и тело таблицы (tbody).

<thead>...</thead> - заголовок (верх) таблицы

<tbody>...</tbody> - тело таблицы

<tfoot>...</tfoot> - низ таблицы

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

Консорциум W3C включил элементы для группировки строк в Рекомендацию HTML 4.0, как способ создания более осмысленных маркеров и увеличения гибкости при использовании свойств таблиц стилей.

W3C рекомендует, чтобы элемент tfoot (если он присутствует) находился в разметке перед элементом tbody, чтобы нижнюю часть можно было вывести на экран перед загрузкой всех строк данных (которых может быть много). Например:

<table> <thead> <tr><th>ФИО</th><th>ЗП</th><th>Дата</th></tr> </thead>

<tfoot>

<tr><td colspan="3">Гл. Бухгалтер </td></tr>

</tfoot>

<tbody>

<tr><td>Иванов И.И.</td> <td>10200</td> <td>10.03.2009</td> </tr> <tr>... еще ячейки данных...</tr> <tr>... еще ячейки данных...</tr>

</tbody>

</table>

Столбцы и группы столбцов

<col /> – столбец

<colgroup>...</colgroup> – группа столбцов

Атрибуты

Базовые (id, class, style, title)

align="left|center|right|justify|char"

char="символ"

charoff="длина"

valign="top|middle|bottom|baseline"

span="число"

У элемента colgroup есть также атрибут

width="пикceлы, проценты, n*"

Элемент col используется для маркировки отдельного столбца (или нескольких столбцов, при использовании атрибута span) или для применения к нему значений атрибутов без реальной группировки столбцов, структурной или логической. Пустой элемент col используется только для применения атрибутов или стилей к столбцам, к которым он относится.

Элемент colgroup формирует логическую группу столбцов. Число столбцов в группе указывается атрибутом span или общим числом элементов col в группе (и их значениями span).

Элементы colgroup и/или элементы col должны располагаться перед всеми элементами-строками или группами строк. Они помещаются либо сразу после начального тега table, либо сразу после элемента caption, если он присутствует. В данном примере к разметке предыдущего примера была добавлена информация о группах столбцов.

<table>

<colgroup id="employinfо">

<col span="2" width="100" />

<col span="l" width="50" class="date" />

</colgroup> …..

Данный элемент colgroup обозначает три столбца, входящие в одну структурную группу. (В таблице может быть несколько групп столбцов, но здесь для простоты используется только одна). В элементе colgroup первый элемент col определяет два столбца (span="2"), каждый шириной 100 пикселей. Оставшийся элемент col имеет ширину 50 пикселей. Если бы все столбцы таблицы должны были иметь одинаковую ширину, то эту ширину можно было бы указать в элементе colgroup. Третий столбец обозначается атрибутом class, на который позже можно сослаться в свойстве стиля (например, background).