Атрибут char тега <colgroup> — вирівнювання чисел
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<colgroup char="character">Атрибут char може отримувати єдине значення:
-
character -
Cимвол для вирівнювання вмісту.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | — | — | 12–79 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | — |
Приклади
+ запропонувати свій приклад у пісочниці
align="char" разом із char="." на групі колонок colgroup мав вирівнювати числа по десятковій крапці. Жоден великий браузер цього так і не реалізував — верхня таблиця виглядає звичайно. Нижня показує задуманий результат засобами CSS: у сучасному коді роби саме так.
HTML
<p>З атрибутом на colgroup (браузери його ігнорують):</p>
<table>
<colgroup></colgroup>
<colgroup align="char" char="."></colgroup>
<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;
}Обидві таблиці мають однакові дані. У першої прописано char="." і align="char" — браузер їх просто не бачить. У другої те саме завдання виконує CSS, і числа нарешті шикуються по роздільнику.
HTML
<h3>1. <code>char="."</code> — не робить нічого</h3>
<table>
<colgroup>
<col>
<col align="char" char=".">
</colgroup>
<tr><th>Позиція</th><th>Сума</th></tr>
<tr><td>Клавіатура</td><td>1250.00</td></tr>
<tr><td>Миша</td><td>480.50</td></tr>
<tr><td>Килимок</td><td>99.90</td></tr>
</table>
<h3>2. Те саме через CSS</h3>
<table>
<tr><th>Позиція</th><th class="num">Сума</th></tr>
<tr><td>Клавіатура</td><td class="num">1250.00</td></tr>
<tr><td>Миша</td><td class="num">480.50</td></tr>
<tr><td>Килимок</td><td class="num">99.90</td></tr>
</table>CSS
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
table { border-collapse: collapse; }
th, td { border: 1px solid #bbb; padding: .35em .8em; text-align: left; }
.num { text-align: right; font-variant-numeric: tabular-nums; }Різниця між HTML 4.01 та HTML5
Атрибут char тега <colgroup> більше не підртимується в HTML5.
Коментарі
Коментарів ще немає — будьте першим!