Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

More Columns Than Most!

(and how to fit them all on one page)


Jackson Hole

11:49 pm on Nov 20, 2005 (gmt 0)

10+ Year Member

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.



2:04 pm on Nov 21, 2005 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Welcome to WebmasterWorld, Jackson_Hole!

How about using <div>s and floating them?

Jackson Hole

12:36 am on Nov 22, 2005 (gmt 0)

10+ Year Member

Hmm...although i'm with you on divs over tables, my question was more a hopeful thought that there is a way to cram more columns than should logically fit on a screen at one time, onto the screen.

Right now it's in a table - if somehow divs would allow me to fit more onto the existing real estate, by all means, shout out how. but i don't see it.

PS - Thanks for the warm welcome...i've watched the tradition for a while now, nice to see it continues.


1:31 am on Nov 22, 2005 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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:

<table width="720" cellpadding="5" cellspacing="0" border="1">
<th colspan="6">John Doe</th>

Purple Martin

12:25 am on Nov 25, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi Jackson Hole!

Hmm...although i'm with you on divs over tables

Me too... for layout. What we are talking about here is displaying tabular data, so a table is more appropriate than divs.

I'd go with encyclo's suggestion and work out a multi-row solution. But stick with a table :)

Jackson Hole

1:36 am on Nov 25, 2005 (gmt 0)

10+ Year Member

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.

Purple Martin

4:38 am on Nov 25, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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

Also, all of this is easily generated on-the-fly by loops in server side code, if that's what you need.

<style type="text/css">
.row1 {
background-color: #FFFFCC;
.row2 {
background-color: #FFCCFF;
.row3 {
background-color: #CCFFFF;
<table cellspacing="2" cellpadding="2" border="1">
<th rowspan="3">Name</th>
<th class="row1">Title</th>
<th class="row1">Gender</th>
<th class="row1">Age</th>
<th class="row2">Address 1</th>
<th class="row2">Address 2</th>
<th class="row2">Address 3</th>
<th class="row3">Fave Food</th>
<th class="row3">Fave Colour</th>
<th class="row3">Fave Movie</th>
<td rowspan="3">Mary Smith</td>
<td class="row1" title="Title">Ms</td>
<td class="row1" title="Gender">Female</td>
<td class="row1" title="Age">33</td>
<td class="row2" title="Address 1">6 Short Street</td>
<td class="row2" title="Address 2">Poshtown</td>
<td class="row2" title="Address 3">Surrey</td>
<td class="row3" title="Fave Food">Tiramisu</td>
<td class="row3" title="Fave Colour">Pink</td>
<td class="row3" title="Fave Movie">Pride and Prejudice</td>
<td rowspan="3">Fred Bloggs</td>
<td class="row1" title="Title">Mr</td>
<td class="row1" title="Gender">Male</td>
<td class="row1" title="Age">28</td>
<td class="row2" title="Address 1">137 Swamp Lane</td>
<td class="row2" title="Address 2">Hicksville</td>
<td class="row2" title="Address 3">Lincolnshire</td>
<td class="row3" title="Fave Food">Steak</td>
<td class="row3" title="Fave Colour">Black</td>
<td class="row3" title="Fave Movie">LoTR</td>

p.s. apologies for the terrible gender stereotypes!


Featured Threads

Hot Threads This Week

Hot Threads This Month