Innramming av celler
 
Det hele er basert på at man bruker tabeller inni tabeller for å lage ramme rundt det som oppfattes som cellene i én tabell. Istedet for å bruke border-egenskapen til en tabell bruker man altså en annen tabell "utenpå" tabellen.
Vi starter med en tabell som har bakgrunnsfargen til siden.
    <table bgcolor="#3870A8" width="160" border="0" cellpadding="0" cellspacing="2"><tr><td>

    </td></tr></table>
 
Dette gir bare en liten blå firkant uten innhold.
 


cellspacing="2" gjør at alle celler i denne tabellen får et tomt område på 2 pixler mellom seg fra alle fire sider rundt cellen. Når vi legger til en tabell med hvit bakgrunnsfarge inni denne får vi derfor en blå ramme rundt den hvite tabellen, 2 pixler bred.
Vi legger til den hvite tabellen.
    <table bgcolor="#3870A8" width="160" border="0" cellpadding="0" cellspacing="2"><tr><td>
    <table bgcolor="#FFFFFF" width="100%" border="0" cellpadding="0" cellspacing="2"><tr><td>

    </td></tr></table>
    </td></tr></table>
 
Vi har altså her en hvit tabell inni en blå tabell, men det ser ut som vi har en hvit tabell med blå ramme. Den blå rammen skal egentlig representere bakgrunnsfargen på siden tabellen skal ligge i. Det er den hvite tabellen som skal være rammen rundt andre celler. Derfor har denne også cellspacing="2".
 


Når vi skal lage celler til tabellen vår, legger vi til tabeller med en eller annen bakgrunn i hver celle. Dette gjør at vi har full kontroll over innholdet i cellene, og kan legge til det vi ønsker av innhold.
Vi legger til to celler i tabellen vår.
    <table bgcolor="#3870A8" width="160" border="0" cellpadding="0" cellspacing="2"><tr><td>
    <table bgcolor="#FFFFFF" width="100%" border="0" cellpadding="0" cellspacing="2">

    <tr><td><table bgcolor="#3870A8" width="100%" border="0" cellpadding="3" cellspacing="0">
      <tr><td>celle 1</td></tr>
    </table></td></tr>

    <tr><td><table bgcolor="#3870A8" width="100%" border="0" cellpadding="3" cellspacing="0">
      <tr><td>celle 2</td></tr>
    </table>
    </td></tr>

    </table>
    </td></tr></table>
celle 1
celle 2
 
Hver celle i den hvite tabellen inneholder altså en tabell med blå bakgrunn. Denne tabellen kan da ha så mange celler den vil hvor hver celle har forskjellige bakgrunner. F.eks. kan man ha bakgrunnsbilde med en gradert farge i overskriftscellen og en ensfarget bakgrunn i de øvrige cellene, slik jeg har brukt i menyen på denne siden.
 


Det kan være lurt å ha kommentar-tagger i begynnelsen av hver celle for oversiktens skyld. Det blir veldig fort kaos når man lager et stort hierarki av tabeller.
    <table bgcolor="#3870A8" width="160" border="0" cellpadding="0" cellspacing="2"><tr><td>
    <table bgcolor="#FFFFFF" width="100%" border="0" cellpadding="0" cellspacing="2">

    <!--HER BEGYNNER CELLE 1-->
    <tr><td><table bgcolor="#3870A8" width="100%" border="0" cellpadding="3" cellspacing="0">
      <tr><td>celle 1</td></tr>
    </table></td></tr>
    <!--SLUTT PÅ CELLE 1-->

    <!--HER BEGYNNER CELLE 2-->
    <tr><td><table bgcolor="#3870A8" width="100%" border="0" cellpadding="3" cellspacing="0">
      <tr><td>celle 2</td></tr>
    </table></td></tr>
    <!--SLUTT PÅ CELLE 2-->

    </td></tr></table>
    </td></tr></table>