CODEWITHSUNDEEP
htmlcsshtml-table
Garry Pettet
Garry Pettet

Reputation: 8290

Aligning text in a table with CSS

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'm sure this is really easy but I just can't figure it out.

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 would I do this?

Upvotes: 6

Views: 27748

Answers (8)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Use

<col align=right>

inside the <table> element, to right-align the first column on IE, and

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

to do the same on more standards-conforming browsers.

Data cells (td elements) are left-aligned by default, so you need not do anything with the second column.

Upvotes: 1

krystan honour
krystan honour

Reputation: 6783

set different classes on 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>

Upvotes: 2

Paul D. Waite
Paul D. Waite

Reputation: 98786

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

td {
    text align: left;
}

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

But :first-child: doesn’t work in IE 6, so you might want to add a class to the cells in the first column, and use that 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 will apply to all <td> elements, so you might also want to add a class to your table and limit the styles to <td>s in that 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;
}

Upvotes: 4

Robert
Robert

Reputation: 3074

Personally I would recommend not using tables and use a CSS solution that being said here's a jsfiddle option. basically the same as other have said but with jsfiddle you can manipulate it and make changes so you can see them immediately.

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

Upvotes: -2

Barry Kaye
Barry Kaye

Reputation: 7761

As an alternative and given your scenario and if you are able to - why don't you replace the <td>'s in your second column with <th>'s and then the CSS will be really simple:

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

Upvotes: 3

user1211577
user1211577

Reputation:

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

Upvotes: 1

rodboc
rodboc

Reputation: 175

It's easy. Create a class of CSS

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

Now add the 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>

Upvotes: 1

SMacFadyen
SMacFadyen

Reputation: 3165

I would use classes in this instance. You could get fancy but this is the best way for supporting.

CSS

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

HTML

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

You could go further by adding padding, margins and further classes. Depending on your TABLE css you might need to add some padding so that the cells aren't all padding: 0 and not showing any alignment.

Upvotes: 9

Related Questions