Атрибут width

Атрибут width задаёт ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счёт форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе её содержимого.

Синтаксис

<colgroup width="<значение>">

Значения

Обычно применяется любое целое значение в пикселях или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселей, а для колонок — 1*, 2*, то в пикселях это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

Значение по умолчанию

Ширина вычисляется на основе содержимого ячейки.

Пример

Код примера скопирован в буфер

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>COLGROUP, атрибут width</title>
 </head>
 <body>
 <table width="600" cellpadding="2" cellspacing="0" border="1" rules="groups">
  <colgroup width="2*">
  <colgroup span="2" align="center" width="1*">
  <tr>
   <td> ... </td>
   <td> ... </td>
  </tr> 
 </table> 
 </body>
</html>

Ширина первой колонки в данном примере будет в два раза больше остальных колонок таблицы.

Примечание

Для изменения ширины колонок воспользуйтесь псевдоклассом :nth-child и свойством width, добавляя их к селектору td.

Код примера скопирован в буфер

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Ширина колонок</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
   }
   td {
    border: 1px solid black; /* Рамка вокруг ячеек */
   }
   td:nth-child(1) {
    width: 20%; /* Ширина первой колонки */
   }
   td:nth-child(2) {
    width: 80%; /* Ширина второй колонки */
   }
  </style>
 </head> 
 <body> 
  <table>
   <tr>
    <td> ... </td>
    <td> ... </td>
   </tr> 
  </table> 
 </body>
</html>

Браузеры


3	12	1	15	4	1


4.4	4	14	3.2