Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Tabeller i HTML

Hvordan man laver tabeller i HTML, og hvordan man stiler dem med CSS.

Redigeret: 2015-05-10 08:24

HTML living stadard logo anden orange udgave.

Tabeller blev før i tiden brugt til at præsentere sider, men er idag enten helt eller delvist erstattet af CSS. Det er kun yderst få tidspunkter, hvor tabeller er nemmere at anvende end deres CSS baserede alternativer. Det eneste tidspunkt hvor tabeller er bedre, er når der udvikles til gamle browsere. Eller hvis man arbejder med et layout som skal have lige høje kolonner, uanset hvilken der er den højeste.

Sidstnævnte skyldes at CSS alternativerne er vanskelige at vedligeholde eller ændre på, hvis man senere skal tilføje en kolonne til. Men det kan meget vel være, at nyere browsere vil understøtte flere funktioner fra CSS3, og således gøre det mere praktisk.

Foreløbigt, undgå den typpe layouts, og undgå at bruge tabeller, andre end de steder hvor det giver mening.

Tabeller i HTML

I HTML består tabeller af celler og rækker, men kan også inkludere hoved, fod, og andre former for grupperinger af celler og rækker.

En simpel tabel, som de fleste kender den, vil se ud som nedenfor:

Antal: Varer:
5 BlueBoden Action figur
3 TechFace på stranden VHS

Koden brugt til at lave tabellen kan ses nedenfor:

<table style="border:1px solid black;">
 <tr>
  <td>Antal:</td>
  <td>Varer:</td>
 </tr>
 <tr>
  <td>5</td>
  <td>BlueBoden Action figur</td>
 </tr>
 <tr>
  <td>3</td>
  <td>TechFace på stranden VHS</td>
 </tr>
</table>

Tabeller bliver normalt stilet på en bestemt måde af browseren, men det kan vi overskrive med CSS. Den nemmeste måde at sikre elementerne bliver fremvist som du selv vil, er ved at nulstille alt i dit CSS StyleSheet.

* {margin:0;padding:0;border:0;}

I ovenstående eksempel fjerner jeg margin og padding indstillinger på alle elementer. Jeg fjerner også kanterne, fordi jeg ved browseren kan finde på at tilføje kanter til visse elementer, eksempelvis tabeller.

Du kan så senere selv angive den stil du vil have for din tabel, i det her tilfælde har jeg bare angivet en standard kant i elementets style attribut.

style="border:1px solid black;"

Stiling af HTML tabeller

Man kan bruge border-collapse og border-spacing egenskaberne, hvilket svare til at bruge cellspacing attributten.

Attributten cellpadding kan erstattes med padding egenskaben. Det anbefales at bruge CSS egenskaberne hvor muligt.

Nedenfor ses et fuldt eksempel, der bruger CSS til at stile tabeller.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="da">

  <head>
    <title>Sådan laver du Tabeller</title>
    <style type="text/css">
    table, td {
     border:1px solid blue;
     border-collapse: collapse;
     border-spacing: 0;
    }
    </style>
  </head>

  <body>
    <h1>Sådan laver du Tabeller</h1>

    <table>
     <tr>
      <td>Antal:</td>
      <td>Varer:</td>
     </tr>
     <tr>
      <td>5</td>
      <td>BlueBoden Action figur</td>
     </tr>
     <tr>
      <td>3</td>
      <td>TechFace på stranden VHS</td>
     </tr>
    </table>
  </body>

</html>

border-collapse egenskaben, angiver om kanterne fra kolonner, skal være hægtet sammen med celle kanterne som en enkelt kant, eller om de skal være adskilt. Hvor border-spacing angiver afstanden imellem kanterne, hvis man angiver 2 tal i border-spacing, så vil det blive opfattet som den lodrette og vandrette afstand.

border-spacing: 0.2em 0.4em;

Billeder og Links - HTML Lister