Атрибут valign тега <thead> — вирівнювання шапки таблиці
Встановлює вертикальне вирівнювання вмісту осередків в контейнері <thead>. За замовчуванням контент осередку розташовується по її вертикалі в центрі.
Загальний опис
автор: NagarD
Синтаксис
<thead valign="top|middle|bottom|baseline">Атрибут valign може отримувати 4 значень:
-
top -
Вирівнювання вмісту комірок по верхньому краю рядка.
автор: с3с -
middle -
Вирівнювання по середині.
автор: с3с -
bottom -
Вирівнювання по нижньому краю.
автор: с3с -
baseline -
Вирівнювання по базовій лінії, при цьому відбувається прив'язка вмісту комірок рядка до однієї лінії.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Вісім однакових шапок заввишки 80px, у кожній — своє значення valign. Видно, що без атрибута заголовок і так посередині, baseline стоїть окремо від top, чуже слово й значення з пробілами по краях мовчки нічого не роблять, а великі літери — байдужі. Останні три таблиці показують, хто кого перекриває: власний valign комірки, правило в стилях і межу дії атрибута — комірки tbody він не чіпає.
HTML
<table>
<caption>valign="bottom" — те, чого від шапки хочуть найчастіше</caption>
<thead valign="bottom"><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table>
<caption>Без valign — заголовок і так посередині</caption>
<thead><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table>
<caption>valign="top"</caption>
<thead valign="top"><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table>
<caption>valign="baseline" — не те саме, що top</caption>
<thead valign="baseline"><tr><th>Місто області</th><th class="velyke">2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table class="bad">
<caption>valign=" top " із пробілами — не діє</caption>
<thead valign=" top "><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table class="bad">
<caption>valign="верх" — чуже слово теж не діє</caption>
<thead valign="верх"><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table>
<caption>valign="TOP" на шапці, але перший заголовок має свій valign="bottom"</caption>
<thead valign="TOP"><tr><th valign="bottom">Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table class="css">
<caption>valign="top" на шапці, але в стилях vertical-align: bottom — виграє CSS</caption>
<thead valign="top"><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td>Київ</td><td>2 952 000</td></tr></tbody>
</table>
<table>
<caption>valign="top" на шапці не дістає комірок тіла</caption>
<thead valign="top"><tr><th>Місто області</th><th>2021</th></tr></thead>
<tbody><tr><td class="vysoka">Київ</td><td>2 952 000</td></tr></tbody>
</table>CSS
table {
width: 100%;
max-width: 460px;
margin-bottom: 18px;
border-collapse: collapse;
}
caption {
margin-bottom: 5px;
font-weight: 600;
text-align: left;
}
th,
td {
padding: 0 10px;
border: 1px solid #b9c6d8;
}
th {
height: 76px;
background: #eef3fb;
}
td {
padding: 5px 10px;
}
.velyke {
font-size: 30px;
}
.vysoka {
height: 76px;
}
.bad caption {
color: #c0392b;
}
.bad {
outline: 2px dashed #d64545;
outline-offset: 3px;
}
.css thead th {
vertical-align: bottom;
}
.css caption {
color: #1b4f9c;
}Найпростіший приклад використання HTML атрибута valign теґа <thead>
HTML
<table border="0" cellpadding="5" cellspacing="3">
<thead valign="bottom" height="100">
<tr>
<th colspan="4" height="100">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2" height="100">Автомобілі</th>
<th colspan="2" height="100">Літаки</th>
</tr>
</thead>
<tbody >
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}Найпростіший приклад використання HTML атрибута valign теґа <thead>
HTML
<p>Вибери потрібне значення для <code>valign</code>:
<select onchange="ChangeVAlign (this);" >
<option >baseline</option>
<option />bottom
<option selected="selected" />middle
<option />top
</select>
</p>
<hr>
<table border="0" cellpadding="5" cellspacing="3">
<thead id="tdToChange" height="100">
<tr>
<th colspan="4" height="100">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2" height="100">Автомобілі</th>
<th colspan="2" height="100">Літаки</th>
</tr>
</thead>
<tbody >
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}JS
function ChangeVAlign(elem) {
var tdata = document.getElementById("tdToChange");
var whichSelected = elem.selectedIndex;
var vPosition = elem.options[whichSelected].text;
tdata.vAlign = vPosition;
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Атрибут тега <thead> більше не підртимується в HTML5. Використовуйте CSS властивість vertical-align. Наприклад: <thead style="vertical-align:bottom">
Коментарі
Коментарів ще немає — будьте першим!