Need Help With Table Layout/Design

[HypnoTech]

Hello...

As I have been beating my head against a brick wall for a few days now, I figured I would see if someone here could potentially help me sort things out.

The Project:

I am putting a site together for a small seminary (for free), and need to create a sortable member directory that gives two "rows" for each member. Row 1, being name, location, etc., and row 2 being the member bio.

Background and Problem:

The site is created in XHTML 1.0 Strict, using CSS 2.1, and PHP includes.

I am currently using Stuart Langridge's sorttable.js to sort the table, which works exactly as it should. The only problem is, though, that it is only set up to sort one row at a time, meaning I would logically have to have the bio info in the same row as the name, location, etc. However, I can't seem to find a way to make that work right, as the bio info would need to show up BELOW the name and location info.

Possible Solutions:

1) Somehow make the bio info td overflow so that it appears to be in the next row.
2) Figure out a way to "connect" row 1 with row 2, so that they move together when sorted; maybe by using some form of id, or class-like attribute?

Current Table Code:

<table class="sortable">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th class="sorttable_nosort" >Phone</th>
<th class="sorttable_nosort" >Email &amp; Website</th>
<th class="sorttable_nosort" >Services</th>
</tr>
</thead>
<tfoot><tr><td colspan=5>Information last updated: xxx</td></tr></tfoot>
<tbody>
<tr><td>Adams, Aaron</td><td>USA, Utah</td><td>xxx-xxx-xxxx</td><td>aadams@yahoo.com</td><td>Weddings, Civil Unions, Baptisms</td></tr>
<tr><td colspan=5>Bio a</td></tr>
<tr><td>Bonkers, Burt</td><td>USA, Colorado</td><td>xxx-xxx-xxxx</td><td>bbonkers@yahoo.com</td><td>Weddings, Civil Unions, Baptisms</td></tr>
<tr><td colspan=5>Bio b</td></tr>
<tr><td>Cassidy, Karen</td><td>USA, Michigan</td><td>xxx-xxx-xxxx</td><td>kcassidy@yahoo.com</td><td>Weddings, Civil Unions, Baptisms</td></tr>
<tr><td colspan=5>Bio c</td></tr>
<tr><td>Hynes, Duncan</td><td>UK, England, London</td><td>xxx-xxx-xxxx</td><td>dhynes@yahoo.com</td><td>Weddings, Civil Unions, Baptisms</td></tr>
<tr><td colspan=5>Bio d</td></tr></tbody>
</table>

Thank you all in advance for any help you can give, as my last resort will be to simply make some form of mouseover pop-up window for every person on the list... and I would really prefer to not go that route if possible. :cool:

[HypnoTech]

Alright... After a few hours of playing around with different techniques, including CSS, PHP, and HTML, I have come up with two good ways to handle what I needed. Neither of them include moving the bio section to the underside of the name row... but they will at least let me complete my project, which is what matters.

Here are the two ways, just in case anyone else needs a "down and dirty" method of doing this in the future:
<div style="border:1px solid; width:440px; height:300px; overflow:scroll;">
<table class="sortable">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th class="sorttable_nosort">Phone</th>
<th class="sorttable_nosort">Email &amp; Website</th>
<th class="sorttable_nosort">Services</th>
<th class="sorttable_nosort">Biography</th>
</tr>
</thead>
<tr><td>Bonkers, Burt</td><td>USA, Colorado</td><td>xxx-xxx-xxxx</td><td>bbonkers@yahoo.com</td><td>Weddings, Civil Unions, Baptisms</td><td><?php $text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac elit in velit adipiscing ornare. Fusce aliquam blandit ipsum, vel consequat ipsum fermentum eget. Duis posuere, augue sed aliquam interdum, urna massa dignissim odio, a fringilla lacus erat vel libero. Ut in libero vitae justo tristique vehicula quis sed sapien. Ut rhoncus mi et libero congue vulputate. Sed velit elit, mattis ac ullamcorper ac, porta et dui. Suspendisse potenti. Suspendisse potenti. Duis lobortis, felis a sodales sodales, sem erat faucibus ipsum, at tristique enim arcu nec mi. Donec ut tortor orci. Nulla tristique dui in mi aliquet ac ultricies magna rhoncus. Phasellus volutpat, dui bibendum blandit imperdiet, massa nisl elementum felis, id fringilla turpis diam vel dui. In auctor posuere lacus vitae pellentesque. Quisque sapien nulla, porta id lobortis nec, porttitor non ipsum."; $newtext = wordwrap($text, 65, "<br />\n", 1); echo $newtext; ?></td></tr>
<tr height="100px"><td>Cassidy, Karen</td><td>USA, Michigan</td><td>xxx-xxx-xxxx</td><td>kcassidy@yahoo.com</td><td><textarea rows="3" style="width: 100px">Weddings, Civil Unions, Baptisms</textarea></td><td><textarea rows="3" style="width: 370px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac elit in velit adipiscing ornare. Fusce aliquam blandit ipsum, vel consequat ipsum fermentum eget. Duis posuere, augue sed aliquam interdum, urna massa dignissim odio, a fringilla lacus erat vel libero. Ut in libero vitae justo tristique vehicula quis sed sapien. Ut rhoncus mi et libero congue vulputate. Sed velit elit, mattis ac ullamcorper ac, porta et dui. Suspendisse potenti. Suspendisse potenti. Duis lobortis, felis a sodales sodales, sem erat faucibus ipsum, at tristique enim arcu nec mi. Donec ut tortor orci. Nulla tristique dui in mi aliquet ac ultricies magna rhoncus. Phasellus volutpat, dui bibendum blandit imperdiet, massa nisl elementum felis, id fringilla turpis diam vel dui. In auctor posuere lacus vitae pellentesque. Quisque sapien nulla, porta id lobortis nec, porttitor non ipsum.</textarea></td></tr>
</table></div>
</div>

If anyone does happen to figure out a way to do what I was originally trying, feel free to contact me. ;)