En tabell (eng. table) används för att organisera data på ett enkelt sätt.

Tabellen är en av de krångligare sakerna att bygga upp med XHTML, men inte för den skull sagt att det är speciellt svårt. Här lär du dig det du behöver veta.

Attribut: width, border, tr och td

Här följer en förklaring av tabellens attribut. Ett attribut bestämmer egenskaperna (läs: utseende) hos ett visst element:

<tr>
talar om att en ny tabellrad börjar och </tr> talar om att en tabellrad avslutas.

<td>
talar om att en ny tabellcell börjar och <td> talar om att en tabellcell avslutas.

width
Tabellens bredd.

border
Tabellens kantlinje.

Exempel:

   
   
   

<table width="200" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Kommentar:&nbsp; är specialkod för ett blanksteg.

I tabellen som presenterades ovanför blev tabellcellerna automatiskt lika stora eftersom vi inte angav något värde för dessa. Om vi vill ha den ena tabellcellen 100px och den andra 200px så ser koden ut såhär:

<table width="300" border="1">
<tr>
<td width="100">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Detta kommer att skapa en tabell som ser ut såhär:

   
   
   

Som du ser om du tittar i koden så behöver inte den andra tabellcellen definieras eftersom vi har angett tabellens totala bredd samt de vänstra tabellcellernas bredd.

Vidare.. om vi har en tabell med bredden 400 pixlar och 3 fält...

     
     
     

...så ser koden ut såhär:

<table width="400" border="1">
<tr>
<td width="100">&nbsp;</td>
<td width="90">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Du måste alltså definiera alla tabellcellers bredd utom det sista som automatiskt bestäms eftersom vi angett den totala bredden på tabellen.

Exempel, colspan

Vi kan även skapa en tabell med varierat antal kolumner genom att använda colspan.

     
   
     

Koden ser ut så här:

<table border="1" width="300">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Table header

Tabeller är som nämnts till för att lagra data och en table header är tänkta som rubriker till fälten som ingår i datan.

Table header Table header Table header
     

Kod för ovanstående header:

<table width="400" border="1">
<tr>
<th>Table header </th>
<th>Table header </th>
<th>Table header</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>v
</table>

Detta ska du inte använda tabeller till

Tabeller används väldigt ofta till något som de inte är avsedda för, nämligen som designelement och som behållare i sidomenyer.

Nackdelen med att använda tabeller på detta sätt är att du kommer att stoppa in onödigt mycket presentationskod på din hemsida och att texten som befinner sig inom en tabell tar något längre tid att ladda än om den bara ligger i en lista eller helt fritt.

Innan CSS kom var det förståeligt att man använde tabellerna felaktigt eftersom det var svårt att designa sidan på ett smidigt sätt, men nu finns det faktiskt ingen ursäkt för att bygga på det sättet längre. Tabellerna är till för att orgainsera data, ingenting annat.

<<< Listor || Validera kod >>>

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)