ansaurus

Question

Better way to right align text in HTML Table

Answer 1

+1 A:

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.

John Gietzen 2009-08-26 05:02:33

-1, using inline styles for this is very bad advice.

cdmckay 2009-08-26 06:10:37

+1 for turning on GZIP. Seriously, this answer does not warrant 3 downvotes. Other less compatible answer should be voted down instead.

Adrian Godong 2009-08-26 10:10:49

I wasn't advocating inline styles as the best way by any means. It was just one possibility on how to solve the problem.

John Gietzen 2009-08-26 11:55:09

+1, downvoters explain? This is not any different than the top answer at the moment, and on top of that it is the only sensible solution.

Jan Zich 2009-08-26 14:58:45

Whether it's "sensible" depends on the goal: the original question sounded like it was about semantic repetition, not bandwidth, so GZIP sounds irrelevant to me. The FAQ says downvotes on SO are for "off topic or incorrect" answers. IMHO, simply being "less compatible" should not be grounds for downvoting, but GZIP is borderline offtopic. (FWIW, I did not downvote anything on this page.) (Goodbye, karma! I barely knew ye.)

2009-08-26 15:53:00

@John: Maybe you should *bold* the "or" word on your #1.@Ken: GZIPing will make it more efficient than *not* GZIPing (which is the one of the question asked).

Adrian Godong 2009-08-26 21:53:18

Answer 2

A:

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

Nrj 2009-08-26 05:03:16

He just wants the third column aligned.

John Gietzen 2009-08-26 05:03:57

Plus, this doesn't work for non-JavaScript users.

John Gietzen 2009-08-26 05:05:14

Plus, it's an overkill and may cause FOUC.

Jan Zich 2009-08-26 10:12:53

Answer 3

A:

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.

cdmckay 2009-08-26 05:14:59

Unfortunately not a very compatible solution.

deceze 2009-08-26 05:21:50

@cdmckay: actually it should work in the latest versions of Firefox, Opera, Chrome and Safari. No IE support though.

DisgruntledGoat 2009-08-26 12:08:41

Would any of the downvoters care to say what is wrong with this answer?

cdmckay 2009-08-27 03:14:11

Answer 4

A:

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"&gt;
<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:

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).

Jan Zich 2009-08-26 05:15:16

Is anybody actually reading my answer? I did not say it should be used in real life for real website. It was a historical remark, and I suggested using this only if targeting IE rendering engine (not necessarily for webpages).

Jan Zich 2009-08-26 15:03:25

Firefox didn't drop support in 3.5; it never had support for this.

2009-08-26 15:47:25

Answer 5

A:

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?)

2009-08-26 05:37:30

Align is a deprecated attribute so Firefox has no reason to support it.

2009-08-26 06:55:43

Hmm yes, but what was the reason for its deprecation? It seems to be useful. If not the align attribute, it would be useful to style it using CSS. I know that it could possibly lead to some precedence issues (because nowhere else an element can transfer styles to other element), but still ...

Jan Zich 2009-08-26 10:09:31

There are only 4 properties allowed on columns, see http://stackoverflow.com/questions/1119106/why-is-styling-table-columns-not-allowed

DisgruntledGoat 2009-08-26 12:07:21

Those 4 are the only *CSS* properties. HTML4.01 allows more document attributes on the col tag. For example, "span" (which would be a little silly to put in CSS). And "align" is deprecated in 'table' and 'caption', but I don't see anywhere that says it's deprecated for 'col'.

2009-08-26 15:37:43

"Geez, why can't Firefox have decent standards support like IE6?)"HAHA! fantastic comment! So untrue but indeed funny!

Jesper Rønn-Jensen 2009-09-08 08:10:44

Answer 6

+5 A:

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;
}

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.

bigmattyh 2009-08-26 06:16:01

Why is this getting upvoted? He just repeated the same method the OP already knew about.

cdmckay 2009-08-26 18:44:17

Yes, and he also answered what the original poster wanted to know, which was whether there was any more efficient way to accomplish what he wanted. So... Not sure what your point is.

bigmattyh 2009-08-26 20:10:32

But it's not more efficient. Having to add a class to each `td` is the most compatible way, but not the most efficient. The most efficient way would be to use the `nth-child(3)` selector.

cdmckay 2009-08-27 03:11:30

Okay, perhaps I should have emphasized that the nth-child selector is not supported by several modern browsers still in wide use today. There's no point in using an efficient technique if it fails on a significant portion of your audience.http://kimblim.dk/css-tests/selectors/

bigmattyh 2009-08-27 05:18:11

There's also the sibling selector solution, which only requires you add a class to the table and is supported by all browsers other than IE6. That is also a more efficient solution (especially if the code is maintained by hand).

cdmckay 2009-08-27 15:32:20

IE6 is still 10% of the browsing population -- and you still have to contend with that. That is, unless you are catering to a niche crowd (say, creating a site to sell Mac software). Believe me: I would love to persuade my clients to drop support for IE6, but the stats are just not persuasive. Too many people use it. I'm fine with offering IE6 users a less-than-optimal experience, but it is the _rare_ client who will sign off on that. And besides, it's really not a big deal anyway. Our job is to deliver results, not perfection.

bigmattyh 2009-08-27 16:59:41

Answer 7

+1 A:

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; }

Eifion 2009-08-26 12:10:07

Answer 8

+2 A:

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.

DisgruntledGoat 2009-08-26 12:11:39

...and doesn't work in IE6. Otherwise nice though. :)

deceze 2009-08-27 05:39:24

ansaurus

tags:

views:

answers:

Better way to right align text in HTML Table

related questions