Атрибут width тега <col> — ширина колонки таблиці

Атрибут width тега <col> задає ширину колонки. Якщо загальна ширина вмісту перевищує зазначену ширину таблиці, то браузер буде намагатися "втиснутися" в задані розміри за рахунок форматування тексту. У разі, коли це неможливо, наприклад, в таблиці знаходяться зображення, атрибут width буде проігнорований, і нова колонк таблиці буде обчислена на основі її вмісту.

правити

Загальний опис

правити

Порада

Замість цього атрибута використовуйте CSS властивість width. Наприклад, width:400px

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<col width="pixels|%|relative_length">

Атрибут width може отримувати 3 значень:

pixels

Ширина в пікселях

автор: с3с

правити

%

Ширина в відсотках

автор: с3с

правити

relative_length

Зазвичай застосовується будь-яке ціле значення в пікселях або відсотках загального обсягу простору. Альтернативний варіант заснований на використанні символу , який позначає всю доступну ширину. Допустимо використовувати кратні значення, наприклад 3 . Наприклад, якщо для таблиці встановлена ширина 600 пікселів, а для колонок - 1 , 2 , то в пікселях це буде відповідно 200 і 400. При використанні подібних одиниць браузеру потрібно завантажити таблицю цілком, щоб обчислити необхідну ширину клітинок, що призводить до затримки виведення великих таблиць.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	≤4	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3.2

Приклади

+ запропонувати свій приклад у пісочниці

<h3 id="a">Для демонстрації атрибуту застосовувався CSS<h3/>
<p>З використанням атрибуту width</p>
<table border="1">
<colgroup>
        <col width="20%"/>
   <col span="2" width="40%"/>
    </colgroup>
    <tr>
        <th>Смартфони</th>
        <th>Ноутбуки</th>
        <th>Планшети</th>
    </tr>
    <tr>
        <td>Samsung S8</td>
        <td>Lenovo G560</td>
        <td>Samsung Galaxy Tab E </td>
    </tr>
    <tr>
        <td>Samsung S8+</td>
        <td>Asus VivoBook S</td>
        <td>Samsung Galaxy Tab A</td>
    </tr>
</table>

td {
     padding:10px;
    border: 1px solid black; 

   }
#a{
  color:red;
}

<h3>Ширин не задано — переглядач ділить за вмістом</h3>
<table>
  <tr><th>Товар</th><th>К-сть</th><th>Ціна</th></tr>
  <tr><td>Клавіатура механічна</td><td>2</td><td>3200</td></tr>
</table>

<h3>colgroup + table-layout: fixed</h3>
<table class="fixed">
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  </colgroup>
  <tr><th>Товар</th><th>К-сть</th><th>Ціна</th></tr>
  <tr><td>Клавіатура механічна</td><td>2</td><td>3200</td></tr>
</table>

h3 { font-size: 15px; margin: 12px 0 6px; }
table { border-collapse: collapse; width: 360px; margin-bottom: 14px; font-size: 14px; }
th, td { border: 1px solid #94a3b8; padding: 4px 6px; text-align: left; }
.fixed { table-layout: fixed; }
.c1 { width: 60%; }
.c2 { width: 15%; background: #fef08a; }
/* width спрацює, а padding і color на <col> переглядач проігнорує */
.c3 { width: 25%; padding: 40px; color: red; }