Пятница, 17.05.2024, 09:26
Главная Регистрация RSS поиск
Приветствую Вас, Гость
Меню сайта
Категории раздела
HTML [44]
Visual C++ и MFC [21]
c++ [78]
php [19]
Javascript [15]
C# [51]
загрузки [0]
XNA [10]
создание игр с помощью xna
Наш опрос
Каким языком программирования вы увлекаетесь
Всего ответов: 2420
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » Статьи » HTML

5.2 Группы строк и столбцов
Урок №5: Таблицы (часть 1)

В данном разделе речь пойдет о нескольких новых элементах, позволяющих логически обьединять ячейки таблицы в столбцы и группы столбцов,а строки в группы строк. Для чего это может быть необходимо? Выполняя ряд предыдущих примеров, вы наверняка задумывались: "а это действительно так нужно - задавать выравнивание, ширину и прочие атрибуты для каждой ячейки столбца?". Нет ли такого механизма, который позволил бы упростить задачи форматирования данных таблиц?

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

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

Столбцы и группы столбцов создаются в таблицах с помощью элементов двух типов:

  • <col /> - объединяет ячейки в столбец
  • <colgroup>...</colgroup> - объединяет столбцы в группу.

Элементы <col /> и <colgroup> указываются в начале таблицы перед элементами <tbody>, <thead> или <tfoot> (см. ниже).

Элемент <col /> поддерживает следующие специальные атрибуты:

  •  align="left|right|center|justify" - выравнивание данных в ячейках столбца
  •  valign="top|middle|bottom" - вертикальное выравнивание данных
  •  width="ширина" - указывает ширину ячеек столбца

Помимо этого поддерживаются все общие стрибуты. Элемент <col /> пустой и не может содержать вложенных элементов. Может использоваться внутри элементов <table> и <colgroup>.

Элемент <colgroup> позволяет объединить несколько столбцов в группу. Это может понадобиться в том случае, когда несколько столбцоы имеют какие то одинаковые черты форматирования: выравнивание, фоновый цвет, ширину и пр. Тогда, общие признаки можно вынести в элемент <colgroup>, а во вложенных в него элементах <col /> перечислить толлько индивидуальные признаки отдельных столбцов.

Элемент <colgroup> поддерживает следующие специальные атрибуты:

  •  span="N" - колич ество объединяемых в группу столбцов
  •  align="left|right|center|justify" - выравнивание данных в ячейках столбца
  •  valign="top|middle|bottom" - вертикальное выравнивание данных
  •  width="ширина" - указывает ширину ячеек столбца.

Наибольший интерес представляет атрибут  span, позволяющий указать количество объединяемых столбцов. Казалось бы, это совершенно бесполезное занятие. Зачем указывать количество столбцов? Браузер же может его определить по количеству вложенных элементов <col />. Однако на деле все немного иначе. Элемент <colgroup> не обязательно должен содержать вложенные элементы <col />. Ведь столбец - понятие "виртуальное", абстрактное. Физически его не существует. Это просто совокупность ячеек, расположенных на одном и том же месте в каждой строке таблицы. Таким образом, приходим к выводу, что <colgroup> может объединять не только реальные, но и виртуальные столбцы! :)

Пример:

Листинг №5.2.1: Столбцы и группы столбцов
<table border="1" cellspacing="0" cellpadding="2">
 <!-- Группа из 4х столбцов -->
 <colgroup span="4" width="250" align="center"
  style="background-color: #ddeeff;">
 <col width="100" align="left" />
 <col /> <!-- пропускаем столбец. -->
 <col width="100" align="right" style="background-color: #ddffee;" />
 <col /> <!-- пропускаем столбец. -->
 </colgroup>
 <!-- Этот столбец в группу не входит -->
 <col width="120" align="center" style="color:red;" />
 <tbody>
 <tr>
 <th>Заголовок</th>
 <th>Заголовок</th>
 <th>Заголовок</th>
 <th>Заголовок</th>
 <th>Заголовок</th>
 </tr>
 <tr>
 <td>Данные</td>
 <td>Данные</td>
 <td>Данные</td>
 <td>Данные</td>
 <td>Данные</td>
 </tr>
 ...

В приведенном примере создается сначала группа из 4х столбцов. Их свойства по умолчанию:

  • цвет фона  style="background-color: #ddeeff;",
  • ширина ячеек  width="250",
  • горизонтальное выравнивание  align="center".

Внутри группы размещается 4 элемента <col />. Некоторые из них применяют индивидуальное форматирование конкретного столбца, остальные (те, что без атрибутов) используются просто для пропуска столбца. Пропущенные столбцы используют форматирование, определенное для всей группы. Далее, за пределами группы расположен еще один столбец со своими индивидуальными параметрами.

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

Группы строк

В общем случае, строки таблицы можно логически разбить на три группы:

  • строки, составляющие "шапку" или строки заголовка таблицы,
  • строки итоговой части таблицы,
  • остальные строки, составляющие содержимое, тело таблицы

Для логического выделения этих групп строк используют элементы

  • <thead>
  • <tfoot>
  • <tbody>

соответственно для заголовка, итоговой части и тела. Причем, элемент <tbody> может встречаться в таблице многократно.

При использовании элементов <thead> и <tfoot>, их следует размещать перед первым из элементов <tbody> в начале таблицы. Это позволит браузеру отобразить шапку и итоги до того, как будут загружены все данные ячеек таблицы. Относительно порядка отображения не стоит беспокоиться: браузеры размещают содержимое элемента <thead> в начале таблицы, а содержимое элемента <tfoot> в самом конце таблицы, уже после строк тела таблицы.

Элементы <thead>, <tbody> и <tfoot> поддерживают следующие специальные атрибуты:

  • align - горизонтальное выравнивание ячеек для группы строк
  • valign - вертикальное выравнивание.

Помимо специальных атрибутов, поддерживаются все общие атрибуты (id, style и пр.). Используя стиль можно назначить свойства форматирования всем ячейкам группы строк. 

Категория: HTML | Добавил: slava (18.07.2009)
Просмотров: 3094 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]