Align text in a table with CSS

Question

I have a really simple table with two rows and two columns. I want the text in the first column to be right-aligned and the second column to be left-aligned. I am sure it is really easy, but I just can not understand.

Here's the HTML:

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

How can I do it?

Answer 1

I would use classes in this instance. You can get a fantasy, but this is the best way to support.

CSS

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

HTML

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

You can go further by adding padding, margins, and other classes. Depending on your TABLE css, you may need to add an add-on so that the cells are not filled: 0 and do not show any alignment.

Answer 2

You can use :first-child to target cells in the first column:

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

But :first-child : does not work in IE 6 , so you may need to add a class to the cells in the first column and use this instead:

 <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; } 

As written, this applies to all <td> elements, so you can also add a class to your table and restrict the <td> styles in this table:

 <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

Alternatively, and considering your scenario, and if you are able - why don't you replace the <td> in the second column with <th> , and then the CSS will be very simple:

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

Answer 4

set different classes for each td element

 <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

It is easy. Create a CSS Class

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

Now add classes to your table, it's easy.

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

And your stylesheet.

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

Answer 7

Using

 <col align=right> 

inside the <table> element to align the first column in IE, and

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

do the same on more standards-compliant browsers.

Data cells ( td ) are left-aligned by default, so you don’t have to do anything with the second column.

Answer 8

Personally, I would recommend not using tables and using a CSS solution that specifies the jsfiddle parameter here. basically the same as others, but with jsfiddle you can manipulate it and make changes so you can see them right away.

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