Атрибут width тега <th> — ширина комірки таблиці
Атрибут width визначає ширину комірки.
Як правило, комірка займає місце необхідне для відображання вмісту. Атрибут width використовується для встановлення визначеної ширини комірки.
Якщо загальна ширина вмісту перевищує зазначену ширину комірки, браузер буде намагатися "втиснутися" в задані розміри через форматування тексту. У разі, коли це неможливо, наприклад, в комірці знаходяться зображення, атрибут width буде проігнорований, а нова ширина комірки буде обчислена на основі її вмісту.
Загальний опис
автор: NagarD
Синтаксис
<th width="pixels|%">Атрибут width може отримувати 2 значень:
-
pixels -
Встановлює ширину в пікселях (приклад: width="50")
автор: с3с -
% -
Встановлює ширину у відсотках від навколишнього елемента (наприклад: width="50%"
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута width теґа <th>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості width в межах від 0 до 500 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="500" step="1" value="100" id="range" onmousemove="f()">
<hr>
<table border="2" cellspacing="2" >
<caption><p>З використанням атрибуту width </p><hr>Графік роботи</caption>
<thead>
<tr >
<th >День тиждня</th>
<th id = "table">Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td >Понеділок</td>
<td >8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td >Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>
<table border="2">
<caption><p>Без використання атрибуту width </p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>CSS
table{
float:left;
margin-left:5px;
}
table,th,td{
text-align:center;
}
th,td{
background:#ffffffc5;
}
caption{
font-size:20px;
color:red;
}
*{
text-align:center;
}JS
text.innerHTML = "Поточна ширина: " + document.getElementById("table").width;
function f() {
var range = document.getElementById("range").value;
var element = document.getElementById("table");
var text = document.getElementById("text");
element.setAttribute("width", range);
text.innerHTML = "Поточна ширина:" + range;
}
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута width теґа <th>
HTML
<table border="2" cellspacing="2" >
<caption><p>З використанням атрибуту width </p><hr>Графік роботи</caption>
<thead>
<tr>
<th width="15%">День тиждня</th>
<th width="25%">Роботчий час</th>
<th width="5%">Обідня перерва</th>
</tr>
</thead>
<tr>
<td >Понеділок</td>
<td >8:00 - 16:00</td>
<td >12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td >Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td >П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>
<br><br>
<table border="2" cellspacing="2" width="50%">
<caption><p>Без використання атрибуту width </p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td >Понеділок</td>
<td >8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td >Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td >П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>CSS
table{
float:left;
margin-left:5px;
}
table,th,td{
text-align:center;
}
th,td{
background:#ffffffc5;
}
caption{
font-size:20px;
color:red;
}
*{
text-align:center;
}Три однакові таблиці: без ширини, із застарілим width на <th> і сучасний спосіб — table-layout: fixed плюс ширини в CSS. Вміст другої колонки навмисно довгий: видно, що атрибут вміст перебити не може, а fixed — може.
HTML
<p>1. Без ширини: колонки підлаштовуються під вміст.</p>
<table>
<tr><th>День</th><th>Робочий час</th><th>Перерва</th></tr>
<tr><td>Понеділок</td><td>8:00 – 16:00, без перерви на каву</td><td>12:00</td></tr>
</table>
<p>2. Застарілий <code>width</code> на <code><th></code>: 20% / 60% / 20% задано, але вміст їх зсунув.</p>
<table>
<tr><th width="20%">День</th><th width="60%">Робочий час</th><th width="20%">Перерва</th></tr>
<tr><td>Понеділок</td><td>8:00 – 16:00, без перерви на каву</td><td>12:00</td></tr>
</table>
<p>3. Ті самі 20% / 60% / 20% у CSS разом із <code>table-layout: fixed</code> — виконуються точно.</p>
<table class="fixed">
<tr><th>День</th><th>Робочий час</th><th>Перерва</th></tr>
<tr><td>Понеділок</td><td>8:00 – 16:00, без перерви на каву</td><td>12:00</td></tr>
</table>CSS
table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
th, td { border: 1px solid #bbb; padding: 4px 8px; text-align: left; }
th { background: #eee; }
.fixed { table-layout: fixed; }
.fixed th:nth-child(1) { width: 20%; }
.fixed th:nth-child(2) { width: 60%; }
.fixed th:nth-child(3) { width: 20%; }
.fixed td { overflow-wrap: break-word; }Різниця між HTML 4.01 та HTML5
Атрибут width для тега <th> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!