More Columns Than Most!

(and how to fit them all on one page)

[Jackson Hole]

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.

Thoughts?

[BlobFisk]

Welcome to WebmasterWorld, Jackson_Hole!

How about using <div>s and floating them?

[Jackson Hole]

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.

[encyclo]

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">
<tr>
<th colspan="6">John Doe</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</table>

[Purple Martin]

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]

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]

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.

<style type="text/css">
.row1 {
background-color: #FFFFCC;
}
.row2 {
background-color: #FFCCFF;
}
.row3 {
background-color: #CCFFFF;
}
</style>
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<th rowspan="3">Name</th>
<th class="row1">Title</th>
<th class="row1">Gender</th>
<th class="row1">Age</th>
</tr>
<tr>
<th class="row2">Address 1</th>
<th class="row2">Address 2</th>
<th class="row2">Address 3</th>
</tr>
<tr>
<th class="row3">Fave Food</th>
<th class="row3">Fave Colour</th>
<th class="row3">Fave Movie</th>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td class="row3" title="Fave Food">Steak</td>
<td class="row3" title="Fave Colour">Black</td>
<td class="row3" title="Fave Movie">LoTR</td>
</tr>
</table>

p.s. apologies for the terrible gender stereotypes!