Атрибут char тега <tbody> — вирівнювання по символу
Атрибут char HTML тега <tbody> не підтримуються в HTML5.
Атрибут char тега <tbody> вказує вирівнювання вмісту всередині елемента <tbody> по символу.
Ця можливість може стати в нагоді для вирівнювання колонки чисел по точці або комі.
Атрибут char може бути використаний тільки в разі, якщо атрибут align встановлений в положення "char".
Без задання значення атрибуту char - це десяткововий дріб поточного мови.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<tbodychar="character">Атрибут char може отримувати єдине значення:
-
character -
Визначає символ для вирівнювання вмісту.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | — | — | 12–79 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | — |
Приклади
+ запропонувати свій приклад у пісочниці
align="char" разом із char="." на секції tbody (діяв би на всі її комірки) мав вирівнювати числа по десятковій крапці. Жоден великий браузер цього так і не реалізував — верхня таблиця виглядає звичайно. Нижня показує задуманий результат засобами CSS: у сучасному коді роби саме так.
HTML
<p>З атрибутом на tbody (браузери його ігнорують):</p>
<table>
<thead>
<tr><th>Місяць</th><th>Витрати</th></tr>
</thead>
<tbody align="char" char=".">
<tr><td>Січень</td><td>1250.50</td></tr>
<tr><td>Лютий</td><td>7.25</td></tr>
</tbody>
</table>
<p>Задуманий вигляд — симуляція засобами CSS:</p>
<table class="sim">
<tr><th>Місяць</th><th>Витрати</th></tr>
<tr><td>Січень</td><td>1250.50</td></tr>
<tr><td>Лютий</td><td>7.25</td></tr>
</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;
}Перша колонка задана застарілим способом — <tbody align="char" char=".">; браузер його не виконує, числа лишаються вирівняні як зазвичай. Друга показує спосіб через text-align: right і font-variant-numeric: tabular-nums — він тримає розряди, поки знаків після крапки однаково. Третя розбиває число на дві комірки й вирівнює завжди.
HTML
<table>
<thead>
<tr>
<th>align="char" char="."</th>
<th>right + tabular-nums</th>
<th colspan="2">Дві комірки</th>
</tr>
</thead>
<tbody align="char" char=".">
<tr><td>1234.5</td><td class="nums">1234.50</td><td class="int">1234</td><td class="frac">.50</td></tr>
<tr><td>7.25</td><td class="nums">7.25</td><td class="int">7</td><td class="frac">.25</td></tr>
<tr><td>110.7</td><td class="nums">110.70</td><td class="int">110</td><td class="frac">.7</td></tr>
<tr><td>0.125</td><td class="nums">0.125</td><td class="int">0</td><td class="frac">.125</td></tr>
</tbody>
</table>
<p class="note">Зверніть увагу на рядок <code>0.125</code> у другій колонці: знаків після крапки більше, ніж у сусідів, — і вирівнювання одразу зникає. Третій спосіб цього не боїться.</p>CSS
table { border-collapse: collapse; margin-bottom: 14px; }
th, td { border: 1px solid #bbb; padding: 4px 10px; }
th { background: #eee; font-weight: 600; }
.nums { text-align: right; font-variant-numeric: tabular-nums; }
.int { text-align: right; font-variant-numeric: tabular-nums; border-right: 0; padding-right: 0; }
.frac { text-align: left; font-variant-numeric: tabular-nums; border-left: 0; padding-left: 0; }
.note { border-left: 3px solid #c00; padding-left: 10px; color: #444; }Різниця між HTML 4.01 та HTML5
Атрибут char тега <tbody> більше не підртимується в HTML5.
Коментарі
Коментарів ще немає — будьте першим!