Основы работы с XHTML и CSS

         

Теги <colgroup> и <col/>


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

Столбцы объединяются в группу согласно сходству в оформлении ячеек в разделах таблицы <thead>, <tfoot> и <tbody>. Обычно те столбцы ячеек, которые имеют одинаковое оформление, необходимо объединять в группу с помощью <colgroup> со столбцами компонентами, определяемыми тегами <col/>. Затем стили можно применить к тегу <colgroup>, чтобы распространить на все ячейки в этой группе. Любые различия в оформлении, требуемые для определенного столбца в этой группе, реализуются с помощью индивидуальных тегов <col/>.

Спецификации объединения столбцов должны кодироваться перед разделами таблицы <thead>, <tfoot>, и <tbody>. Группы идентифицируют в таблице слева направо. В текущем примере определены следующие группы (см. рисунок 8.41).

<table> <caption>Sales Order</caption>

<colgroup id="GROUP1"> <col/> </colgroup>

<colgroup> <col/> </colgroup>

<colgroup id="GROUP3"> <col id="COL3"/> <col/> <col id="COL5"/> </colgroup>

...

Листинг 8.46. Код для объединения столбцов таблицы примера в группы (html, txt)

Здесь определены три группы colgroups на основе общности оформления ячеек в группах. Группам присвоены значения id, на которые ссылается таблица стилей, создаваемая далее для этих групп. В каждой группе столбцов теги <col/> определяют каждый столбец в группе. Определенному столбцу, оформление которого отличается чем-то от оформления группы, включающей его, задается id для отдельной ссылки в таблице стилей.

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

Помните, что эта первая группа столбцов включает также первый столбец из разделов <thead> и <tfoot> в таблице (группа столбцов охватывает все разделы таблицы). Так как информация в разделах <thead> и <tfoot> оформляется иначе, чем номера позиций в разделе <tbody>, то заголовок и основание могут оформляться отдельно, чтобы переопределить оформление тела. Обычная практика состоит в использовании раздела <tbody> для объединения столбцов и переопределении этого оформления требуемым образом.

Вторая группа столбцов включает второй столбец описаний позиций. Для нее не определяют никакие записи в таблице стилей и не задают id, поэтому ячейки в этой группе будут иметь оформление по умолчанию: данные будут выровнены влево и по вертикали в центре ячеек.

Третья группа столбцов включает последние три столбца (quantity, price и amount). Эти столбцы определяют как одну группу, так как для всех ячеек будет применяться похожее оформление. Все ячейки будут иметь ширину в 15% от ширины таблицы, а данные будут выравниваться вправо, так как они являются числовыми значениями. Однако в этой группе два столбца будут немного отличаться в оформлении. Столбец quantity будет выравниваться по центру, а столбец amount будет иметь фоновый цвет. Этим двум столбцам присваивают значения id для отдельного оформления в таблице стилей.



Содержание раздела