dynamic table layout question

How to change the layout of a table on the fly?

[paket]

I am working on a small internal project. The idea is to have the user make a selection from a large number of options (around 130), and then perform some calculations based on those selections. The options will be represented by icons, along with an associated text label, all contained within a scrolling <div>. These icons will have a highlight that toggles on and off according to user selection.

So far, no big deal. The problem I am running into is this: I would like to re-arrange the icons in the scrolling <div> according to three different (user selectable) schemes - alphabetical, and two other arbitrary ones. I could just insert a different table for each layout scheme, but that just seems too clunky to me.

I've tried filling the scrolling <div> with divs and spans for the icons and labels, but the problem with that is the divs only put one per line and the spans will line wrap the text if the icon falls at the end of a line.

So - does anyone have any suggestions? Is there an elegant way to do this, or do I have to suck it up and use tables?

thanks
paket

[isitreal]

For the icons and labels maybe you could make the thing into a <ul>, then put a list-style-image:url(); containing the different icons/labels, an id for each <li> if each has a different icon/label. If it has both, that would be harder, don't think that method would work, you could make container divs, make a small left floated div that holds the icons/labels, then put the rest of the information in the div next to it, just put a margin equal to the width of the left little div, I think that works.

Or you can use the background-image property of css, make one div, give it padding left to the width you need to see the icon/label, then in css just create a bunch of ids for your divs, put the background-image:top left; for example, repeat:no-repeat; that would work too, but again, only for a single image, not two.

How to mix it up is another question, I'd do it server side, much easier and more stable that way, just have the list in an array, then the sort orders in another mulidimensional array, then just print it out using the preferred sort order, that needs cookies of course, but wouldn't be very hard to implement.

Don't know if any of these ideas fit with what you need. Good luck, cool idea though.

[Purple Martin]

You can prevent a span from line-wrapping by giving it the style white-space: nowrap;

[paket]

Thanks for your input. Right now, I am generating a table from am array, but I am going to try changing that to span's with the no-break style.

Thanks again.