html тег <tfoot> атрибут align
Атрибут align HTML тега <tfoot> задає вирівнювання по горизонталі для всіх комірок в межах <tfoot>. Якщо потрібно застосувати різне вирівнювання для кожної клітинки, скористайтеся стилями або використовуйте атрибут align для елемента <td> чи<th>.
Загальний опис
автор: NagarD
- Нотатка
-
IE в таблицях не правильно трактує значення "justify". Замість вирівнювання по ширені, вміст буде вирівняний по центру.
автор: с3с - Нотатка
-
Жоден з основних браузерів не підтримує значення "char".
автор: с3с
Синтаксис
<tfoot align="left|right|center|justify|char">Атрибут align може отримувати 5 значень:
-
left -
Вирівнювання по лівому краю.
автор: с3с -
right -
Вирівнювання по правому краю.
автор: с3с -
center -
Вирівнювання по центру.
автор: с3с -
justify -
Вирівнювання по ширині (одночасно по правому і лівому краю).
автор: с3с -
char -
Вирівнювання по символу
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута align теґа <tfoot>
HTML
<p>Вибери потрібне значення для <code>align</code>:
<select id="form">
<option value="left" name="value">left</option>
<option value="center" name="value">center</option>
<option value="right" name="value">right</option>
<option value="justify" name="value">justify</option>
</select>
</p>
<nav id='text'>Текст комірки розташовано за замовчуванням</nav>
<hr>
<p>З використанням атрибуту align</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="table">
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
</table>
<br>
<p>Без використання атрибуту align</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{
width:30%;
}
th{
padding:10px;
border: 1px solid grey;
}
th,td{
padding:10px;
border: 1px solid grey;
}
caption{
font-size:10px;
}JS
var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');
var textArray = { 'left': 'Вирівнювання по лівій частині таблиці.',
'center': 'Вирівнювання по центру таблиці.',
'right': 'Вирівнювання по правій частині таблиці.',
'justify': 'Вирівнювання по ширині.' };
form.onchange = function () {
for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
if (form.options[i].selected == true) {
wrapper.align = form.options[i].value;
text.innerHTML = textArray[form.options[i].value];
}
}window.CP.exitedLoop(0);
};
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута align теґа <tfoot>
HTML
<h3>Приклад використання атрибуту align</h3>
<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 align="right">
<tr>
<th colspan="4">
Кількість (шт.)
</th>
</tr>
<tr>
<th colspan="2">35</th>
<th colspan="2">40</th>
</tr>
</tfoot>
</table>CSS
table{
width:100%;
}
th{
padding:10px;
border: 1px solid grey;
}
th,td{
padding:10px;
border: 1px solid grey;
}
caption{
font-size:10px;
}Різниця між HTML 4.01 та HTML5
Атрибут align тега <tfoot> більше не підртимується в HTML5. Використовуйте CSS властивість text-align. Наприклад: <tfoot style="text-align:right">
Коментарі
Коментарів ще немає — будьте першим!