Msg#: 11382 posted 11:49 pm on Nov 20, 2005 (gmt 0)
I have built a directory of members of an organization. It displays contact info and such to the members, and the admins have an alternate view with a bunch of additional fields. I have this all coming from a database, and that part is working fine.
The question I have is about displaying the admin view. Does anyone have a good way of displaying a bunch of columns on one page in a friendly manner? right now I've got some sideways scrolling going on, and that's obviously not ideal. I want to allow the admins to be able to see all the data at once, but maybe that's just not realistic? Is there some clever way of displaying 19 columns one one page? I was thinking of maybe having two rows for each record or something, but couldn't come up with a way to make that legible.
Msg#: 11382 posted 1:31 am on Nov 22, 2005 (gmt 0)
My first thought is much the same as yours - multiple rows for each entry. There is just too much with 19 columns to fit things in vertically, and if you try doing something fancy with DHTML making page elements appear/disappear/float then usability will go out of the window (although it might look quite cool!)
Rather than displaying the member name in the left column I would build a table for each member with their name as the header. Something like:
Msg#: 11382 posted 1:36 am on Nov 25, 2005 (gmt 0)
Good point Purple Martin - this is a good semantic use of a table. I was going to just be lazy and use a table inappropriately, but now I'm just sticking to good principled design without changing anything except my mindset. I like it.
Now, does anyone have an example of a site with a multi-row layout of data like we're talking about? Maybe I'm dense, but Encyclo's layout leaves me wondering where the column headers go.
Msg#: 11382 posted 4:38 am on Nov 25, 2005 (gmt 0)
I was thinking of something along these lines... (copy'n'paste the HTML below into a blank document and have a look at it) ...it's not pretty at the moment but it could easily be tidied up.
I've used two ways of linking the row data with the appropriate heading: by colour-coding the rows, and by adding title tags to the cells. There may be other ways of linking them I haven't thought of.
Whatever you decide to do, in this situation you should put the headers attribute in the td tags and use it to link the tds to id attributes in the appropriate th tags. This is vital for accessibility reasons when a table is complex. (I couldn't be bothered to do it for my quick sample code, but you should). [w3schools.com...]
Also, all of this is easily generated on-the-fly by loops in server side code, if that's what you need.