Итак, вы думаете, что знаете, как создать HTML таблицу. Наверняка вам знакомы теги <table>, <tr>, <td> и <th>. Наверное вы даже можете создавать более сложные таблицы при помощи атрибутов rowspan и colspan. Тогда вы действительно кое-что умеете. А хотелось бы вам уметь еще больше? Тогда продолжим.
Столбцы наносят ответный удар
Строки таблицы незаметно задвигают столбцы на задний план. Они делают всю работу, ведь таблица строится строка к строке, оставляя столбцы без внимания.
К счастью положение спасают тег <colgroup> и тег <col>.
Эти теги позволяют по своему желанию определять стиль столбцов таблицы, что особенно полезно в тех случаях, когда необходимо задать особое выравнивание или цвет какому-нибудь столбцу. Без этой возможности пришлось бы определять стиль каждой строки в отдельности.
Вот пример использования этих тегов:
<table>
<colgroup>
<col />
<col class="alternate" />
<col />
</colgroup>
<tr>
<td>Это</td>
<td>То</td>
<td>Другое</td>
</tr>
<tr>
<td>Птичка</td>
<td>Крокодил</td>
<td>Завтрак</td>
</tr>
</table>
Стили класса "alternate" будут применяться ко второму столбцу или ко второй ячейке каждой строки.
В тегах <colgroup> и <col> можно также использовать атрибут span, который работает так же как rowspan и colspan. Использование этого атрибута в теге <colgroup> будет определять количество строк, к которым будет относиться эта группа, например, <colgroup span="2"></colgroup> сгруппирует первые два столбца. При использовании этого атрибута с тегом <colgroup> тег <col> не используется.
Использование атрибута span в теге <col> более целесообразно. Например, в коде предыдущего примера его можно применить следующим образом:
<table>
<colgroup>
<col />
<col span="2" class="alternate" />
</colgroup>
...
В результате класс "alternate" будет применен к последним двум столбцам.
Да, но здесь должна быть какая-нибудь особенность, не так ли? Конечно есть. И вот она: К столбцам применимы только следующие стили – border, background, width и visibility.
Описание и заглавие
Из соображения доступности всегда стоит определять описание и заглавие таблицы.
Описание таблицы определяется при помощи атрибута summary, который задается в открывающем теге <table>. Описание не отображается браузером, однако помогает в невизуальном представлении таблицы.
Тег <caption>, место которого сразу же после открывающего тега <table>, определяет заглавие таблицы. По умолчанию заглавие отображается над таблицей, однако при помощи CSS свойства caption-side может принимать положение top, right, bottom или left, хотя IE обо всем этом не имеет никакого понятия.
<table summary="Брачные привычки цикад, демонстрирующие особенности по сравнению с саранчой">
<caption>Брачные особенности цикад</caption>
...
Заголовки, нижние колонтитулы и прокрутка таблиц
Тег <thead>, тег <tfoot> и тег <tbody> позволяют разделять таблицу на заголовок, нижний колонтитул и тело. Это особенно полезно, когда таблицы имеют очень большой размер и когда (например, при распечатывании на принтере) необходимо, чтобы заголовок и нижний колонтитул появлялись на каждой странице.
Эти элементы должны определятся в следующем порядке: <thead> – <tfoot> – <tbody>.
<table>
<thead>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Нижний колонтитул 1</td>
<td>Нижний колонтитул 2</td>
<td>Нижний колонтитул 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
...
</tbody>
</table>
Определив стиль "overflow: auto; max-height: [любое значение];", можно сделать элемент <tbody> прокручиваемым в браузерах Mozilla. При этом заголовок и нижний колонтитул будут оставаться на месте, а справа от тела таблицы появится полоса прокрутки. Свойство max-height используется из-за того, что IE не распознает его, и поэтому оно безопаснее свойства height, которое IE присвоит каждой строке.
Возвращаясь к различиям браузеров, стоит сказать, что IE понятия не имеет о заголовках и нижних колонтитулах таблицы, и хотя он вполне корректно отображает их, но они не будут держаться вверху и внизу каждой страницы.
Будьте осторожны с прокручивающимися таблицами. Хотя они очень удобны, но многие пользователи не будут их полноценно использовать, полагая, что выведенные первыми данные и есть все данные таблицы.
