Лучший способ выравнивания текста по правому краю в таблице HTML

Question

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

Я знаю следующие способы,

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

и

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

В обоих методах я должен повторять параметр align или class для каждого тега <tr>. (Если есть 1000 строк, я должен поставить align = 'right' или class = 'right-align-class' 1000 раз.)

Есть ли эффективный способ сделать это? Есть ли прямой способ сказать, выровнять третий столбец во всех строках по праву?

Answer 1

Чтобы ответить на ваш вопрос напрямую: нет . Нет более простого способа получить единообразный внешний вид во всех современных браузерах без повторения класса в столбце. (хотя см. Ниже: nth-child.)

Ниже приведен наиболее эффективный способ сделать это.

HTML:

<table class="products">
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">10.00</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">11.45</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS:

table.products td.price {
  text-align: right;
}

Почему вы не должны использовать nth-child:

Псевдоселектор CSS3, nth-child, был бы идеальным для этого - и гораздо более эффективным - но это нецелесообразно для использования в реальной сети, как она существует сегодня. Он не поддерживается несколькими крупными современными браузерами , включая все IE 6-8. К сожалению, это означает, что nth-child не поддерживается в значительной доле (не менее 40%) браузеров сегодня.

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

Answer 2

Вы можете использовать псевдоселектор nth-child. Например:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Тогда в вашей таблице сделайте:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Edit:

К сожалению, это работает только в Firefox 3.5. Однако, если ваша таблица имеет только 3 столбца, вы можете использовать селектор брата, который гораздо лучше поддерживает браузер. Вот как будет выглядеть таблица стилей:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

Это будет соответствовать любому столбцу, которому предшествуют два других столбца.

Answer 3

Если это всегда третий столбец, вы можете использовать его (при условии, что таблица класса «products»). Хотя это немного странно и не очень надежно, если вы добавляете новый столбец.

table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

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

Answer 4

Просматривая ваш точный вопрос к вашей подразумеваемой проблеме:

Шаг 1. Используйте класс, как вы описали (или, если необходимо, используйте встроенные стили).

Шаг 2. Включите сжатие GZIP.

творит чудеса;)

Таким образом, GZIP устраняет для вас избыточность (по сети, в любом случае), и ваш источник остается совместимым со стандартами.

Answer 5

Текущий проект CSS-селекторов Уровень 4 определяет структурные селекторы для сеток. В случае реализации мы сможем сделать что-то вроде:

th.price,
th.price || td {
    text-align: right;
}

Конечно, это не помогает нам сегодня - другие ответы здесь предлагают достаточно практических советов для этого.

Answer 6

, если у вас есть только два «вида» стилей столбцов - используйте один как TD, а другой как TH. Затем объявите класс для таблицы и подкласс для TH и TD этой таблицы. Тогда ваш HTML может быть очень эффективным.

Answer 7

Теги <colgroup> и <col>, которые находятся внутри таблиц, предназначены для этой цели. Если в вашей таблице три столбца и вы хотите выровнять третий, добавьте это после открывающего тега <table>:

 <colgroup>
     <col />
     <col />
     <col class="your-right-align-class" />
 </colgroup>

вместе с необходимым CSS:

 .your-right-align-class { text-align: right; }

Из W3:

Определение и использование

• Тег <col> определяет значения атрибутов для одного или нескольких столбцов в таблице.

• Тег <col> полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки для каждой строки.

Answer 8

Это не работает в IE6, что может быть проблемой, но оно будет работать в IE7 + и Firefox, Safari и т. Д. Он выровняет 3-й столбец справа и все последующие столбцы слева.

td + td + td { text-align: right; }
td + td + td + td { text-align: left; }

Answer 9

То, что вы действительно хотите здесь, это:

<col align="right"/>

но похоже, что Gecko еще не поддерживает это: это была открытая ошибка уже более десяти лет .

(Боже, почему у Firefox не может быть достойной поддержки стандартов, такой как IE6?)

Answer 10

Несколько лет назад (в IE только дни) я использовал тег <col align="right">, но я только что протестировал его, и, похоже, это функция только для IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

Фрагмент взят с www.w3schools.com . Конечно, его не следует использовать (если только по какой-то причине вы нацелены только на движок рендеринга IE), но я подумал, что было бы интересно упомянуть об этом.

Edit:

• IE все еще поддерживает его .
• Firefox потерял поддержку в 3.5 .
• Safari, похоже, не поддерживает его, но в документации указано иное .

В целом, я не понимаю, почему я отказался от этого тега. Это может показаться очень полезным (по крайней мере, для публикации HTML вручную).