I have an HTML table with large number of rows, and I need to right align one column.
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 the methods, I have to repeat the align or class parameter on every <tr> 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 ?
What you really want here is:
<col align="right"/>
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?)
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.
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; }
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.
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.
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.
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.
A number of years ago (in the IE only days) I was using the <col align="right"> tag, but I just tested it and and it seems to be an IE only feature:
<!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>
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:
Overall, I don't understand the reasoning behing abandoning this tag. It would appear to be very useful (at least for manual HTML publishing).
The <colgroup> and <col> 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 <table> tag:
<colgroup>
<col />
<col />
<col class="your-right-align-class" />
</colgroup>
along with the requisite CSS:
.your-right-align-class { text-align: right; }
From the W3:
Definition and Usage
The
<col>tag defines attribute values for one or more columns in a table.The
<col>tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
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
Source: Stackoverflow.com