www.webdeveloper.com
Results 1 to 12 of 12

Thread: Creating HTML tables that expand and collapse with user control

  1. #1
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9

    Red face Creating HTML tables that expand and collapse with user control

    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

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Do you mean that the lists are in table cells? Like this:
    Code:
    <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

  3. #3
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9

    Talking

    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.

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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.

    Code:
    #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;}
    Code:
    <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
    Last edited by KDLA; 07-05-2006 at 02:57 PM. Reason: shouldn't have used table as id

  5. #5
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9
    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

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You'd have to designate height and width settings in the CSS.

  7. #7
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9
    I'm not too familiar with CSS stuff...how do I designate the height and width for each column and row?

    Thanks again,
    Krissy

  8. #8
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Code:
    #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.

  9. #9
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9

    Unhappy

    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.

  10. #10
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    What do you mean by "spacing it out?"

  11. #11
    Join Date
    Jul 2006
    Location
    Liberty, MO
    Posts
    9

    Red face

    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?

  12. #12
    Join Date
    Jul 2009
    Posts
    1
    Sorry to bump up this thread from stone-age, but can someone shed some light on this? I also have the exact same problem...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles