Выравнивание текста в таблице с помощью CSS

Question

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

Вот HTML:

<table>
 <tr><td>Previous:</td><td>Link 1</td></tr>
 <tr><td>Next:</td><td>Link 2</td></tr>     
</table>

Как бы я это сделал?

Answer 1

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

CSS

.alignright { text-align: right; }
.alignleft { text-align: left; }

HTML

<td class="alignright"> </td>
<td class="alignleft"> </td>

Вы можете пойти дальше, добавив отступы, поля и дополнительные классы. В зависимости от вашей таблицы TABLE может потребоваться добавить некоторые отступы, чтобы не все ячейки были заполнены: 0 и не показывали выравнивание.

Answer 2

Вы можете использовать :first-child, чтобы нацелить ячейки в первом столбце:

td {
    text align: left;
}

td:first-child {
    text-align: right;
}

Но :first-child: не работает в IE 6 , поэтому вы можете добавить класс к ячейкам в первом столбце и использовать его вместо этого:

<table>
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

td {
    text align: left;
}

td.first {
    text-align: right;
}

Как написано, это будет применяться ко всем <td> элементам, поэтому вы можете также добавить класс в вашу таблицу и ограничить стили до <td> s в этой таблице:

<table class="simple">
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

table.simple td {
    text align: left;
}

table.simple td.first {
    text-align: right;
}

Answer 3

В качестве альтернативы и учитывая ваш сценарий, и если вы можете - почему бы вам не заменить <td> во втором столбце на <th>, и тогда CSS будет действительно простым:

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

Answer 4

установить разные классы для каждого элемента td

<style>
    td.raligned {text-align: right;} 
    td.leftaligned {text-align: left;} 
</style>

<table>
    <tr>
        <td class="raligned">blah</td>
        <td class="leftaligned">blah</td>
    </tr>
</table>

Answer 5

Используйте

<col align=right>

внутри элемента <table> для выравнивания по правому краю первого столбца в IE и

td:first-child { text-align: right; }

сделать то же самое в браузерах, более соответствующих стандартам.

Ячейки данных (td элементы) по умолчанию выровнены по левому краю, поэтому вам не нужно ничего делать со вторым столбцом.

Answer 6

HTML

<table>
   <tr>
     <td class="right-align">Previous:</td>
     <td class="left-align">Link 1</td>
   </tr>
   <tr>
     <td class="right-align">Next:</td>
     <td class="left-align">Link 2</td>
   </tr>     
</table>​

И ваша таблица стилей ..

td.right-align {
    text-align: right;
}

td.left-align {
    text-align: left;
}

Answer 7

Это легко.Создайте класс CSS

<style>
.aleft {text-align: left;}
.aright {text-align: right;}
</style>

Теперь добавьте классы в таблицу, это просто.

<table>
<tr><td class="aright">Previous:</td><td>Link 1</td></tr>
<tr><td class="aleft">Next:</td><td>Link 2</td></tr>     
</table>

Answer 8

Лично я бы порекомендовал не использовать таблицы и использовать CSS-решение, о котором говорится, что это опция jsfiddle. в основном то же самое, что говорили другие, но с помощью jsfiddle вы можете манипулировать им и вносить изменения, чтобы вы могли видеть их немедленно.

http://jsfiddle.net/rhoenig/rnAVH/