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> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Kommentar: ä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"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </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"> </td>
<td width="90"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </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 >>>
