HTML tabeller

I tabeller kan man ordna information i rader och kolumner.

Exempel:

Tabeller

Tabeller definieras med elementet <table> som omgärdar hela tabellstrukturen. En tabell delas in i rader med taggen <tr> och varje rad delas in i celler med hjälp av <td> taggen. Varje cell kan innehålla text, bilder, paragrafer, formulär etc.

Exemplet nedan visar HTML koden för tabellen ovanför.

HTML kod

<table border="1">
<tr>
<td>Ett</td>
<td>Adam</td>
</tr>
<tr>
<td>Två</td>
<td>Bertil</td>
</tr>
</table>

Attributet border gör så att tabellen visas med kantlinjer. Anges inte attributet ”border” så visas inga kantlinjer.

Tabeller till sidlayout

Ett ofta använt sätt att ordna layouten på webbsidan är att avända tabeller. Det kan i vissa fall vara ett praktiskt sätt men vår rekommendation är att istället utforma layouten med hjälp av den sk. boxmodellen. Detta sätt använder divisioner <div> med olika höjd och bredd som styrs med hjälp av en stilmall (css). Detta sätt ger fler möjligheter och är ett enklare sätt att bygga upp en webbsida. Läs mer om boxmodellen.

Överskrifter och rubriker i tabeller

Elementet <caption> anger en överskrift till tabellen som visas centrerad ovanför tabellen.

Elementet <th> som används istället för <td> gör att texten i en cell blir fet och centrerad.

HTML kod

<table border="1">
<caption>Överskrift</caption>
<tr>
<th>Rubrik 1</th>
<th>Rubrik 2</th>
</tr>
<tr>
<td>Ett</td>
<td>Adam</td>
</tr>
<tr>
<td>Två</td>
<td>Bertil</td>
</tr>
</table>

Exempel

Mer struktur i tabeller

Elementen <thead&gt, <tbody&gt och <tfoot&gt kan användas för att dela upp en tabell i en head-del, en body-del och en foot-del. Fördelen med att använda dessa element är att tabellen blir lättare att dekorera med stilmallar (css) samt att påverka med script.

<table border="1">
<thead style="background-color:red">
<tr><td>Sidhuvud</td><td>Sidhuvud</td></tr>
</thead>
<tfoot style="background-color:blue">
<tr><td>Sidfot</td><td>Sidfot</td></tr>
</tfoot>
<tbody>
<tr><td>Kolumn 1 - Rad 1</td><td>Kolumn 2 - Rad 1</td></tr>
<tr><td>Kolumn 1 - Rad 2</td><td>Kolumn 2 - Rad 2</td></tr>
</tbody&gt
</table>