Reversing Table Axis

HTML & CSS
1

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

example:


         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

[font=verdana]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

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![/font]

3

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

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

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

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.