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     lt tr gt  lt td gt    lt  td gt  lt td gt    lt  td gt  lt td align  right  gt 10 00 lt  td gt  lt tr gt    and   lt tr gt  lt td gt    lt  td gt  lt td gt    lt  td gt  lt td class  right-align-class  gt 10 00 lt  td gt  lt tr gt    In both the methods  I have to repeat the align or class parameter on every  lt tr gt  tag   If there are 1000 rows  I have to put align  right  or class  right-align-class  1000 times    Is there any efficient way to do this   Is there any direct way to say  align the third column in all rows to right

User · Answer

A number of years ago  in the IE only days  I was using the  lt col align  right  gt  tag  but I just tested it and and it seems to be an IE only feature    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN       http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt       lt title gt Test lt  title gt   lt  head gt   lt body gt       lt table width  100   border  1  gt           lt col align  left    gt           lt col align  left    gt           lt col align  right    gt           lt tr gt               lt th gt ISBN lt  th gt               lt th gt Title lt  th gt               lt th gt Price lt  th gt           lt  tr gt           lt tr gt               lt td gt 3476896 lt  td gt               lt td gt My first HTML lt  td gt               lt td gt  53 lt  td gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt    The snippet is taken from www w3schools com  Of course  it should not be used  unless for some reason you really target the IE rendering engine only   but I thought it would be interesting to mention it   Edit    IE still supports it  Firefox has dropped support in 3 5  Safari does not seem to support it  but the documentation indicates otherwise    Overall  I don t understand the reasoning behing abandoning this tag  It would appear to be very useful  at least for manual HTML publishing

User · Answer

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

User · Answer

This doesn t work in IE6  which may be an issue  but it ll work in IE7  and Firefox  Safari etc  It ll align the 3rd column right and all of the subsequent columns left   td   td   td   text-align  right    td   td   td   td   text-align  left

User · Answer

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

User · Answer

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

User · Answer

What you really want here is    lt col align  right   gt    but it looks like Gecko doesn t support this yet  it s been an open bug for over a decade    Geez  why can t Firefox have decent standards support like IE6

User · Answer

The  lt colgroup gt  and  lt col gt  tags that lives inside tables are designed for this purpose  If you have three columns in your table and want to align the third  add this after your opening  lt table gt  tag     lt colgroup gt        lt col   gt        lt col   gt        lt col class  your-right-align-class    gt    lt  colgroup gt    along with the requisite CSS     your-right-align-class   text-align  right      From the W3      Definition and Usage         The  lt col gt  tag defines attribute values for one or more columns in a table    The  lt col gt  tag is useful for applying styles to entire columns  instead of repeating the styles for each cell  for each row

User · Answer

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

User · Answer

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   lt table class  quot products quot  gt     lt tr gt       lt td gt     lt  td gt       lt td gt     lt  td gt       lt td class  quot price quot  gt 10 00 lt  td gt       lt td gt     lt  td gt       lt td gt     lt  td gt     lt  tr gt     lt tr gt       lt td gt     lt  td gt       lt td gt     lt  td gt       lt td class  quot price quot  gt 11 45 lt  td gt       lt td gt     lt  td gt       lt td gt     lt  td gt     lt  tr gt   lt  table gt   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

User · Answer

If it s always the third column  you can use this  assuming table class of  products    It s kinda hacky though  and not robust 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 on each cell  You can use the col element to set the width  border  background or visibility of a column  but not any other properties  Reasons discussed here

User · Answer

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    lt table class  align-right-3rd-column  gt     lt tr gt       lt td gt  lt  td gt  lt td gt  lt  td gt  lt td gt  lt  td gt             lt  tr gt   lt  table gt    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

[html] Better way to right align text in HTML Table

Examples related to html

Examples related to css