html тег <td> атрибут charoff

Атрибут charoff зміщує текст у комірках на вказану відстань від символу встановленому в атрибуті char.

Атрибут charoff може бути використаний тільки якщо зазначений атрибут char та аlign атрибут має значення "char".

автор: NagarD

Синтаксис

<td charoff="number">

Атрибут charoff може отримувати єдине значення:

number

Визначає вирівнювання. Позитивне число вказує вирівнювання праворуч від символу. Негативні числа задає вирівнювання зліва від символу.

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	0	0	0	0	0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

charoff="2" на комірках td мав відсувати точку вирівнювання (десяткову крапку з char=".") на два символи від краю комірки. Браузери родину char/charoff так і не реалізували — верхня таблиця виглядає звичайно, а нижня симулює задуманий результат через CSS (padding-right: 2ch).

HTML

<p>З атрибутом (браузери його ігнорують):</p>
<table>
    <tr><th>Місяць</th><th>Витрати</th></tr>
    <tr><td>Січень</td><td align="char" char="." charoff="2">1250.50</td></tr>
    <tr><td>Лютий</td><td align="char" char="." charoff="2">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;
}

/* симуляція charoff="2": точка вирівнювання за 2 символи від краю */
.sim td:last-child {
    padding-right: calc(8px + 2ch);
}

автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут charoff для тега <td> не підтримується у HTML5.

Різниця між XHTML та HTML

Коментарі

Коментарів ще немає — будьте першим!