x
 
↑
Февраль
2 •
4 •

4 •

14 •
5 •
↓
Михаил Танский
21 февраля 2013

Как наиболее простым способом сверстать такую таблицу, с учётом того что данные приходят автоматически и нет возможности руками расставлять их?

Простого способа выровнять текст в ячейке по запятой всё ещё нет.

В ХТМЛ 4 такое поведение предусмотрено — в спецификации выравнивание по произвольному символу в столбце задаётся с помощью атрибутов align и char у тега col:

<table border="1">
  <colgroup>
    <col> <col align="char" char=".">
  <thead>
    <tr>
      <th>Vegetable <th>Cost per kilo
  <tbody>
    <tr>
      <td>Lettuce <td>$1
    <tr>
      <td>Silver carrots <td>$10.50
    <tr>
      <td>Golden turnips <td>$100.30
</table>

Но в большинстве браузеров это не работает до сих пор. А в ХТМЛ 5 align и char вообще запрещены. Остаётся или на сервере, или Яваскриптом в браузере как-то разметить цифры и стилизовать их в ЦСС. Как вариант, добавить целым числам невидимые нолики.

Я протестировал несколько готовых решений и советую использовать джейквери-плагин Брема Штайна. Привяжите скрипт:

<script src="jquery.text-align.js"></script>

И укажите столбец для выравнивания, например, второй:

$('td:nth-child(2)', '#vegetable-table').textAlign(',');</script>
Товар Цена, Р
Яблоко 47,86
Морковь 100
Репчатый лук 7,5
Банан 35
Памело 199,99

Обработайте все столбцы:

function textAlignAllCols (table) {
  table.each(function () {
    var colsSize = $('tr:first > *', this).size();
    for (var i = 1; i <= colsSize; i++) {
      $('td:nth-child(' + i +')', this).textAlign(',');
    }
  });
}
textAlignAllCols($('#tansky-table'));
600 000,42 65 000,42 535 000,91 100 000
75 000 9 750 75 250,72 65 250,42
50 000 50 000 50 000,42 70 000,22 50 000
120 000 15 600,42 143 400,10 103 400

Обратите внимание на полупробелы между разрядами, здесь они расставлены тоже автоматически.

P. S.
Советам о разработке веб-интерфейсов исполнился один год! Присылайте вопросы.

Поделиться
Отправить

Комментарии
Вячеслав Пучкин
21 февраля 2013

На мой взгляд, плохой является уже сама идея выравнивания по запятой, ведь, если показывать дробную часть у одного из чисел столбца, по которому идёт сравнение, надо показывать дробную часть и у всех остальных чисел этого столбца, пусть даже это будет «.00». Таким образом облегчается чтение данных.

Интересно мнение Артёма и Ильи.
Алексей Рытов
21 февраля 2013

Не всегда, но бывает полезно добавить серые нолики после запятой. Помимо быстрого решения выравнивания это дает равномерный правый край, что помогает глазу зацепиться, а не метаться по неровным строчкам, как в приведенных примерах.
Александр Благочевский
21 февраля 2013

Можно все числа выводить с десятичными нулями и выравнивать по правому краю, но для эстетики «,00» красить в цвет фона. Мне правда не кажется, что в данном случае это выглядит особо эстетично. Какие-то зигзаги чисел.
Роман Кузнецов
24 февраля 2013

Считаю, что в данной ситуации велосипед изобретать не надо. Таблицу по всем цифрам формировать с десятичными знаками. Может и неэстетично, но лучше воспринимается при чтении

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
1 • 4 • 2 • 3 •




Недавно всплыло

Через квартал позвонил заказчик и спросил, может ли он использовать одну из непринятых концепций 4 • Кто клиент? 1 • 1 • Диаграмма футбольных трансферов. Результат 5 •