padding/margin/border-bottom?

Jeg har en celle til min menu til venstre på min side, og til højre menu-cellen er der en eller flere kolonner til indholdet.

Denne menu skal være dynamisk, så for ikke at forrykke hele siden, lægger jeg en tabel ind i menu-cellen. Problemet er ikke den dynamiske menu, den er færdig og klar til brug.

I denne menu vil jeg gerne adskille menupunkterne v.hj.a. noget grafik: border-bottom skal være 1px i højden, og så skal baggrunden være en stiplet line, som selvfølgelig også er 1px i højden.

Selve linkene skal "paddes" 15px fra venstre kant, og over og under linkene skal der "paddes" med Xpx, så der bliver lidt luft ovenover og nedenunder menupunkterne.

Som jeg ser på det lige nu, vil jeg kun kunne lave det på denne måde, og det bliver alt for omstændigt:

1. I menu-cellen lægger jeg en tabel ind
2. I tabellen lægger jeg en tabel ind, så jeg kan få den stiplede linie
3. Inde i tabellen lægger jeg en ny tabel ind, hvor jeg korrigerer med padding, så menupunktet kommer til at stå 15px fra venstre side, og med lidt luft over og under.
4. Tabellen afsluttes, og der laves en ny tabel til næste menupunkt.

Det bliver godt nok til en hel del HTML. Jeg har bearbejdet idéen on ’n off, men har aldrig fundet ud af hvordan det kan laves mest hensigtsmæssigt. Koden, som jeg umiddelbart ville lave den (jeg ved ikke om mit CSS er gangbart, jeg har ikke testet det endnu, og det kan helt sikkert laves bedre. Du får bare lige idéen):


CSS:

.menubottom {
height: 1px background-image: url('/images/borderbottom.gif');
}
.menu {
display: block;
width: 100%;
}
.menupadding {
padding: 3px 15px; 3px 15px;
}


MENUTABEL:

<table border="0" cellpadding="0" cellspacing="0" style="width: 180px;">
    <tr>
        <td align="left" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
                <tr>
                    <td class="menubottom">
                        <table border="0" cellpadding="0" cellspacing="0"  style="width: 100%;">
                            <tr>
                                <td class="menupadding">
                                    <a href="#" class="menu">Menupunkt 1</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="menubottom">
                        <table border="0" cellpadding="0" cellspacing="0"  style="width: 100%;">
                            <tr>
                                <td class="menupadding">
                                    <a href="#" class="menu">Menupunkt 2</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="menubottom">
                        <table border="0" cellpadding="0" cellspacing="0"  style="width: 100%;">
                            <tr>
                                <td class="menupadding">
                                    <a href="#" class="menu">Menupunkt 3</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="menubottom">
                        <table border="0" cellpadding="0" cellspacing="0"  style="width: 100%;">
                            <tr>
                                <td class="menupadding">
                                    <a href="#" class="menu">Menupunkt 4</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="menubottom">
                        <table border="0" cellpadding="0" cellspacing="0"  style="width: 100%;">
                            <tr>
                                <td class="menupadding">
                                    <a href="#" class="menu">Og så videre</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>



Prøv at se siden på include.dk. Håber du har nogle fede idéer, måske det kan løses med padding/margin i én enkelt tabel, som ligger inde i menu-cellen?