how to align text in a <td>?

J

John Salerno

Ridiculously simple, but I can't figure it out. How do you make the text
in <td> elements align to the right of the table cell?

I'm looking at CSS properties for positioning but I just don't see
anything. Vertical-align helped me get it to the bottom, but now I need
it right-aligned.

Thanks.
 
D

David Dorward

John said:
Ridiculously simple, but I can't figure it out. How do you make the text
in <td> elements align to the right of the table cell?

Same as any other element, with the CSS text-align property.
 
J

John Salerno

David said:
Same as any other element, with the CSS text-align property.

Shucks, I was looking in the wrong place, I guess. :)

Thanks for the response!

Just a quick followup: Is it good practice to make a separate class just
to accomplish this alignment, if you don't want all <td>s to be
right-aligned? I did class="textlabel" and then a td.textlabel property.
It doesn't seem very elegant though, for some reason.

Thanks.
 
A

Alan J. Flavell

....
Just a quick followup: Is it good practice to make a separate class
just to accomplish this alignment,

Well, the td align="right" attribute isn't exactly deprecated yet
(unlike the align attribute on many other elements), but I'd agree
with D.D that it's more hygienic to deal with this via the stylesheet.
if you don't want all <td>s to be right-aligned?

It may be that you'd want to hang other presentational proposals off
these particular cells - if not now, then maybe later - and defining
an appropriate selector is the way to get set up for that. If you see
what I'm getting at.
I did class="textlabel" and then a td.textlabel property.

Congratulations on not doing the obvious (but inappropriate)
' class="right" ' which so many would do at this point!
It doesn't seem very elegant though, for some reason.

Agreed. But it *is* the safest way to get wide acceptability
across browsers and versions.

If you want to be clever, you can style table columns without having
to use classes, by coding selectors like td+td+td, which works fine
for browsers which implement CSS2; but back-level browsers like IE
aren't quite there yet, their newest version is still in beta, and
there will be plenty of folks using older versions for years yet.
It's up to you to decide whether the styling is important enough to
care about those back-level folks - they'll still be able to view the
content, just that it won't look quite the way you want...
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablefun.html (this is just
a test - in the practical situation the styles would be moved out
into a stylesheet, of course).

If you want to take it to extremes, try something like this earlier
experiment: http://ppewww.ph.gla.ac.uk/~flavell/tests/poules2.html ,
although that does make /some/ use of classes (odd/even) to keep the
CSS selectors from getting entirely out of hand.

<digression>
*According to the HTML specification*, the alignment which is
specified by <col align="..."> is /supposed/ to carry through to the
cells of that column. Unfortunately, this rather odd backwater of the
HTML specification is /so/ out of line with the way that CSS works,
that there's something of a clash in browser implementations, and it's
not really something that can be used in practice. In fact it's a
long-standing (possibly in fact *the* oldest) open bug in the Mozilla
bugzilla.
 
J

John Salerno

Alan said:
Agreed. But it *is* the safest way to get wide acceptability
across browsers and versions.

Uh oh, situation: I need the text in some of these cells also to be red,
but I can't specify more than one class per <td> element, right? How
should I handle that?
 
S

Sid Ismail

On Thu, 01 Jun 2006 20:13:10 GMT, John Salerno

: Alan J. Flavell wrote:
:
: >> It doesn't seem very elegant though, for some reason.
: >
: > Agreed. But it *is* the safest way to get wide acceptability
: > across browsers and versions.
:
: Uh oh, situation: I need the text in some of these cells also to be red,
: but I can't specify more than one class per <td> element, right? How
: should I handle that?


Use class and ID. :)

Sid
 
A

Alan J. Flavell

Uh oh, situation: I need the text in some of these cells also to be
red, but I can't specify more than one class per <td> element,
right?

Actually you can. class="alarm text" would match both .alarm
and .text selectors in your stylesheet.
http://www.w3.org/TR/REC-html40/struct/global.html#adef-class

So you could style the .text as right-align, and the .alarm as red.

Some older browser/versions might not grok that, but I think it's
pretty well covered nowadays.

You could of course assign two different classes - say, text and
atext, one of which is styled for only right-alignment, and the other
is red *and* right-alignment. Your choice, really, but the latter is
going to be somewhat better supported.

Naturally you should pick class names which mean something to your
particular situation. I was just illustrating possibilities.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top