HTML Tabell
Tabeller används för att strukturera upp data och ofta läggs hela sidors innehåll in i tabeller
För att skapa en tabell börjar du med att lägga till
<table>
i ditt html-dokument och för att avsluta skriver du
</table>
. Dessa två taggar skapar i sig inga celler utan du måste lägga till rader och cell själv. För att skapa en kolumn skriver du
<td> och för att avsluta skriver du
</td>. Detta ger alltså:
<table>
<tr>
<td>Detta är kolumn 1</td>
<td>Detta är kolumn 2</td>
</tr>
</table>
| Detta är kolumn 1 |
Detta är kolumn 2 |
Observera att att html-koden inte inkluderar ramar, dessa är där per automatik om ej annat angets.
Varje uppsätning
<tr></tr> skapar en ny rad, vill vi ha fler än en rad lägger vi alltså till flera
<tr> taggar. Vilket ger:
<table>
<tr>
<td>Detta är cell 1</td>
<td>Detta är cell 2</td>
</tr>
<tr>
<td>Detta är cell 3</td>
<td>Detta är cell 4</td>
</tr>
</table>
| Detta är cell 1 | Detta är cell 2 |
| Detta är cell 3 | Detta är cell 4 |
Om du vill se cellerna eller skapa kanter kring dem lägger du till borders. För att skapa en border lägger du till den i
<table> genom att skriva
border="X" där X är ett heltal större än 0. Glöm inte
" "!
Du kan experimentera med olika värden på X. Detta ger:
<table border="5">
<tr>
<td>Detta är ruta 1</td>
<td>Detta är ruta 2</td>
</tr>
<tr>
<td>Detta är ruta 3</td>
<td>Detta är ruta 4</td>
</tr>
</table>
| Detta är ruta 1 |
Detta är ruta 2 |
| Detta är ruta 3 |
Detta är ruta 4 |
För att ändra färgen på ramarna använder du
bordercolor="färgkod".
Bakrundsfärgen i tabellen ändrar du med hjälp av
bgcolor="färgkod".
<table bgcolor="RED" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
ger alltså:
Du kan även använda den i endast en cell:
<table>
<tr>
<td bgcolor="RED">Färgad cell</td>
<td>Inte färgad</td>
</tr>
</table>
Observera att bordern inte blir färglagd.
Cellerna ligger "ovanpå" tabellen, hur påverkar detta oss? Om vi provar:
<table bgcolor="BLUE" border="1">
<tr>
<td bgcolor="GREEN">Cell 1</td>
<td bgcolor="RED">Cell 2</td>
</tr>
</table>
Får vi istället för Blått:
Eftersom vi gillar blått så måste öka mellanrummet mellan cellerna. Detta gör vi med
cellspacing="X" där X är ett tal större än 0.
<table bgcolor="BLUE" border="1" cellspacing="50">
<tr>
<td bgcolor="GREEN">Cell 1</td>
< bgcolor="RED">Cell 2</td>
</tr>
</table>
För att ändra tabellens bredd använder du
width="X" där X blir tabellens bredd i pixlar.
<table width="400" border="1">
<tr>
<td>Detta är ruta 1</td><td>Detta är ruta 2</td>
</tr>
<tr>
<td>Detta är ruta 3</td><td>Detta är ruta 4</td>
</tr>
</table>
| Detta är ruta 1 | Detta är ruta 2 |
| Detta är ruta 3 | Detta är ruta 4 |
För att bara ändra storlek på en cell använder du den som vanligt i cellen.
<table width="400" border="1">
<tr>
<td width="50">Detta är ruta 1</td><td>Detta är ruta 2</td>
</tr>
</table>
| Detta är ruta 1 | Detta är ruta 2 |
För att ändra tomrummet mellan cellernas innehåll och dess kanter används
cellpadding="X" vilket ger:
<table cellpadding="50" border="1">
<tr>
<td>Detta är ruta 1</td><td>Detta är ruta 2</td>
</tr>
</table>
| Detta är ruta 1 | Detta är ruta 2 |
Om du vill skapa en rubrik, eller en cell som täcker flera kolumner använder du
coldspan="X". Denna tag används tillsammans med td:
<table border=1>
<tr>
<td colspan="3">Den här cellen täcker flera kolumner</td>
</tr>
<tr>
<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
</tr>
</table>
| Den här cellen täcker flera kolumner |
| Cell 1 | Cell 2 | Cell 3 |
På samma sätt kan du använda
rowspan="X" för att skapa celler som täcker flera rader.
Försök att skapa en liknande gubbe: