html тег <colgroup> атрибут width
Атрибут width тега <colgroup> задає попередню ширину групи колонок.
Якщо загальна ширина вмісту перевищує зазначену ширину, то браузер буде намагатися «втиснутися» в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в колонці знаходяться зображення, атрибут width буде проігнорований, і нова ширина колонки буде обчислена на основі її вмісту.
автор: NagarD
- Нотатка
-
Цей атрибут буде проігнорований, якщо ширина для колонки встановлена за допомогою елемента
автор: Wsewlad<col>.
Синтаксис
<colgroup width="pixels|%|relative_lngth">
Атрибут width може отримувати 3 значень:
-
pixels -
Ширина в пікселях
автор: NagarD -
% -
Ширина в відсотках
автор: NagarD -
relative_length -
Зазвичай застосовується будь-яке ціле значення в пікселях або відсотках загального обсягу простору. Альтернативний варіант заснований на використанні символу , який позначає всю доступну ширину. Допустимо використовувати кратні значення, наприклад 3 . Наприклад, якщо для таблиці встановлена ширина 600 пікселів, а для колонок - 1 , 2 , то в пікселях це буде відповідно 200 і 400. При використанні подібних одиниць браузеру потрібно завантажити таблицю цілком, щоб обчислити необхідну ширину клітинок, що призводить до затримки виведення великих таблиць.
автор: NagarD
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 0 |
Мобільних переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Перша колонка — рівно 200 пікселів завширшки завдяки width на colgroup, друга — за вмістом. У новому коді ширину колонок задають CSS-ом на col.
HTML
<table>
<colgroup width="200"></colgroup>
<tr><th>Місяць</th><th>Витрати</th></tr>
<tr><td>Січень</td><td>100 грн</td></tr>
<tr><td>Лютий</td><td>80 грн</td></tr>
</table>
CSS
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #0172ad;
padding: 4px 10px;
}
Різниця між HTML 4.01 та HTML5
Атрибут width тега <colgroup> більше не підртимується в HTML5. Використовуйте CSS властивість width. Наприклад: <td style="width:130px">
Різниця між XHTML та HTML
Коментарі
Коментарів ще немає — будьте першим!