Атрибут height тега <table> — задати висоту таблиці
Опис та застосування
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Замість цього атрибута використовуйте CSS властивість
автор: с3сheight.
Синтаксис
<table height="pixels">...</table>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ | 12+ | 3+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 18+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Шість таблиць із однаковим вмістом. Видно, що height="300" працює й на сторінці з доктайпом, що зайва висота розходиться по рядках порівну, що height="10" не обріже нічого, що хибне значення тихо ігнорується, що відсоток потребує батька з висотою і що правило в стилях перекриває атрибут.
HTML
<p class="head">1. Без height — заввишки з вміст</p>
<table>
<tr><td>перший рядок</td><td>дані</td></tr>
<tr><td>другий рядок</td><td>дані</td></tr>
</table>
<p class="head">2. height="300" — і кожен із двох рядків став по 150</p>
<table height="300">
<tr><td>перший рядок</td><td>дані</td></tr>
<tr><td>другий рядок</td><td>дані</td></tr>
</table>
<p class="head">3. height="10" — вміст сильніший, таблиця не стиснулась</p>
<table height="10">
<tr><td>перший рядок</td><td>дані</td></tr>
<tr><td>другий рядок</td><td>дані</td></tr>
</table>
<p class="head bad">4. height="abc" — мовчки нічого</p>
<table height="abc">
<tr><td>перший рядок</td><td>дані</td></tr>
<tr><td>другий рядок</td><td>дані</td></tr>
</table>
<p class="head">5. height="50%" усередині блока заввишки 300 — виходить 150</p>
<div class="ramka">
<table height="50%">
<tr><td>перший рядок</td><td>дані</td></tr>
</table>
</div>
<p class="head good">6. Те саме в стилях: height: 300px на таблиці</p>
<table class="css">
<tr><td>перший рядок</td><td>дані</td></tr>
<tr><td>другий рядок</td><td>дані</td></tr>
</table>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.bad {
color: #c0392b;
}
.good {
color: #1b5e20;
}
table {
width: 100%;
max-width: 420px;
border-collapse: collapse;
}
td {
padding: 4px 10px;
border: 1px solid #b9c6d8;
background: #f6f9ff;
vertical-align: top;
}
tr:nth-child(2) td {
background: #eef3fb;
}
.ramka {
width: 440px;
height: 300px;
padding: 6px;
border: 2px solid #b9c6d8;
border-radius: 6px;
}
.css {
height: 300px;
}Приклад використання атрибута height
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості height в межах від 0 до 1000 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="1000" step="1" value="200" id="range" onmousemove="f()">
<hr>
<table id = "table" border="2" cellspacing="2" height ="200" >
<caption><p>З використанням атрибуту height </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>Без використанням атрибуту height </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("height", range);
text.innerHTML = "Поточна висота:" + range;
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
В HTML 4.x та HTML 5.x - не підтримується.
Різниця між XHTML та HTML
В XHTML 1.0 та XHTML 1.1 - не рекомендується до використання.
Коментарі
Коментарів ще немає — будьте першим!