[thelist] Wrapping <tr> groups

Bill Moseley moseley at hank.org
Mon Jul 16 13:15:01 CDT 2007


Here's a basic html question.  Is there a way to structurally group
table rows into groups?

I've got a table -- say it lists departments in a company.  Now I want
to be able to click on an arrow next to the account and have that item
"expand" and show the members of that account.

Now, I don't want a nested table as I want the columns to continue to
line up nicely.

What I would like is something like (apologies to those without fixed
spaced fonts):

               Company Directory

             Name     |       Phone
        --------------+------------------
        > Accounting  |  555-1212x123
        > Marketing   |  555-1212x432

Then click on the arrow next to accounting

              Company Directory

             Name     |       Phone
        --------------+------------------
        V Accounting  |  555-1212x123
           Fred       |  x234
           Joe        |  x456
        > Marketing   |  555-1212x432


This doesn't validate, but is basically what I'd like:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>

        <div class="department">
            <tr>
                <td>Accounting</td>
                <td>555-1212x123</td>
            </tr>

            <div class="department_employees">
                <tr>
                    <td>Fred</td>
                    <td>x234</td>
                </tr>
                <tr>
                    <td>Joe</td>
                    <td>x456</td>
                </tr>
            </div>

        </div>

        <div class="department">
            <tr>
                <td>Marketing</td>
                <td>555-1212x432</td>
            </tr>

            <div class="department_employees">
                ...
            </div>

        </div>

        ...

    </tbody>
</table>

That is, each group of rows for a "department" are wrapped in a <div>
and likewise a group of employees is in a <div> within a department.

The idea is departments could all be formatted as a unit and
"department_employees" can be toggled as a single unit.

Obviously, I can just add class tags to the <tr>, which is what I'm
currently doing.



-- 
Bill Moseley
moseley at hank.org




More information about the thelist mailing list