SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast Cvent's Avatar
    Join Date
    Jul 2008
    Location
    McLean, VA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Styling a Table Column without a Class

    I am styling a 4 column table and 4th column has number data which I want to text-align: right (the other 3 columns are left), but I'm not interested in applying a class to each <td>. Is there an alternate way to do this, or is the class the only way?

    Thanks,
    Cvent

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    I think that in CSS2 the class is your only hope.
    However, you could create one big table with two cells, put the first tree columns in a table in the left cell, and the last (4th) column in a table in the right cell of the big table, and give this whole cell a text-align: right.

    It would work, though I'm pretty sure it will slow things down

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do it like this, but it won't work in IE6 and older.
    Code CSS:
    td:first-child+td+td+td {text-align:right}

    With CSS3 selectors (which the latest versions of modern browsers support, but not IE) you can do it even simpler.
    Code CSS:
    td:nth-child(4) {text-align:right}

    To make it work in IE you'll need a class, though.
    Birnam wood is come to Dunsinane

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    colgroup is a possible answer, but firefox doesn't support that for alignment.
    http://www.webmasterworld.com/forum83/4242.htm

    The last-child pseudo selector can also be used but internet explorer doesn't support that.

    As a compromise, both can be used.

    Code css:
    .numeric, td:last-child {
    	text-align: right;
    }

    Code html4strict:
    <table>
        <colgroup>
            <col span="3" />
            <col class="numeric" />
        </colgroup>
        ...
    </table>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, that won't help, since text alignment doesn't apply to columns or column groups. The only properties that apply to those elements are,
    • the border properties (collapsing borders model only)
    • the background properties
    • the width property
    • and visibility:collapse (which is not well supported)

    IE will apply some other properties as well, but that's contrary to the CSS specification.

    For text alignment you'll need to specify it on the cells, not the columns.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast Cvent's Avatar
    Join Date
    Jul 2008
    Location
    McLean, VA
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Quote Originally Posted by AutisticCuckoo View Post
    Paul, that won't help, since text alignment doesn't apply to columns or column groups. The only properties that apply to those elements are,
    • the border properties (collapsing borders model only)
    • the background properties
    • the width property
    • and visibility:collapse (which is not well supported)

    IE will apply some other properties as well, but that's contrary to the CSS specification.

    For text alignment you'll need to specify it on the cells, not the columns.
    I came to this conclusion yesterday when looking at this very thing. I ended up just styling the <td>'s, which did the trick.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Paul, that won't help, since text alignment doesn't apply to columns or column groups.
    ...
    IE will apply some other properties as well, but that's contrary to the CSS specification.
    That's funny, the test seemed to work fine in IE and Firefox.

    If all else fails though, you can apply the align attribute to the colgroup or col, as in the example at the end of http://www.w3.org/TR/html401/struct/...tml#h-11.2.4.1
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    That's funny, the test seemed to work fine in IE and Firefox.
    Well, if you're willing to rely on browser bugs …
    Birnam wood is come to Dunsinane

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Without relying on browser bugs then, what is the cross-browser technique that should be used to style table columns? Are we stuck with styling by inline attributes?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not using divs ?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Because tables are the proper solution when dealing with tabular data.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Without relying on browser bugs then, what is the cross-browser technique that should be used to style table columns? Are we stuck with styling by inline attributes?
    If you want maximum 'cross-browser-ness' you'll have to use a class on every cell in that 'column'.

    If you can afford to ignore IE6 and older, you can use the :first-child pseudo-class plus adjacent sibling combinators.

    If you can afford to ignore IE7 too, you can use the :last-child pseudo-class (or, more general, :nth-child() or :nth-last-child()).
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bestbuy2 View Post
    Why not using divs ?
    Remember to code according to data information. For instance, if you see tabular data build with a table. Also, remember div's are non-semantic elements even though they are a necessity. If you were to use all div's instead of a table the data would be meaningless.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It has been posited that divs shouldn't directly contain textual data, and should instead be populated only with block-level elements.

    Quote Originally Posted by http://www.w3.org/html/wg/html5/#the-div
    Allowing div elements to contain phrasing content makes it easy for authors to abuse div, using it with the class="" attribute to the point of not having any other elements in the markup. This is a disaster from an accessibility point of view, and it would be nice if we could somehow make such pages non-compliant without preventing people from using divs as the extension mechanism that they are, to handle things the spec can't otherwise do (like making new widgets).
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •