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

Описание

Атрибут width для тега <colgroup> определяет ширину всех столбцов в группе. Этот атрибут устарел в HTML5 и заменён на CSS-свойство width.

Внимание: Хотя атрибут продолжает работать в браузерах, его использование не рекомендуется в новых проектах.
Пример использования (устаревший способ):
<table border="1"> <colgroup width="150"></colgroup> <colgroup width="250"></colgroup> <tr> <td>Узкий столбец (150px)</td> <td>Широкий столбец (250px)</td> </tr> </table>

Форматы значений:

Тип значения Пример Описание
Пиксели width="200" Фиксированная ширина в пикселях
Проценты width="30%" Относительная ширина от всей таблицы
Относительные единицы width="2*" Пропорциональное распределение (редко поддерживается)

Современная CSS-альтернатива:

<style> .narrow-col { width: 150px; } .wide-col { width: 250px; } .fixed-table { table-layout: fixed; } </style> <table class="fixed-table"> <colgroup class="narrow-col"></colgroup> <colgroup class="wide-col"></colgroup> <tr> <td>Узкий столбец</td> <td>Широкий столбец</td> </tr> </table>

Рекомендации по работе с шириной столбцов:

  • Всегда используйте table-layout: fixed для точного контроля
  • Для адаптивных таблиц применяйте процентные значения или CSS Grid
  • Минимальную ширину можно задать через min-width
  • Избегайте смешивания пикселей и процентов в одной таблице
  • Для сложных макетов рассмотрите использование CSS Flexbox или Grid

Пример адаптивной таблицы:

<style> .responsive-table { width: 100%; table-layout: fixed; } .responsive-table col:nth-child(1) { width: 30%; } .responsive-table col:nth-child(2) { width: 70%; } @media (max-width: 600px) { .responsive-table col:nth-child(1), .responsive-table col:nth-child(2) { width: 100%; display: block; } } </style> <table class="responsive-table"> <colgroup><col></colgroup> <colgroup><col></colgroup> <tr> <td>Заголовок</td> <td>Описание</td> </tr> </table>

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

  • Браузеры могут игнорировать ширину при переполнении содержимого
  • Реальная ширина может отличаться из-за границ и отступов
  • Для сложных таблиц лучше использовать div-элементы с CSS Grid
  • Всегда проверяйте отображение на мобильных устройствах
  • Учитывайте доступность при изменении стандартного поведения таблиц
Совет: Для создания современных адаптивных табличных интерфейсов рассмотрите использование CSS Grid Layout или специализированных библиотек типа Tablesaw.

Примечание: Хотя атрибут width для <colgroup> продолжает работать, современные веб-стандарты рекомендуют использовать CSS для управления размерами таблиц. Это обеспечивает лучшую гибкость, адаптивность и контроль над макетом.