Атрибут char тега <thead> — вирівнювання по символу
Атрибут char HTML тега <thead> не підтримуються в HTML5.
Атрибут char вказує вирівнювання вмісту всередині елемента <thead> по символу.
Ця можливість може стати в нагоді для вирівнювання колонки чисел по точці або комі.
Атрибут char може бути використаний тільки в разі, якщо атрибут align встановлений в положення "char".
Без задання значення атрибуту char - це десяткововий дріб поточного мови.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<thead char="character">Атрибут char може отримувати єдине значення:
-
character -
Визначає символ для вирівнювання вмісту.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | — | — | 12–79 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | — |
Приклади
+ запропонувати свій приклад у пісочниці
align="char" разом із char="." на секції thead (діяв би на всі її комірки) мав вирівнювати числа по десятковій крапці. Жоден великий браузер цього так і не реалізував — верхня таблиця виглядає звичайно. Нижня показує задуманий результат засобами CSS: у сучасному коді роби саме так.
HTML
<p>З атрибутом на thead (браузери його ігнорують):</p>
<table>
<thead align="char" char=".">
<tr><th>Місяць</th><th>Витрати</th></tr>
</thead>
<tbody>
<tr><td>Січень</td><td>1250.50</td></tr>
<tr><td>Лютий</td><td>7.25</td></tr>
</tbody>
<tfoot>
<tr><td>Разом</td><td>1257.75</td></tr>
</tfoot>
</table>CSS
table {
border-collapse: collapse;
margin-bottom: 12px;
}
td, th {
border: 1px solid #0172ad;
padding: 4px 8px;
min-width: 100px;
}
/* симуляція вирівнювання по крапці: числа з однаковою
кількістю знаків після крапки + вирівнювання праворуч */
.sim td:last-child {
text-align: right;
font-variant-numeric: tabular-nums;
}Три таблиці з тими самими числами. Перша — з align="char" і char=",": браузер не робить нічого, заголовок лишається по центру. Друга — сучасний рецепт: правий край плюс tabular-nums. Третя показує межу цього рецепта: поки в числах різна кількість знаків після коми, коми не збігаються, а з доповненням нулями — збігаються.
HTML
<table class="t1">
<caption>1. align="char" char="," — не діє нічого</caption>
<thead align="char" char="," charoff="50">
<tr><th>Товар</th><th>Ціна</th></tr>
</thead>
<tbody align="char" char=",">
<tr><td>Олівець</td><td>7,5</td></tr>
<tr><td>Ноутбук</td><td>1249,99</td></tr>
<tr><td>Зошит</td><td>32,4</td></tr>
</tbody>
</table>
<table class="t2">
<caption>2. text-align: right + font-variant-numeric: tabular-nums</caption>
<thead>
<tr><th>Товар</th><th class="num">Ціна</th></tr>
</thead>
<tbody>
<tr><td>Олівець</td><td class="num">7,5</td></tr>
<tr><td>Ноутбук</td><td class="num">1249,99</td></tr>
<tr><td>Зошит</td><td class="num">32,4</td></tr>
</tbody>
</table>
<table class="t2">
<caption>3. Те саме, але дробову частину доповнено нулями — коми збіглися</caption>
<thead>
<tr><th>Товар</th><th class="num">Ціна</th></tr>
</thead>
<tbody>
<tr><td>Олівець</td><td class="num">7,50</td></tr>
<tr><td>Ноутбук</td><td class="num">1249,99</td></tr>
<tr><td>Зошит</td><td class="num">32,40</td></tr>
</tbody>
</table>CSS
table {
width: 100%;
max-width: 420px;
margin-bottom: 22px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 5px 10px;
border: 1px solid #b9c6d8;
}
thead th {
background: #eef3fb;
}
.t1 caption {
color: #c0392b;
}
.t1 {
outline: 2px dashed #d64545;
outline-offset: 3px;
}
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}Різниця між HTML 4.01 та HTML5
Атрибут char тега <thead> більше не підртимується в HTML5.
Коментарі
Коментарів ще немає — будьте першим!