Учебник по программированию на HTML

HTML в примерах

Выравнивание в числовых таблицах

Для многих людей таблицы — это таблицы числовых данных, но таблицы также хорошо могут представлять и другие данные.

Для числовых таблиц соответствующее выравнивание обычно важно для формирования легко читаемого представления.

Целые значения чисел в столбцах должны быть выровнены по правому краю. Этого, в принципе, добиться несложно. Существует два варианта:

  • использование атрибута "ALIGN=RIGHT" в каждом элементе TD, или
  • использование атрибута "ALIGN=RIGHT" в каждом элементе TR и перекрытие их атрибутами "ALIGN=LEFT" или "ALIGN=CENTER" в элементах TH, если это надо.

Числа, содержащие десятичную точку (или во многих языках — запятую) должны быть выровнены согласно этому правилу, что, к сожалению, невозможно в HTML 3.2. (Известны попытки удовлетворения подобных запросов, однако на сегодня мало кто поддерживает их.) Существует, правда, один вариант решения — представлять такие значения так, чтобы в каждой колонке справа от десятичной точки было одно и то же количество цифр и использовать при этом "ALIGN=RIGHT".

Однако, отображение может получиться неудовлетворительным, если цифры используют пропорциональные шрифты, где размеры цифр существенно отличаются. Возможно, но очень утомительно, исправить это укладыванием данных в каждую ячейку с использованием элемента TT. (Заметьте, что внутри элемента TT запрещено использование элемента TABLE!)

Нижеследующие примеры содержат вручную отформатированную таблицу, представленную с использованием элемента PRE, а затем для тех же данных используется элемент TABLE. В общем, для использования элемента TABLE требуется больше работы и внимания, однако результаты зачастую много лучше.

Measurement results:
<PRE>
time temperature pressure
12:00 26 12.8
12:15 22.5 9.8
12:30 11 1.65
12:45 3.3 0.03
13:00 0.05 0.002
</PRE>
<TABLE>
<CAPTION>Measurement results</CAPTION>
<TR><TH>time</TH><TH>temperature</TH><TH>pressure</TH></TR>
<TR ALIGN=RIGHT><TD>12:00 </TD><TD>26.00 </TD><TD>12.800 </TD></TR>
<TR ALIGN=RIGHT><TD>12:15 </TD><TD>22.50 </TD><TD> 9.810 </TD></TR>
<TR ALIGN=RIGHT><TD>12:30 </TD><TD>11.00 </TD><TD> 1.650 </TD></TR>
<TR ALIGN=RIGHT><TD>12:45 </TD><TD> 3.30 </TD><TD> 0.030 </TD></TR>
<TR ALIGN=RIGHT><TD>13:00 </TD><TD> 0.05 </TD><TD> 0.002 </TD></TR>
</TABLE>

Выравнивание в числовых таблицах

Рис. Примеры на web-странице.