Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0 + | 1.0 + | 6.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Специфікація
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Опис
Тег <colgroup> призначений для завдання ширини і стилю однієї або декількох колонок таблиці. Цей тег дозволяє зменшити код таблиці за рахунок скорочення повторюваних атрибутів, і при наявності цього тега браузер починає показувати вміст таблиці, не чекаючи її повного завантаження. Тег <colgroup> можна використовувати в комбінації з тегом <col> , який визначає характеристики однієї або декількох колонок.
Зазвичай закриває тег не потрібно, але якщо <colgroup> виступає як контейнер для елементів <col> , тоді варто додати тег </colgroup> в кінці групи.
Різниця між властивостями тегів <colgroup> і <col> не дуже велика і полягає в наступному. <colgroup> дозволяє об'єднувати колонки в певні групи, також при додаванні атрибуту rules="groups" до тегу <table> браузер буде малювати лінію тільки між колонками, створеними за допомогою <colgroup> . В інших випадках поведінка колонок призначених через елементи <colgroup> і <col> ідентично.
Синтаксис
HTML | <table> <colgroup атрибути> <tr> <td> ... </td> </tr> </table> |
XHTML | <table> <colgroup атрибути/> <tr> <td> ... </td> </tr> </table> |
Атрибути
- align
- Встановлює вирівнювання вмісту колонки по краю.
- char
- Вирівнює вміст колонки по заданому символу.
- charoff
- Зрушує вміст комірки відносно заданого символу.
- span
- Кількість колонок, до яких варто застосовувати атрибути.
- valign
- Задає вертикальне вирівнювання вмісту колонки.
- width
- Ширина колонок.
Закриваючий тег
Чи не обов'язковий.
Приклад
HTML5 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Тег COLGROUP </title> </head> <body> <table width="450" cellpadding="2" cellspacing="0" border="1" rules="groups"> <colgroup width="150"> <colgroup span="9" align="center" width="50"> <col span="5"> <col span="4"> </colgroup> <tr> <td> </td> <td> 1995 </td> <td> 1996 </td> <td> 1997 </td> <td> 1998 </td> <td> 1999 </td> <td> 2000 </td> <td> 2001 </td> <td> 2002 </td> <td> 2003 </td> </tr> <tr> <td> Нафта </td> <td> 5 </td> <td> 7 </td> <td> 2 </td> <td> 8 </td> <td> 3 </td> <td> 34 </td> <td> 62 </td> <td> 74 </td> <td> 57 </td> </tr> <tr> <td> Золото </td> <td> 3 </td> <td> 6 </td> <td> 4 </td> <td> 6 </td> <td> 4 </td> <td> 69 </td> <td> 72 </td> <td> 56 </td> <td> 47 </td> </tr> <tr> <td> Дерево </td> <td> 5 </td> <td> 8 </td> <td> 3 </td> <td> 4 </td> <td> 7 </td> <td> 73 </td> <td> 79 </td> <td> 34 </td> <td> 86 </td> </tr> </table> </body> </html>
Результат даного прикладу показаний на рис. 1. Програми перегляду Chrome і Safari не підтримують атрибут align .
