Как выровнять текст в таблице по столбцам?

Question

[Юрий Лобанов]

Здравствуйте!

В таблицах данные лучше выравнивать по столбцам: текст по левому краю, числа по правому (или по точке).

В html есть тег col, он бы прекрасно подошел, так как таблицы все разные и все равно придется прописывать руками выравнивание, однако как раз выравнивание в нем не поддерживается тем же ff.
htmlbook.ru/html/col/align
Данный пример не будет работать в ff, текст остается по левому краю.
jsfiddle.net/iiil/jkCUz

Поступить можно по-разному, прописывать выравнивание для каждой ячейки (или присвоить класс каждой ячейке) - это тоже вариант, так как в том же DW это делать очень быстро в режиме визуального редактирования; написать скрипт на js/jq, который будет брать данные из тегов col и распространять их на все ячейки.

Но, может, я что-то не знаю, и есть способ проще? Да, нужна поддержка ie7 :)

Или, возможно, есть готовые библиотеки, где, скажем, в теге th прописываешь выравнивание, а он распространяет его на все td под этим заголовком? Так как волнуется только визуальная часть, хотелось бы обойтись без огромных библиотек по работе с табличными данными.

Буду рад советам.

Answer 1

[whats]

Про братский селектор все забыли

table tr td{
  text-align: right;
}
table tr td ~ td{
  text-align: left;
}

Comments

[whats]

jsfiddle.net/jkCUz/6

Answer 2

[Yago]

Выравнивайте через css:

/*выравнивание первой колонки таблицы */
table tr td{
  text-align:center;
}
/*выравнивание второй колонки таблицы */
table tr td+td{
  text-align:right;
}

Comments

[Юрий Лобанов]

Спасибо. Но /*выравнивание второй колонки таблицы */ должно звучать как /*выравнивание со второй по последнюю колонки таблицы */
Хороший вариант, но представьте себе такой вариант (текстом в ячейках написаны выравнивания.
jsfiddle.net/iiil/jkCUz/2

[Yago]

Я написал пример под конкретную задачу. Естественно его необходимо адаптировать под нужды. Весь смысл заключается в использовании css-селекторов для таблицы, и вариантов реализаций тут бесконечное множество.

[Юрий Лобанов]

@Yago понимаете, таблицы разношерстные, и их много. В одной 10 колонок, в другой три. В одной все кроме первого столбца должны быть по правому краю, в другой через раз - по левому, по правому. Получается, что придется использовать для каждого типа таблиц свой класс + прописывать все стили. Но, повторяю, спасибо за совет. Можно использовать например так: jsfiddle.net/iiil/jkCUz/4 и это может решить некоторые вопросы.

[whats]

@iiil То есть вы хотите что бы браузер определял какой тип стоит в ячейке и подставлял нужное выравнивание ?

[Юрий Лобанов]

@whats нет. Я бы хотел давать эту информацию браузеру сам. Как - я писал выше: присваивать класс заголовку, заполнять теги col или просто выравнивать верхнюю ячейку, а остальные выравнивались бы сами.

[whats]

Тогда тут подойдет обычное переопределение свойств
table td {
text-align: left;
}
table td.xxx {
text-align: right;
}

[Юрий Лобанов]

@whats я очень ценю помощь, но Вы внимательно читали вопрос? Таблица в примере и на картинке - они банальные, простые. Представьте таблицу в 10 столбцов и 10 строк. Ячеек у такой таблицы 100. Повторяю, ничего не стоит по умолчанию сделать отбивку вправо, а для некоторых столбцов (точнее для каждой ячейки в столбце) прописать класс и сделать отбивку влево в нем. Но этот способ не кажется самым быстрым и правильным. Повторяю, идеальным вариантом было бы использование col, если бы не поддержка.

[whats]

@iiil я понял о чем вы, тут только небольшой скрипт на javascript поможет.

[Юрий Лобанов]

@whats на данный момент склоняюсь к этому же. Написать скрипт с работой через дата-атрибуты. Может замахнусь на маленькую библиотеку, которая работает с таблицей по столбцам, хотя бы для собственного использования.

[whats]

@iiil jsfiddle.net/jkCUz/6

[Юрий Лобанов]

@whats дада, что-нибудь такое. Думаю, что все же перепишу потом, но если дополните или измените свой ответ этой ссылкой - отмечу решением. Спасибо.

[whats]

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

Answer 3

[Назар Мокринский]

table td:nth-of-type(2n) {
    text-align: left;
}
table td:nth-of-type(2n + 1) {
    text-align: right;
}

Для двух колонок

Comments

[Юрий Лобанов]

У псевдокласса nth-of-type довольно низкая поддержка. Но заманчиво использовать в виду простоты.. Возможно для ie7-8 просто забью и поставлю выравнивание по левому краю. Спасибо.

Answer 4

[Алексей Карагодников]

table tr td{
  text-align: right;
}
table tr td:first-child{
  text-align: left;
}

Первая колонка выравнена по левому краю, остальные по правому. Поддержка first-child браузерами.