Introduktion: Tabeller kan vara nyttigt till mycket. Cellerna kan vara stora som hela sidor, eller små så det bara får plats ett tecken. Oavsett vad så kommer tabeller till användning väldigt ofta. Tidigare användes dem som en designers främsta element, men på senare tid har CSS tagit över den rollen allt mer. Någ babblat, jag tycker vi sätter igång med tabellerna! Vi börjar direkt med ett kodexempel:

<table width="80%" border="1">
<tr>
<td width="50%"> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>

Exemplet ser ut så här:

Då går vi igenom de olika elementen lite närmare...

<table width="80%" border="1"> - Sätter bredden på tabellen till 80% av skärmbredden. Border="1" sätter en liten kant runt om tabellen, som du ser. Om du inte skriver in rambredden är standardvärdet 0.

<tr> - Table row. Definerar när en ny rad ska börja i tabellen.

<td> - Table data. Definerar en ny cell. Som ni ser har jag satt bredden till 50%. Eftersom vi bara har två celler bredvid varandra, innebär det att bredden delas lika på båda cellerna. Man behöver inte definera sista cellen, den tar automatiskt det som är kvar av tabellen.

Kom ihåg att dessa kommandon är väldigt viktiga att "stänga". Vissa läsare förstår inte alls vad du skrivit om du inte stängt tabellen, vilket resulterar i en blank skärm.

Det lättaste sättet att lära sig att hantera tabeller är att experimentera med dem. I början kräver det en hel del tankeverksamhet, men det är värt besväret!

Mer avancerade tabelluppsättningar: Ibland behöver man ha en cell som går över två rader, eller två kolumner. Eller både och för den sakens skull. För detta ändamål finns colspan och rowspan. Vi bygger ett litet, men ganska avancerat, exempel för att visa hur det går till.

<table border="1" width="300">
<tr>
<td rowspan="2" width="100">Rowspan=2</td>
<td colspan="2">Colspan=2</td>
</tr>
<tr>
<td width="100"> </td>
<td width="100"> </td>
</tr>
<tr>
<td rowspan="2" colspan="2">rowspan=2, colspan=2</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Hängde ni med? Jag är imponerad om du gör det vid första anblicken! Men om du tittar närmare, och tar hjälp av fuskhjälpen nedan (resultatet av harangen), så kommer du snart se att det inte är så krångligt. Det gäller bara att ha tungan rätt i mun och tänka igenom hur du ska bygga upp din tabell.

Det var en riktig snabbkurs i tabeller, vi har bara en sak kvar vad gäller dem, och det är hur man ändrar färger i dem.