SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Reversing Table Axis

    It occurs to me, that for some applications, it is more sensible to have the colums be rows and and vice versa.

    example:
    Code:
             PRODUCT   PRODUCT   PRODUCT   PRODUCT   PRODUCT   
    NAME    ray              roni           bushy        havoc       bowtie
    DESC paragraph   paragraph   paragraph    paragraph paragraph
    COST     $                  $               $                 $              $
    note that the TH product would be implied only ( not in the actual mark up, the same way ROW is implied on regular tables)

    I am almost certain there is no CSS solution ( tho that would be best ) in which to reverse the ways columns and rows are displayed.

    I also know that I could use<TH> instead of <TD> and the scope attribute on the first cell of every row but something seems clumsy about it, if only because I cant group all the THs in a THEAD.


    EDIT: I should have added that I am looking to do this while maintaining the table element properties ( dynamic equal= heights, widths )


    Am I being too particular? I just wanted some insights about how others handle this situation

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    It occurs to me, that for some applications, it is more sensible to have the colums be rows and and vice versa.

    example:
    Code:
             PRODUCT   PRODUCT   PRODUCT   PRODUCT   PRODUCT   
    NAME    ray              roni           bushy        havoc       bowtie
    DESC paragraph   paragraph   paragraph    paragraph paragraph
    COST     $                  $               $                 $              $
    note that the TH product would be implied only ( not in the actual mark up, the same way ROW is implied on regular tables)

    I am almost certain there is no CSS solution ( tho that would be best ) in which to reverse the ways columns and rows are displayed.

    I also know that I could use<TH> instead of <TD> and the scope attribute on the first cell of every row but something seems clumsy about it, if only because I cant group all the THs in a THEAD.


    EDIT: I should have added that I am looking to do this while maintaining the table element properties ( dynamic equal= heights, widths )


    Am I being too particular? I just wanted some insights about how others handle this situation
    It looks like you've got a 2-way table with both row and column headings there, so which way round you present it is largely up to you! Either way, you're going to have a set of column headings that can be grouped in a <thead> and a set of row headings that can't. But equally, there are ways of applying styles to all row headings, the easiest being
    Code css:
    th[scope="row"] { ...styles go here... }
    which allows you to style your column and row headings differently. So while they aren't in a single grouping element like <thead>, I'm not sure that needs to be a problem.

    I'm sure with a lot of donkey work you could mark each and every table cell up with the position you want it to be and then completely rearrange it with CSS, but that's a massive amount of code and effort, which will undoubtedly completely screw things up for a number of users ... it's much easier just to code it up in the order you want it to appear!

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It's much easier just to code it up in the order you want it to appear!
    Agreed, but I didnt make myself clear.

    There would be no horizontal headers. In other words, the columns are 'anonymous' but the rows have 'meaning' if that makes more sense.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    There would be no horizontal headers. In other words, the columns are 'anonymous' but the rows have 'meaning' if that makes more sense.
    No problem, just have <th scope="row">. You can target all the row header cells perfectly well through CSS, what other purpose of 'grouping' them do you need?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The specs go into detail on how to mark up cells so that information is well correlated using axis, headers and scope etc. It soon gets pretty complex though but does allow for tables to be marked up semantically no matter what the data.

    As Stevie said it seems you just want rows and if you use th scope="row" on the first cell then columns are not implied.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    ah, I get it now. that was 3am thousand yard stare, lol. I kept seeing <tr scope='row'> and wondering "why would he say that???

    thanks guys.


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
  •