Атрибут char тега <col> — вирівнювання по символу
Атрибут char HTML тега <col> не підтримуються в HTML5.
Атрибут char вказує вирівнювання вмісту всередині елемента <col> по символу.
Ця можливість може стати в нагоді для вирівнювання колонки чисел по точці або комі.
Атрибут char може бути використаний тільки в разі, якщо атрибут align встановлений в положення "char".
Без задання значення атрибуту char - це десяткововий дріб поточного мови.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<col char="character">Атрибут char може отримувати єдине значення:
-
character -
Cимвол для вирівнювання вмісту.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | — | — | 12–79 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | — |
Приклади
+ запропонувати свій приклад у пісочниці
align="char" разом із char="." на колонці col мав вирівнювати числа по десятковій крапці. Жоден великий браузер цього так і не реалізував — верхня таблиця виглядає звичайно. Нижня показує задуманий результат засобами CSS: у сучасному коді роби саме так.
HTML
<p>З атрибутом на col (браузери його ігнорують):</p>
<table>
<col></col>
<col align="char" char="."></col>
<tr><th>Місяць</th><th>Витрати</th></tr>
<tr><td>Січень</td><td>1250.50</td></tr>
<tr><td>Лютий</td><td>7.25</td></tr>
</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;
}Одна таблиця, три колонки й чотири твердження одразу: align="char" з char="." на першій колонці не робить нічого, тло й ширина з <col> до комірок доходять, text-align із <col> — ні, а правильне вирівнювання дробів задано вже на самих комірках. Остання колонка показує розбиття числа на цілу й дробову частину.
HTML
<table>
<colgroup>
<col class="c1" align="char" char=".">
<col class="c2">
<col span="2" class="c3">
</colgroup>
<tr>
<th>align="char" на колонці</th>
<th>text-align з колонки</th>
<th colspan="2">правильно: по комірках</th>
</tr>
<tr><td>1249.99</td><td>1249.99</td><td class="whole">1249</td><td class="frac">,99</td></tr>
<tr><td>7.5</td><td>7.5</td><td class="whole">7</td><td class="frac">,50</td></tr>
<tr><td>310.05</td><td>310.05</td><td class="whole">310</td><td class="frac">,05</td></tr>
</table>
<p class="note">Тло й ширина першої колонки прийшли з <col> — ці дві речі
переглядач звідти бере. Вирівнювання не прийшло ні з атрибута char,
ні з text-align на <col>, тому обидві перші колонки лишилися
притиснутими ліворуч.</p>CSS
table {
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.c1 {
width: 190px;
background: #fdf3e2;
text-align: right;
}
.c2 {
width: 170px;
text-align: right;
}
td,
th {
padding: 5px 10px;
border: 1px solid #b9c6d8;
}
th {
background: #eef3fb;
font-size: .9em;
}
.whole {
padding-right: 0;
border-right: none;
text-align: right;
}
.frac {
padding-left: 0;
border-left: none;
text-align: left;
}
.note {
max-width: 520px;
margin-top: 14px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут char тега <col> більше не підртимується в HTML5.
Коментарі
Коментарів ще немає — будьте першим!