Атрибут valign тега <tfoot> — вирівнювання підвалу таблиці
Встановлює вертикальне вирівнювання вмісту комірок в контейнері <tfoot>.
Без задання контент комірки розташовується по її вертикалі в центрі.
Загальний опис
автор: NagarD
Синтаксис
<tfoot 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 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута valign теґа <tfoot>
HTML
<p>З використанням атрибуту valign</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4" >
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<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>
<tfoot valign="bottom" height="100">
<tr>
<th colspan="4" height="100">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2" height="100">35</th>
<th colspan="2" height="100">40</th>
</tr>
</tfoot>
</table>
<br>
<p>Без використання атрибуту valign</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<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>
<tfoot>
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}Чотири однакові таблиці з високим рядком у шапці, щоб було куди вирівнювати: без атрибута, з valign="bottom" на <tfoot>, із перебиванням через <td valign="top"> і з правилом css на комірці. Підпис під кожною називає, що перемогло.
HTML
<div class="grid">
<figure>
<table>
<thead><tr><th class="tall">висока шапка</th></tr></thead>
<tfoot><tr><td>підсумок</td></tr></tfoot>
</table>
<figcaption>без атрибута — типове <code>middle</code></figcaption>
</figure>
<figure>
<table>
<thead><tr><th class="tall">висока шапка</th></tr></thead>
<tfoot valign="bottom"><tr><td>підсумок</td></tr></tfoot>
</table>
<figcaption><code><tfoot valign="bottom"></code> — вміст унизу</figcaption>
</figure>
<figure>
<table>
<thead><tr><th class="tall">висока шапка</th></tr></thead>
<tfoot valign="bottom"><tr><td valign="top">підсумок</td></tr></tfoot>
</table>
<figcaption>комірка з власним <code>valign="top"</code> перебиває групу</figcaption>
</figure>
<figure>
<table class="css-wins">
<thead><tr><th class="tall">висока шапка</th></tr></thead>
<tfoot valign="bottom"><tr><td>підсумок</td></tr></tfoot>
</table>
<figcaption>правило css перебиває атрибут без <code>!important</code></figcaption>
</figure>
<figure>
<table>
<thead><tr><th class="tall">висока шапка</th></tr></thead>
<tfoot valign="chucknorris"><tr><td>підсумок</td></tr></tfoot>
</table>
<figcaption>хибне значення — мовчки типове <code>middle</code></figcaption>
</figure>
</div>CSS
.grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
figure {
margin: 0;
max-width: 180px;
}
table {
border-collapse: collapse;
width: 170px;
}
th,
td {
padding: 4px 8px;
border: 1px solid #b9c6d8;
text-align: left;
}
th.tall {
height: 96px;
background: #eef4ff;
color: #5a6472;
font-weight: 400;
vertical-align: top;
}
tfoot td {
height: 96px;
background: #f6f9ff;
color: #1d3a6b;
font-weight: 700;
}
/* один рядок css сильніший за атрибут у розмітці */
.css-wins tfoot td {
vertical-align: top;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font-size: .85rem;
line-height: 1.4;
}
code {
background: #eef4ff;
border-radius: 3px;
padding: 0 4px;
}Найпростіший приклад використання HTML атрибута valign теґа <tfoot>
HTML
<p>Вибери потрібне значення для <code>valign</code>:
<select onchange="ChangeVAlign (this);" >
<option >baseline</option>
<option />bottom
<option selected="selected" />middle
<option />top
</select>
</p>
<hr>
<p>З використанням атрибуту valign</p>
<table border="0" cellpadding="5" cellspacing="3">
<tbody >
<tr>
<th colspan="4" >
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</tbody>
<tbody align="left" >
<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>
<tfoot id="tdToChange" height="70">
<tr>
<th colspan="4" height="70">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2" height="70">35</th>
<th colspan="2" height="70">40</th>
</tr>
</tfoot>
</table>
<br>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
Атрибут тега <tfoot> більше не підртимується в HTML5. Використовуйте CSS властивість vertical-align. Наприклад: <tfoot style="vertical-align:bottom">
Коментарі
Коментарів ще немає — будьте першим!