Атрибут width тега <table> — ширина таблиці
Задає ширину таблиці. Якщо загальна ширина вмісту перевищує зазначену ширину таблиці, то браузер буде намагатися «втиснутися»в задані розміри за рахунок форматування тексту.
У разі, коли це неможливо, наприклад, в таблиці знаходяться зображення, атрибут width буде проігнорований, і нова ширина таблиці буде обчислено на основі її вмісту.
Загальний опис
автор: NagarD
- Порада
-
Замість цього атрибута використовуйте CSS властивість
автор: с3сwidth. - Нотатка
-
Якщо атрибут
автор: с3сwidthне встановлений, таблиця буде відображена з шириною, визначеною за змістом таблиці
Синтаксис
<table width="pixels|%">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад використання HTML атрибута width теґа <table>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості width в межах від 0 до 1000, з кроком 10, переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="1000" step="10" value="0" id="range" onmousemove="f()">
<hr>
<table id = "table" border="2" cellspacing="2" width="600">
<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>
<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:blue;
}
*{
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 теґа <table>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості width в межах від 0 до 100% переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="100" step="1" value="40" id="range" onmousemove="f()">
<hr>
<table id = "table" border="2" cellspacing="2" width="40% ">
<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>
<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:blue;
}
*{
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Обом таблицям задано ширину 200px. Перша роздувається під довге слово, друга тримає ширину завдяки table-layout: fixed.
HTML
<table class="auto">
<caption>width: 200px</caption>
<tr><th>Слово</th></tr>
<tr><td>невідокремлюванийдовжелезнийтекст</td></tr>
</table>
<table class="fixed">
<caption>width: 200px + table-layout: fixed</caption>
<tr><th>Слово</th></tr>
<tr><td>невідокремлюванийдовжелезнийтекст</td></tr>
</table>CSS
table {
width: 200px;
margin-bottom: 18px;
border-collapse: collapse;
font: 15px/1.4 system-ui, sans-serif;
}
caption {
padding: 4px 0;
font-size: 13px;
color: #475569;
text-align: left;
}
th, td {
border: 1px solid #94a3b8;
padding: 6px 8px;
}
.fixed {
table-layout: fixed;
overflow-wrap: anywhere;
}Перша таблиця розтягнута на 80% контейнера атрибутом width, друга — стиснулася за вмістом. Атрибут легасі: у новому коді ширину задають CSS-ом.
HTML
<table width="80%">
<tr><td>Таблиця на 80% ширини</td></tr>
</table>
<table>
<tr><td>Таблиця за вмістом</td></tr>
</table>CSS
table, td {
border: 1px solid #0172ad;
}
table {
margin-bottom: 10px;
}
td {
padding: 4px 10px;
}Різниця між HTML 4.01 та HTML5
Цей атрибут не підтримується в HTML5
Коментарі
Коментарів ще немає — будьте першим!