how to align text in a <td>?

Discussion in 'HTML' started by John Salerno, Jun 1, 2006.

  1. John Salerno

    John Salerno Guest

    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.
    John Salerno, Jun 1, 2006
    #1
    1. Advertising

  2. John Salerno wrote:

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

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Jun 1, 2006
    #2
    1. Advertising

  3. John Salerno

    John Salerno Guest

    David Dorward wrote:
    > John Salerno wrote:
    >
    >> 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.
    >


    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.
    John Salerno, Jun 1, 2006
    #3
  4. On Thu, 1 Jun 2006, John Salerno wrote:

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

    ....
    > 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.
    Alan J. Flavell, Jun 1, 2006
    #4
  5. John Salerno

    John Salerno Guest

    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?
    John Salerno, Jun 1, 2006
    #5
  6. John Salerno

    Sid Ismail Guest

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

    : 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
    Sid Ismail, Jun 1, 2006
    #6
  7. On Thu, 1 Jun 2006, John Salerno wrote:

    > 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.
    Alan J. Flavell, Jun 1, 2006
    #7
  8. John Salerno

    John Salerno Guest

    Alan J. Flavell wrote:

    > 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


    Ah, I think I had misread this: "Note: Only one class attribute can be
    specified per HTML element!"

    One attribute, but it can contain multiples names! Thanks!
    John Salerno, Jun 1, 2006
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,125
  2. acko bogicevic

    Align text in text box

    acko bogicevic, Jan 9, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    60,672
    Michelle Stone
    Jan 9, 2004
  3. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,234
    David Dorward
    Jun 23, 2005
  4. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    553
    Paul Lautman
    Mar 3, 2006
  5. Steve Richter
    Replies:
    1
    Views:
    876
    Mark Rae
    Jun 24, 2007
Loading...

Share This Page