Задає ширину колонки. Якщо загальна ширина вмісту перевищує вказану ширину, браузер намагатиметься «втиснутися» у задані розміри рахунок форматування тексту. У випадку, коли це неможливо, наприклад, у колонці знаходяться зображення, атрибут width буде проігнорований, і нова ширина колонки буде обчислена на основі вмісту.
Даний атрибут застарів, натомість використовуйте стилі.
Синтаксис
<col width="<значення>">
Значення
Зазвичай застосовується будь-яке ціле значення в пікселях або відсотках доступного простору. Альтернативний варіант ґрунтується на використанні символу *, який позначає всю доступну ширину. Допустимо використовувати кратні значення, наприклад, 3*. Наприклад, якщо для таблиці встановлена ширина 600 пікселів, а для колонок — 1*, 2*, то в пікселях це буде відповідно 200 та 400. При використанні подібних одиниць браузеру потрібно завантажити таблицю повністю, щоб обчислити необхідну ширину осередків, що призводить до затримки виведення великих таблиць.
Значення за замовчуванням
Ширина обчислюється на основі вмісту осередку.
Приклад
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" quot;http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>COL, атрибут width</title> </head> <body> <table cellpadding="10" border="1" width="100%"> <col width="20%"> <col width="80%"> <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>