I dette eksempelet blir bildefilene under brukt. Høyreklikk på bildene og velg "Lagre bilde som..." for å bruke disse hvis du følger eksempelet ved å skrive kode selv.

bakgrunn_overskrift.jpg:    
smiley.gif:    

Vi begynner med å lage en tabell med fargen til rammen som bakgrunnsfarge. Inni denne tabellen skal vi lage flere andre nøstede tabeller. Denne tabellen skal kun ha én celle, selv om det ser ut som den har flere.
Her er koden til den ytre tabellen.

 
Egenskapen cellpadding="1" gjør at innholdet i cellene til denne tabellen blir laget 1 pixel fra kanten, fra alle fire sider. Det er dette som ser ut som en ramme på den ferdige tabellen. Vi har nå en blå tom tabell.

Vi skal nå lage tabellen som deler opp det hele i overskrift og innhold. Vi lager tre celler i den nye tabellen, og setter en bakgrunnsfarge til innholdsdelen av tabellen.

 
Vi har satt inn 3 celler i tabellen, der den midterste cellen har fått en høyde på 1 pixel. Dette er linjen som skiller overskriftscellen fra innholdscellen. Denne linjen er ikke synlig ennå, fordi overskriftscellen har samme farge som linjen.

Til slutt setter vi inn innholdet i overskriftscellen og innholdscellen. Jeg har her valgt å sette inn en tabell i overskriftscellen for å vise hvordan man kan organisere innholdet i disse cellene akkurat slik man vil ha det. Innholdet i innholdscellen er kun ren tekst. Dette er selvfølgelig også mulig.

 
Nå vil det være en god fortsettelse å lese eksemplene under DHTML for å lære hvordan man kan benytte dynamisk HTML for å skape liv i denne tabellen.