Задає ширину колонки. Якщо загальна ширина вмісту перевищує вказану ширину, браузер намагатиметься «втиснутися» у задані розміри рахунок форматування тексту. У випадку, коли це неможливо, наприклад, у колонці знаходяться зображення, атрибут 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>
<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>