Атрибут char тега <col>

Описание

Атрибут char для тега <col> позволяет задать символ, относительно которого будет выравниваться содержимое ячеек столбца. Этот атрибут работает в сочетании с атрибутом align="char" и предназначен в основном для выравнивания числовых данных по десятичной точке или другому символу.

Пример использования:
<table border="1" width="300px"> <colgroup> <col align="char" char="."> </colgroup> <tr> <th>Финансовые показатели</th> </tr> <tr> <td>1,245.50</td> </tr> <tr> <td>98.75</td> </tr> <tr> <td>1,000.00</td> </tr> </table>

Особенности работы:

Параметр Описание Примечание
Обязательное сочетание Требуется align="char" Без этого атрибута char не работает
Типовые символы Чаще всего точка (.) или запятая (,) Зависит от локали
Поддержка браузерами Ограниченная Многие современные браузеры игнорируют

Рекомендации по использованию:

  • Используйте только для таблиц с числовыми данными
  • Учитывайте локаль пользователя (разделитель дробной части)
  • Для важных проектов применяйте CSS-решения
  • Тестируйте в целевых браузерах
  • Сочетайте с charoff для смещения от края

Пример с CSS вместо атрибута char:

<style> .decimal-align { text-align: right; font-variant-numeric: tabular-nums; } /* Дополнительные стили для лучшего выравнивания */ </style> <table> <colgroup> <col class="decimal-align"> </colgroup> <tr> <td>1,234.56</td> </tr> </table>

Важные замечания:

  • Атрибут char считается устаревшим в HTML5
  • Поддержка браузерами неполная и непоследовательная
  • Не работает для центрированного или выровненного по ширине текста
  • Для сложных случаев используйте JavaScript-библиотеки
  • Влияет только на первую строку текста в ячейке

Пример с разными символами выравнивания:

<table border="1"> <colgroup> <col align="char" char="."> <col align="char" char=":"> </colgroup> <tr> <td>12.34</td> <td>10:30</td> </tr> <tr> <td>5.67</td> <td>15:45</td> </tr> </table>

Примечание: Хотя концепция выравнивания по символу полезна для табличных данных, современные веб-технологии предлагают более надёжные альтернативы через CSS и JavaScript для достижения аналогичного результата с лучшей кросс-браузерной поддержкой.