Атрибут char тега <th> — вирівнювання по символу
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<th char="character">Атрибут char може отримувати єдине значення:
-
character -
Визначає символ для вирівнювання вмісту в комірці
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| — | — | — | — | 12–79 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| — | — | — | — |
Приклади
+ запропонувати свій приклад у пісочниці
align="char" із char="M" мав вирівнювати вміст заголовної комірки по літері M. Браузери char не реалізували — th виглядає звичайно; для чисел у сучасному коді використовують CSS-вирівнювання, як у нижній таблиці.
HTML
<p>З атрибутом (браузери його ігнорують):</p>
<table>
<tr><th align="char" char="M">Місяць</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="." — числа стоять як стояли, бо атрибута не реалізував жоден браузер. Права робить те саме сучасно: text-align: right, font-variant-numeric: tabular-nums і однакова кількість знаків після коми.
HTML
<div class="pair">
<table>
<caption>char="." — не змінює нічого</caption>
<tr><th>Товар</th><th align="char" char=".">Ціна</th></tr>
<tr><td>Кабель</td><td align="char" char=".">7.5</td></tr>
<tr><td>Монітор</td><td align="char" char=".">1249.99</td></tr>
<tr><td>Мишка</td><td align="char" char=".">399.9</td></tr>
</table>
<table class="num">
<caption>text-align: right + tabular-nums</caption>
<tr><th>Товар</th><th>Ціна</th></tr>
<tr><td>Кабель</td><td>7.50</td></tr>
<tr><td>Монітор</td><td>1249.99</td></tr>
<tr><td>Мишка</td><td>399.90</td></tr>
</table>
</div>CSS
.pair { display: flex; gap: 22px; flex-wrap: wrap; }
table { border-collapse: collapse; }
caption { font-size: 13px; color: #555; padding-bottom: 6px; }
th, td { border: 1px solid #ccc; padding: 4px 10px; }
.num th + th, .num td + td { text-align: right; font-variant-numeric: tabular-nums; }Різниця між HTML 4.01 та HTML5
Атрибут char для тега <th> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!