Better way to right align text in HTML Table

Question

I have an HTML table with large number of rows, and I need to right align one column.

I know the following ways,

..

        

Answer 1

The current draft of CSS Selectors Level 4 specifies structural selectors for grids. If implemented, we will be able to do things like:

th.price,
th.price || td {
    text-align: right;
}

Of course, that doesn't help us today -- the other answers here offer enough practical advice for that.

Answer 2

Looking through your exact question to your implied problem:

Step 1: Use the class as you described (or, if you must, use inline styles).

Step 2: Turn on GZIP compression.

Works wonders ;)

This way GZIP removes the redundancy for you (over the wire, anyways) and your source remains standards compliant.

Answer 3

Use jquery to apply class to all tr unobtrusively.

$(”table td”).addClass(”right-align-class″);

Use enhanced filters on td in case you want to select a particular td.

See jquery

Answer 4

To answer your question directly: no. There is no more simple way to get a consistent look and feel across all modern browsers, without repeating the class on the column. (Although, see below re: nth-child.)

The following is the most efficient way to do this.

HTML:

<table class="products">
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">10.00</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td class="price">11.45</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

CSS:

table.products td.price {
  text-align: right;
}

nth-child is now supported by 96% of the browsers, what is below is now 11 years old!

Why you shouldn't use nth-child:

The CSS3 pseudo-selector, nth-child, would be perfect for this -- and much more efficient -- but it is impractical for use on the actual web as it exists today. It is not supported by several major modern browsers, including all IE's from 6-8. Unfortunately, this means that nth-child is unsupported in a significant share (at least 40%) of browsers today.

So, nth-child is awesome, but if you want a consistent look and feel, it's just not feasible to use.

Answer 5

if you have only two "kinds" of column styles - use one as TD and one as TH. Then, declare a class for the table and a sub-class for that table's THs and TDs. Then your HTML can be super efficient.

Answer 6

You could use the nth-child pseudo-selector. For example:

table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

Then in your table do:

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

Edit:

Unfortunately, this only works in Firefox 3.5. However, if your table only has 3 columns, you could use the sibling selector, which has much better browser support. Here's what the style sheet would look like:

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

This will match any column preceded by two other columns.