Creating HTML tables that expand and collapse with user control

[sirky_7]

Hey all,

New at most of this stuff...have some HTML experience, but obviously not enough. A co-worker and I are trying to create lists that expand/collapse at the user's request. That part is completed. However, we have decided to format our stuff in a table, but we are unable to get the expand/collapse to work correctly in a table. Any thoughts, suggestions, or examples would be useful.

Thanks,
Krissy

[KDLA]

Do you mean that the lists are in table cells? Like this:

<td>
<ul>
<li>list item
   <ul>
   <li>list</li>
   <li>list</li>
   </ul>
</li>
</ul>
</td>

Really, your lists shouldn't be broken up into table cells... it defeats the purpose of having setting up your code as lists to start with.

Can you send a link to your page?

KDLA

[sirky_7]

Yes, the layout you listed is how we have it set up. What we have looks somewhat like an excel table of sorts, and it lists the stuff. Some of the links have a plus sign next to them, used to expand the list. We are basically using tables for formatting, b/c there is a TON of information in there, and it's just easier for the user to read it that way. I can't send you the web page however, b/c I work for a government contract. Here is somewhat what the layout needs to look like:

Title Title Title Title
+Link 1 Info 1 Info 1 Info 1

-Link 2 Info 2 Info 2 Info 2
Sub item 1 Info 1a Info 1a Info 1a
Sub item 2 Info 2a Info 2a Info 2a

Is there another way to format this stuff so that the user can read across the columns better? I.E. a way to place lines in there to divide the information up?

Thanks so much for your help.

[KDLA]

I have used this script: http://javascript.internet.com/navig...pand-menu.html on this page: http://kdla.ky.gov/resources.

Really, you can style it with CSS -- adding borders to the bottoms of your lists, and a border around the whole thing with a wrapper div.

#graph {border: 1px solid #000; width: ###px; display: block; margin: 0; padding: 0}
#graph ul li {border-bottom: 1px solid #000; width: ###px;}
#graph ul li ul li {border: 0; width: auto;}

<div id="graph">
<ul>
<li>List Item
   <ul>
   <li>item</li>
   <li>item</li>
   </ul>
</li>
<li>List Item
   <ul>
   <li>item</li>
   <li>item</li>
   </ul>
</li>
</ul>
</div>

KDLA


Something like that.

KDLA

KDLA

[sirky_7]

That seems to serve the purpose we were looking for. One last question...is there any way to space the text items out so that they are all evenly spaced, as they would be if they were in columns?? That's about the only other thing we ran into.

Thanks again,
Krissy

[KDLA]

You'd have to designate height and width settings in the CSS.

[sirky_7]

I'm not too familiar with CSS stuff...how do I designate the height and width for each column and row?

Thanks again,
Krissy

[KDLA]

#graph {border: 1px solid #000; width: ###px; display: block; margin: 0; padding: 0}
#graph ul li {border-bottom: 1px solid #000; width: ###px; height: ###px;}
#graph ul li ul li {border: 0; width: auto;}

Replace the ### with the number of pixels.

[sirky_7]

Ok, doing that doesn't align the text in my columns at all. Maybe I'm doing it wrong? I changed what you said, and it seemed to knock all the text to the next line, instead of spacing it out. Any thoughts?

Thanks.

[KDLA]

What do you mean by "spacing it out?"

[sirky_7]

Sorry, should have been more specific. Not sure if the formatting will stay in this post, but here is what I mean.

We want it to look like this:

Title1 Title2 Title3
Info1 Info2 Info3

with all of the text evenly spaced out, so it gives the "appearance" of a table. So all of the information under Title1 stays in that column, all of the info under Title2 stays in that column, etc.

When I try to set the pixels, here is what I get:

Title1
Info1

Title2
Info2

Title3
Info3

Everything seems to have been given a carriage return and is on the next line, instead of for example, 5 spaces over on the same line.

Does that make more sense?

[MrAtheist]

Sorry to bump up this thread from stone-age, but can someone shed some light on this? I also have the exact same problem...