Атрибут height тега <th> — висота комірки заголовка
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<th height="pixels|%">Атрибут height може отримувати 2 значень:
-
pixels -
Встановлює висоту в пікселях (приклад: height="50")
автор: с3с -
% -
Встановлює висоту у відсотках від навколишнього елемента (наприклад: height="50%"
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ | 12+ | 3+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута height теґа <th>
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 id = "table" >День тиждня</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: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Найпростіший приклад використання HTML атрибута height теґа <th>
HTML
<table border="2" cellspacing="2" height ="100" >
<caption><p>З використанням атрибуту height </p><hr>Графік роботи</caption>
<thead>
<tr>
<th height ="150">День тиждня</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;
}П'ять таблиць: height="60" на одній комірці піднімає весь рядок; height="20" під високим вмістом не робить нічого; min-height: 120px не піднімає комірку взагалі, а height: 120px у сусідній таблиці — піднімає; і робоча заміна — padding, яка росте разом із вмістом.
HTML
<table>
<caption>1. height="60" на одній комірці — піднявся весь рядок</caption>
<tr><th height="60">height="60"</th><th>сусідка без height</th></tr>
<tr><td>дані</td><td>дані</td></tr>
</table>
<table>
<caption>2. height="20", але вміст вищий — атрибут не спрацював</caption>
<tr><th height="20">три<br>рядки<br>тексту</th><th>сусідка</th></tr>
</table>
<table>
<caption>3. min-height: 120px — комірка не піднялася зовсім</caption>
<tr><th class="mh">min-height: 120px</th><th>сусідка</th></tr>
</table>
<table>
<caption>4. height: 120px у стилях — та сама комірка піднялася</caption>
<tr><th class="hh">height: 120px</th><th>сусідка</th></tr>
</table>
<table>
<caption>5. Робоча заміна: padding замість висоти</caption>
<tr><th class="pad">padding: 18px 12px</th><th class="pad">і в сусідки теж</th></tr>
<tr><td class="pad">дані</td><td class="pad">дані</td></tr>
</table>CSS
table {
width: 380px;
margin-bottom: 18px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 4px 8px;
border: 1px solid #b9c6d8;
text-align: left;
vertical-align: top;
}
.mh {
min-height: 120px;
background: #fff4f4;
}
.hh {
height: 120px;
background: #f3fbf4;
}
.pad {
padding: 18px 12px;
background: #f6f9ff;
}Різниця між HTML 4.01 та HTML5
Атрибут height для тега <th> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!