aligning table columns differently

[ZeBozette]

Is there an easy way to set columns in a table to align differently? I have one column that contains a dollar value which I'd like right-aligned.
This is how I am doing it currently.
<style type="text/css">
<!-- .txtctr {text-align: center;} -->
</style>
and a sample row;
<tr class="txtctr">
<td><a href="SpecSheet.pdf">ItemName</a></td>
<td>infoA</td>
<td>infoB</td>
<td>infoC</td>
<td>infoD</td>
<td ><div align="right" >$349.65</div></td>
<td>infoF</td>
</tr>

Is there a better way than assigning the class to each row and using the div on the cell with the $$ ?

Thanks in advance
Boze

 

[Vragabond]

Unfortunately, with the exclusion of [tt]col[/tt] and [tt]colgroup[/tt] tags in current version of HTML (I do believe it is coming back in HTML5), there is no straightforward way to do it. Your best bet is to use sibling selectors:

   <style type="text/css">
     td + td + td + td + td + td { text-align: right; }
   </style>

This should make every sixth table cell align to the right. Of course, this will easily break if your column is not always the same column in succession, but still. I believe this works in all modern browsers, probably fails in IE6 though.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

Like Vrag says, there's no easy way to do this for a whole column.

If you need a method that will work in IE6, you'll need to add a class to the cell(s) in question:

<tr class="txtctr"> 
   <td><a href="SpecSheet.pdf">ItemName</a></td>
   <td>infoA</td>
   <td>infoB</td>
   <td>infoC</td>
   <td>infoD</td>
   <td class="money">$349.65</td>
   <td>infoF</td>
 </tr>

Then you can style it:

td.money { text-align: right }

Note that:
[ul][li]There's no need for a <div> inside the cell - you can apply the style direct to the <td>[/li]
[li]I've named the class to reflect the type of content, not the presentational effect I'm hoping to achieve. If I decide in future to display it in some different way, I won't have to rename the class.[/li]
[/ul]
It's a pain to add that class to a cell in every row, but maybe not too bad if you're generating the table dynamically rather than doing it by hand.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ZeBozette]

Thank you both! It was great help for someone just starting out.

Vrag - I had seen sibling selectors in other peoples coding but didn't know what they were called or how they worked. Now I have a phrase I can search and learn more about.

Chris - I hadn't thought of using a class for the td. Guess I wasn't sure how it works since there was a class with the tr which specified an alignment. And no, the table isn't dynamically generated. Just another thing to learn how to do eventually! I certainly think adding the class to the cells is better though than 'text align-right'

Thank you again. I appreciate the help.