Атрибут width тега <td> — ширина комірки таблиці
Атрибут width визначає ширину комірки.
Як правило, комірка займає місце необхідне для відображання вмісту. Атрибут width використовується для встановлення визначеної ширини комірки.
Якщо загальна ширина вмісту перевищує зазначену ширину комірки, браузер буде намагатися "втиснутися" в задані розміри через форматування тексту. У разі, коли це неможливо, наприклад, в комірці знаходяться зображення, атрибут width буде проігнорований, а нова ширина комірки буде обчислена на основі її вмісту.
Загальний опис
автор: NagarD
- Нотатка
-
Використання цього атрибута засуджується специфікацією HTML, валідний код виходить тільки при використанні перехідного <! DOCTYPE>.
автор: с3с
Синтаксис
<td width="pixels|%">Атрибут width може отримувати 2 значень:
-
pixels -
Встановлює ширину в пікселях (приклад: width="50")
автор: с3с -
% -
Встановлює ширину у відсотках від навколишнього елемента (наприклад: width="50%")
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута width теґа <td>
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>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td id = "table" >Понеділок</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 теґа <td>
HTML
<table border="2" cellspacing="2" >
<caption><p>З використанням атрибуту width </p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td width ="25%">Понеділок</td>
<td width ="1%">8:00 - 16:00</td>
<td width ="15%">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="80". Різниця лише в table-layout — і в лівій довге слово розсуває стовпець, а задані ширини стають побажанням.
HTML
<p><b>table-layout: auto</b> — типово; ширини перерахує вміст:</p>
<table class="auto">
<tr>
<td width="80">width="80"</td>
<td width="80">width="80"</td>
<td width="80">width="80"</td>
</tr>
<tr>
<td>коротко</td>
<td>Дніпропетровщина-Кіровоградщина</td>
<td>коротко</td>
</tr>
</table>
<p><b>table-layout: fixed</b> — ширини з першого рядка тримаються:</p>
<table class="fixed">
<tr>
<td width="80">width="80"</td>
<td width="80">width="80"</td>
<td width="80">width="80"</td>
</tr>
<tr>
<td>коротко</td>
<td>Дніпропетровщина-Кіровоградщина</td>
<td>коротко</td>
</tr>
</table>CSS
body {
font-family: system-ui, sans-serif;
font-size: 15px;
}
p {
margin: 20px 0 6px;
color: #555;
font-size: 14px;
}
table {
width: 300px;
border-collapse: collapse;
font-size: 13px;
}
td {
border: 1px solid #9aa4ad;
padding: 6px 8px;
}
.auto {
table-layout: auto;
}
.fixed {
table-layout: fixed;
}
.fixed td {
overflow-wrap: anywhere;
}Різниця між HTML 4.01 та HTML5
Атрибут width для тега <td> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!