Атрибут span тега <colgroup>

Описание

Атрибут span для тега <colgroup> определяет количество последовательных столбцов таблицы, к которым применяются заданные параметры. Это позволяет стилизовать или задавать свойства сразу для нескольких столбцов без необходимости перечислять каждый отдельно.

Пример использования:
<table border="1"> <colgroup span="2" style="background-color: #f0f0f0;"></colgroup> <colgroup style="background-color: #e0e0ff;"></colgroup> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> <th>Заголовок 3</th> </tr> <tr> <td>Данные 1</td> <td>Данные 2</td> <td>Данные 3</td> </tr> </table>

Особенности работы:

Значение Описание Примечание
Положительное целое число Количество столбцов в группе Минимальное значение 1
Не указано Группа содержит один столбец Эквивалентно span="1"

Рекомендации по использованию:

  • Используйте для группового форматирования столбцов
  • Сочетайте с CSS для сложного оформления
  • Указывайте span явно для ясности кода
  • Не смешивайте span и вложенные <col> в одной группе
  • Проверяйте количество столбцов в таблице

Пример с чередованием стилей:

<table border="1"> <colgroup span="1" style="background: #f8f8f8;"></colgroup> <colgroup span="1" style="background: #e8e8e8;"></colgroup> <tr> <td>Светлый фон</td> <td>Тёмный фон</td> </tr> </table>

Сравнение с вложенными <col>:

<!-- С использованием span --> <table> <colgroup span="3" class="highlight"></colgroup> </table> <!-- Эквивалент с вложенными col --> <table> <colgroup> <col class="highlight"> <col class="highlight"> <col class="highlight"> </colgroup> </table>

Важные замечания:

  • Атрибут span должен быть положительным целым числом
  • Если span не указан, по умолчанию применяется к одному столбцу
  • Нельзя одновременно использовать span и вложенные <col>
  • Избыточное значение span игнорируется (не создает пустые столбцы)
  • Порядок colgroup определяет порядок столбцов в таблице

Пример сложной таблицы:

<table border="1" width="100%"> <colgroup span="2" style="width: 20%;"></colgroup> <colgroup span="3" style="width: 15%; background: #f5f5f5;"></colgroup> <tr> <th colspan="2">Основная информация</th> <th colspan="3">Дополнительные данные</th> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> </table>

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