Best IT Recipes

Best way to align text in an HTML table

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

I know the following ways:

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

and

 <tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

In both methods, I need to repeat the align or class parameter on each <tr> . (If there are 1000 lines, I should put align = 'right' or class = 'right-align-class' 1000 times.)

Is there an effective way to do this? Is there any direct way to say align the third column in all rows to the right?

+43
html css
Aug 26 '09 at 4:59
source share
10 answers

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

The following is the most effective 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; }

Why you should not use nth-child:

The CSS3 pseudo-selector, nth-child, would be ideal for this - and much more efficient - but it is not practical for use on a real network, as it exists today. It is not supported by several major modern browsers , including all IE from 6-8. Unfortunately, this means that nth-child is not supported in a significant proportion (at least 40%) of browsers today.

So nth-child is awesome, but if you want a consistent look, it is just not practical to use it.

+51
Aug 26 '09 at 6:16
source share

If this is always the third column, you can use this (assuming the table class is “products”). However, this is hacking, but not reliable if you add a new column.

 table.products td+td+td { text-align: right; } table.products td, table.products td+td+td+td { text-align: left; }

But honestly, the best idea is to use a class in each cell. The col element can be used to set the width, border, background, or visibility of a column, but not any other properties. The reasons discussed here .

+9
Aug 26 '09 at 12:11
source share

You can use the nth-child pseudo nth-child . 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 contains only 3 columns, you can use a selector that has much better browser support. Here's what the stylesheet looks like:

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

This will match any column preceded by two other columns.

+7
Aug 26 '09 at 5:14
source share

Looking through your exact question in your implied problem:

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

Step 2: Enable gzip compression.

It does wonders;)

In this way, GZIP removes redundancy for you (by wire, anyway), and your source remains compliant with the standard.

+3
Aug 26 '09 at 5:02
source share

A few years ago (in IE only days) I used the <col align="right"> , but I just tested it and it seems only IE:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> </head> <body> <table width="100%" border="1"> <col align="left" /> <col align="left" /> <col align="right" /> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> </body> </html>

Excerpt from www.w3schools.com . Of course, it should not be used (if for some reason you really didn’t aim at the IE rendering engine), but I thought it would be interesting to mention it.

Edit:

In general, I don’t understand how this tag is rejected. This would be very useful (at least for manual publishing of HTML).

0
Aug 26 '09 at 5:15
source share

This does not work in IE6, which may be a problem, but it will work in IE7 + and Firefox, Safari, etc. It aligns the third column to the right and all subsequent columns.

 td + td + td { text-align: right; } td + td + td + td { text-align: left; }
0
Aug 26 '09 at 12:10
source share

If you have only two “views” of column styles, use one of them as TD and one as TH. Then declare a class for the table and a subclass for this table TH and TD. Then your HTML can be super efficient.

0
Mar 19 '13 at 15:45
source share

What you really want here:

 <col align="right"/>

but Gecko doesn't seem to support this yet: an open bug for more than a decade .

(Geez, why can't Firefox support decent standards like IE6?)

-one
Aug 26 '09 at 5:37
source share

The <colgroup> and <col> tags that are inside the tables are for this purpose. If you have three columns in the table and you want to align the third, add this after your <table> :

  <colgroup> <col /> <col /> <col class="your-right-align-class" /> </colgroup>

along with the required CSS:

  .your-right-align-class { text-align: right; }

From W3:

Definition and use

  • The <col> defines attribute values ​​for one or more columns in the table.

  • The <col> is useful for applying styles to entire columns instead of repeating styles for each cell for each row.

-one
Jan 15 2018-12-15T00:
source share

Use jquery to apply the class to all tr ​​unobtrusively.

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

Use advanced filters on td if you want to select a specific td.

See jquery

-2
Aug 26 '09 at 5:03
source share


More articles:


All Articles