Tabeller
Taggen <table>, <tr> och <td>
En tabell (eng. table) används för att organisera data på ett enkelt sätt.
Tabeller används väldigt ofta till något som de inte är avsedda för, nämligen som behållare i menyerna på en webbsida, där varje länk i menyn läggs i en tom cell, något som ofta, felaktigt, rekommenderas i många gamla hemsidesguider. 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 hålla data - ingenting annat!
Tabellens attribut: width, border, tr och td
En tabell tillhör nog bland det krångligaste inom HTML - vilket ioförsig inte säger så mycket om svårighetsgraden. HTML är nämligen, som nämnts tidigare, ett rätt igenom väldigt enkelt markup-language.
Här följer en förklaring av tabellens attribut. Ett attribut bestämmer egenskaperna (läs: utseende) hos ett visst element.
- tr: <tr> talar om att en ny tabellrad börjar och </tr> talar om att en tabellrad avslutas.
- td: <td> talar om att en ny tabellcell börjar och <td> talar om att en tabellcell avslutas.
- width: Tabellens bredd.
- border: Tabellens kantlinje.
Kommentar: Width och border ska egentligen inte infogas i XHTML-koden om du strävar efter att följa strict CSS-standard (det är nämligen HTML). Du kommer att lära dig att sätta dessa värden på ett korrekt sätt senare med hjälp av CSS. Och om du INTE gör det så är det ingen större fara och har knaptt någon pm helst betydelse. Allt är inte petnoga så länge som sajten ser bra ut i webbläsaren.
Taggen för tabeller börjar med <table +[attribut]> och avslutas med </table>
Tabell-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 samma sak som 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.
Table header
Tabeller är som nämnts till för att lagra data och en table header är till för att markera fält som inte ingår i datan. Headers kan användas exempelvis om du vill ge en tabell namn för de olika fälten. En mer ingående förklaring av detta är knappast nödvändig då du troligtvis inte kommer att använda tabellcellerna för transport av data när du enbart sysslar med grundläggande webbdesign. Jag gör det exempelvis aldrig själv.
| 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>
