Выравнивание текста в таблице с помощью 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 css вам может потребоваться добавить дополнение, чтобы ячейки не были заполнены: 0 и не показывали никакого выравнивания.

Answer 2

установить различные классы по каждому тд элемент

<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 3

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

td { 
    text align: left; 
} 

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

Но :first-child: doesn’t work in 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> с в этой таблице:

<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 4

Это легко. Создать класс 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 5

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 6

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

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

Answer 7

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

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

Answer 8

Использование

<col align=right> 

внутри <table> элемента правой кнопкой выравнивать первый столбец на IE, и

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

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

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