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

Описание

Атрибут width для тега <col> определяет ширину столбца таблицы. Этот атрибут позволяет задать фиксированную или относительную ширину для всех ячеек в столбце, обеспечивая контроль над макетом таблицы.

Пример использования:
<table border="1"> <colgroup> <col width="100px"> <!-- Фиксированная ширина --> <col width="30%"> <!-- Относительная ширина --> <col width="2*"> <!-- Пропорциональная ширина --> </colgroup> <tr> <td>Фиксированная 100px</td> <td>30% от таблицы</td> <td>Оставшееся пространство (в 2 раза шире других пропорциональных колонок)</td> </tr> </table>

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

Тип значения Пример Описание
Пиксели width="150" Фиксированная ширина в пикселях
Проценты width="25%" Относительная ширина от всей таблицы
Пропорции width="3*" Относительная ширина в пропорциях

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

  • Используйте пиксели для колонок с фиксированным содержимым (иконки, чекбоксы)
  • Проценты хорошо работают для адаптивных таблиц
  • Пропорциональное распределение (3*, 2*) для гибких колонок
  • Сочетайте с table-layout: fixed для точного контроля
  • Для сложных макетов предпочтительнее CSS

Пример с CSS вместо атрибута width:

<style> .fixed-col { width: 120px; } .fluid-col { width: 40%; } .table-fixed { table-layout: fixed; } </style> <table class="table-fixed"> <colgroup> <col class="fixed-col"> <col class="fluid-col"> </colgroup> <tr> <td>Фиксированная колонка</td> <td>Гибкая колонка</td> </tr> </table>

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

  • Атрибут width считается устаревшим в HTML5 (используйте CSS)
  • Минимальная ширина определяется содержимым ячеек
  • При переполнении содержимого ширина может увеличиваться
  • Для точного контроля используйте table-layout: fixed
  • Влияет на все ячейки в столбце, включая заголовки

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

<table border="1" width="100%"> <colgroup> <col width="150px"> <col width="1*"> <col width="2*"> </colgroup> <tr> <td>Фиксированная</td> <td>Гибкая (1 часть)</td> <td>Гибкая (2 части)</td> </tr> </table>

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

  • Для сложных таблиц используйте CSS-свойство width
  • Пропорциональное распределение (1*, 2*) поддерживается не всеми браузерами
  • Учитывайте минимальную ширину содержимого
  • Тестируйте на разных размерах экрана
  • Для резиновых таблиц лучше подходят процентные значения

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