Tabellerna är ganska komplexa strukturer som består av rader och kolumner. Den yttre grundstrukturen för tabeller utgörs alltid av elementet table.
<table> … </table>
Inom detta element sker den faktiska tabelldefinitionen. Det är förresten rekommenderat att tilldela en ram till en tabell i HTML under implementeringen. På så sätt kan man bättre förstå hur rader och kolumner exakt löper. För detta tilldelar man attributvärdkombinationen border="1" till det inledande <table>. (Observera att border-attributet inte ska användas i HTML. Här bör man istället använda motsvarande CSS-egenskaper. Mer om detta senare).
<table border="1"> … </table>
Nästa steg är att definiera tabellradernas struktur. Detta görs med elementet tr.
<table border="1"> <tr></tr> </table>
Även detta resulterar inte i önskat utseende ännu. Nästa steg är att faktiskt definiera kolumnerna. Detta görs genom elementet td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Nu kan du definiera tabellens första innehåll. Detta görs mellan <td> och </td>.
<table border="1">
<tr>
<td>Innehåll 1</td>
</tr>
</table>
Först nu är det värt att titta på resultatet i webbläsaren.
Särskilt spektakulärt är det säkert ännu inte, eftersom tabellen för närvarande bara består av en cell. Du kan nu lägga till en annan kolumn. Detta görs igen genom ett td-element. Se till att definiera detta inom tr-elementet.
<table border="1">
<tr>
<td>Innehåll 1</td>
<td>Innehåll 2</td>
</tr>
</table>
Också här en titt på resultatet.
För att lägga till ytterligare rader i tabellen, lägger man bara till ett till tr-element där önskade td-element sedan definieras.
Här är ett exempel på detta:
<table border="1">
<tr>
<td>Innehåll 1</td>
<td>Innehåll 2</td>
</tr>
<tr>
<td>Innehåll 3</td>
<td>Innehåll 4</td>
</tr>
</table>
En titt på resultatet i webbläsaren visar följande:
På detta sätt kan du skapa omfattande tabeller.
Ställa in Rubrik, Kropp och Fot
Tabeller kan delas in i logiska områden. Detta inkluderar en rubrik, en eller flera datarader och en fotrad. Följande exempel visar hur det kan se ut:
<table border="1">
<thead>
<tr>
<th>Avgång</th>
<th>Ankomst</th>
<th>Perrong</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlin</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlin</td>
<td>3</td>
</tr>
</tbody>
</table>Och här en titt på resultatet i webbläsaren:
Att dela upp det i dessa områden ger uppenbarligen inte någon visuell effekt. En fråga uppstår naturligtvis: Varför ska man då anstränga sig och definiera dessa områden? Det finns två goda skäl till detta:
• Med hjälp av CSS kan områdena formateras olika vid behov.
• Webbläsarna kan upprepa tabellrubriken och tabellfoten på varje sida när långa tabeller skrivs ut.
Tabellrubriken introduceras med thead. Detta följs av tabellens rader som tillhör huvuddelen. Glöm inte att avsluta huvuddelen med </thead>.
Om tabellen ska ha en tabellfot måste denna definieras innan tabellkroppen. Fotdelningen inleds med <tfoot>. Sedan kan en eller flera rader följa, som tillhör fotdelen. Avsluta foten med </tfoot>.
Tabellens faktiska kropp definieras inom elementet tbody. Detta tbody kan förekomma flera gånger. En tabellkropp avslutas alltid med </tbody>.
Varför skulle man till exempel använda flera tbody-element i en tabell? Ett bra exempel på detta skulle kunna vara tabellen för Bundesliga. I en sådan tabell finns vanligtvis flera områden.
• Mästare
• Champions League-deltagare
• Champions League-kvalificerade
• Europa League-deltagare
• Den gråa mitten
• Kvalificering för nedflyttning
• Nedflyttade
Man kan placera varje av dessa områden i ett eget tbody-element och sedan formge dem på olika sätt med CSS.
Fördefiniera kolumner
Hur tabellen visas av webbläsare beror naturligtvis främst på antalet rader och kolumner som finns. Processen att visa en tabell är dock inte helt enkel för webbläsaren. Faktum är att en webbläsare alltid måste läsa in hela tabellen innan den kan visa den. Särskilt med väldigt omfattande tabeller kan detta naturligtvis ta lite tid. Detta problem kan undvikas genom att direkt informera webbläsaren om hur många kolumner tabellen faktiskt består av.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kortfattad historia om nästan allting</td>
<td>29,95 Euro</td>
</tr>
</table>
Genom colgroup inleds fördefinieringen av kolumnspecifikationerna. Observera att de flesta attributen för colgroup som tidigare fanns tillgängliga i äldre HTML-versioner inte längre är tillåtna i HTML5. Nu tillåts endast attributet span. Det förväntade värdet för detta span-attribut är antalet kolumner som finns i tabellen.
Elementet colgroup placeras direkt bakom inledande <table>. Kolumnerna definieras sedan genom de enskilda col-elementen.
När man använder colgroup finns i princip två alternativ:
• Med span-attribut
• Utan span-attribut
Om man inte använder span-attributet, måste det inom colgroup-elementet definieras ett col-element för varje kolumn som spaltgruppen ska omfatta. Observera att col är ett fristående element.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kortfattad historia om nästan allting</td>
<td>29,95 Euro</td>
</tr>
</table>
Det finns förresten också en blandform.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Det är alltid praktiskt när en kolumn ska fördefinieras separat, men de andra ska grupperas ihop.
