How do I integrate the picture navbar better?

[rknet]

I'd like to make the picture page tables more seamless.  Examples:

This is what I've got now.
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fwww.rilokiley.net%2Ftemp%2Fnow.jpg&hash=a4cb23c839095388aae157dbf670aeb1859daf4f)

Here's a mockup showing what I'd like to end up with.
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fwww.rilokiley.net%2Ftemp%2Fmockup.jpg&hash=369bb89445bb6ce51258bb1b5b9152484f234efe)

Problem is, whenever I modify this code I end up with very undesirable results:

Code Select Expand


        <tr>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="images/folder.gif" width="16" height="16" align="absmiddle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="javascript:;" onClick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="images/info.gif" width="16" height="16" border="0" align="absmiddle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" title="{SLIDESHOW_TITLE}"><img src="images/slideshow.gif" width="16" height="16" border="0" align="absmiddle" alt="{SLIDESHOW_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" witdh="100%">
                        {PIC_POS}
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{ECARD_TGT}" title="{ECARD_TITLE}"><img src="images/ecard.gif" width="16" height="16" border="0" align="absmiddle" alt="{ECARD_TITLE}"></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="images/prev.gif" width="16" height="16" border="0" align="absmiddle" alt="{PREV_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="images/next.gif" width="16" height="16" border="0" align="absmiddle" alt="{NEXT_TITLE}" /></a>
                </td>
        </tr>


I tried wrapping TABLE /TABLE tags around the block of code to try and move it somewhere else... but it just wasnt working.  Where does the table for that navbar start anyway?  I'd like to make it the same width as the rest of the tables, and collapse some of the deadspace.

Thanks!

EDIT: Here's a link to the beginnings of my Gallery.
http://www.rilokiley.net/gallery2/

[rknet]

Alright, I think I got them the same size by changing  Width of the main table and Width of the table for file display both to 97%.  Now I just have to collapse it down with some styles.css