Вы здесь

Осваиваем таблицы

Итак, вы думаете, что знаете, как создать 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 понятия не имеет о заголовках и нижних колонтитулах таблицы, и хотя он вполне корректно отображает их, но они не будут держаться вверху и внизу каждой страницы.

Будьте осторожны с прокручивающимися таблицами. Хотя они очень удобны, но многие пользователи не будут их полноценно использовать, полагая, что выведенные первыми данные и есть все данные таблицы.