Атрибут height тега <td> — задати висоту комірки таблиці
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Використання цього атрибута засуджується специфікацією HTML, валідний код виходить тільки при використанні перехідного <! DOCTYPE>.
автор: с3с
Синтаксис
<td height="pixels|%">Атрибут height може отримувати 2 значень:
-
pixels -
Встановлює висоту в пікселях (приклад: height="50")
автор: с3с -
% -
Встановлює висоту у відсотках від навколишнього елемента (наприклад: height="50%"
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ | 12+ | 3+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута height теґа <td>
HTML
<table border="2" cellspacing="2" height ="100" >
<caption><p>З використанням атрибуту height </p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td height ="50">Понеділок</td>
<td >8:00 - 16:00</td>
<td >12:00 - 13:00</td>
</tr>
<tr>
<td height ="30">Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td height ="60">Середа</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 height ="100">П'ятниця</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;
}Найпростіший приклад використання HTML атрибута height теґа <td>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості height в межах від 0 до 1000 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="1000" step="1" value="0" id="range" onmousemove="f()">
<hr>
<table border="2" cellspacing="2" height ="100" >
<caption><p>З використанням атрибуту height </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>Без використання атрибуту 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:red;
}
*{
text-align:center;
}JS
text.innerHTML = "Поточна висота: " + document.getElementById("table").height;
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П'ять таблиць. У першій height="120" на одній комірці — видно, що виросла вся смуга, разом із сусідкою без атрибута. У другій height="10" при високому вмісті просто ігнорується. Третя й четверта показують відсотки: у таблиці із заданою висотою вони працюють, у таблиці без неї — ні. У п'ятій height="200em" дає рівно ті самі 200 пікселів, що й height="200".
HTML
<table>
<caption>1. height="120" на лівій комірці — виріс увесь рядок</caption>
<tr><td height="120" class="mark">height="120"</td><td>сусідка без атрибута</td></tr>
<tr><td>наступний рядок</td><td>не змінився</td></tr>
</table>
<table>
<caption>2. height="10" при високому вмісті — атрибут проігноровано</caption>
<tr><td height="10" class="mark">height="10"</td>
<td>Рядок перший<br>рядок другий<br>рядок третій<br>рядок четвертий</td></tr>
</table>
<table class="vysoka">
<caption>3. height="50%" у таблиці з висотою 300px — працює, це 150px</caption>
<tr><td height="50%" class="mark">height="50%"</td><td>сусідка</td></tr>
<tr><td>другий рядок</td><td>ділить решту</td></tr>
</table>
<table>
<caption>4. height="50%" у таблиці без своєї висоти — не працює зовсім</caption>
<tr><td height="50%" class="mark">height="50%"</td><td>сусідка</td></tr>
</table>
<table>
<caption>5. height="200em" читається як 200 пікселів — одиниці відкинуто мовчки</caption>
<tr><td height="200em" class="mark">height="200em"</td>
<td height="200" class="mark2">height="200"</td></tr>
</table>CSS
table {
width: 100%;
max-width: 480px;
margin-bottom: 20px;
border-collapse: collapse;
}
caption {
margin-bottom: 5px;
font-weight: 600;
text-align: left;
}
td {
padding: 5px 10px;
border: 1px solid #b9c6d8;
vertical-align: top;
}
.mark {
background: #eef3fb;
font-family: ui-monospace, monospace;
font-size: .9em;
}
.mark2 {
background: #f3fbf4;
font-family: ui-monospace, monospace;
font-size: .9em;
}
.vysoka {
height: 300px;
}Різниця між HTML 4.01 та HTML5
Атрибут height для тега <td> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!