Tabeller

Skrevet av: GratisGuide.net

I HTML kan tabeller bruker til så mye. Mest vanlig er nok å organisere innholdet på en nettside, da tabeller er et glimrende layout-verktøy. Det kan være litt vanskelig å forstå hvordan tabeller fungerer og hvordan HTML-koden for de skal bygges opp, men etter å ha lest denne artikkelen burde du være i stand til å håndtere HTML-tabeller med letthet (hvis ikke får du si fra til oss!).

Vi skal bygge opp en tabell som ser noenlunde slik ut:

-------------------
|     |     |     |
-------------------
|     |     |     |
|     |     |     |
|     |     |     |
-------------------
|                 |
-------------------

Tabellen vår skal ha fem rader og tre kolonner. Den øverste raden skal inneholde kolonneoverskrifter og den nederste raden skal inneholde en fotnote som dekker alle tre kolonnene.

Vi starter først med å bygge opp siden der vi skal ha tabellen vår:

Vi sier her at dokumentet vårt følger HTML v4.01-standarden, at det har tittelen «En eksempel-tabell», at det faktisk er et HTML-dokument, og at det benytter tegnsettet ISO 8859-1. Vi har også startet merket for dokumentets hoveddel, body.

Så da begynner vi like godt med tabellen vår. Alle tabeller i HTML består av merket table. Hvilke andre merker som skal med i tillegg avhenger av hva slags tabell vi skal lage. I vår tabell vil vi benytte tr, th og td. Hva disse merkene betyr skal vi forklare om litt.

I merket table kan vi angi hvor bred tabellen vår skal være, med attributten width. Vi vil at tabellen vår skal være 30% av tilgjengelig bredde. Siden tabellen vår blir eneste innhold på vår side, vil det si 30% av sidens bredde. Hadde vi lagt tabellen vår inn i en annen tabell-celle som dekker 50% av sidens bredde, ville vår tabell bli 30% av disse 50%. Vi vil at det skal være en tynn ramme rundt tabellen vår, og det kan vi angi med attributten border som vi setter til 1 piksels bredde. Tabellrammens utseende er nettleseravhengig, men dette kan styres med stilark.

I tabellen vår vil vi ha en overskrift for kolonnene våre. Det kan vi lage i en rad for overskrift på denne måten:

<tr>
  <th>Beskrivelse</td>
  <th>Pris ekskl. mva</td>
  <th>Pris inkl. mva</td>
</tr>

Her har vi definert overskriften vår; en rad (tr, tabellrad - table row) med tre celler (th, tabell-overskrift - table header). I cellene har vi lagt inn beskrivende tekst for kolonnene våre. Legg merke til at vi velger å avslutte merkene med </th> og </tr>, selv om dette strengt tatt ikke er nødvendig.

Da det bare å fylle tabellen med informasjon. Vi gjør dette med nye tabell-rader og merket td; tabell-celle - table detail.

<tr>
  <td>Gule pels-ørevarmere</td>
  <td>13,71</td>
  <td>17,00</td>
</tr>
<tr>
  <td>Fiolette ullsokker</td>
  <td>23,39</td>
  <td>29,00</td>
</tr>
<tr>
  <td>Grønne bomullsvanter</td>
  <td>20,08</td>
  <td>24,90</td>
</tr>

Her har vi lagt til tre rader, hver med tre celler. Første celle med litt tekst, andre celle med pris ekskl. mva og tredje celle med pris inkl. mva. Her kan vi legge til flere rader, ved å føye til nye tr-merker hver med tre td-merker i seg. Vær oppmerksom på at forskjellige nettlesere behandler manglende tabellceller forskjellig; så en god regel er å alltid ha med like mange celler i hver tabellrad. Fyll cellene med   dersom du ikke har noe innhold å legge i dem (  er en fast orddeler, mellomromsslag).

Da er det bare å avslutte med bunnteksten vår, som vi vil skal dekke alle tre kolonner. Det gjør vi ved å føye til en ny rad der vi angir en celle og at denne cellen skal dekke tre kolonner samt at teksten i cellen skal være midtstilt:

<tr>
<td colspan="3" align="center">Alle priser i norske kroner</td>
</tr>

Her sier vi med attributten colspan i merket td at cellen skal spenne over tre kolonner (colspan = column span). Med attributten align kan vi justere teksten. Vi har valgt å midtstille den, med verdien center. Andre mulige verdier er left for venstrejustert og right for høyrejustert. En fjerde mulig verdi er justify der tekst fylles på linjene, som i en avisspalte, og char der tekst justeres etter et angitt tegn (for eksempel komma - for prisene våre). Disse to siste verdiene har liten støtte i nettlesere og er derfor lite brukt.

Vi er ferdig med tabellen vår, og avslutter derfor de åpne merkene:

</table>
</body>
</html>

Nedenfor ser du hele HTML-koden ferdig og korrekt oppstilt. Det er bare å klippe-og-lime og jobbe videre med den :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
  <title>En eksempel-tabell</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
  <table width="30%" border="1">
    <tr>
      <th>Beskrivelse</th>
      <th>Pris ekskl. mva</th>
      <th>Pris inkl. mva</th>
    </tr>
    <tr>
      <td>Gule pels-ørevarmere</td>
      <td>13,71</td>
      <td>17,00</td>
    </tr>
    <tr>
      <td>Fiolette ullsokker</td>
      <td>23,39</td>
      <td>29,00</td>
    </tr>
    <tr>
      <td>Grønne bomullsvanter</td>
      <td>20,08</td>
      <td>24,90</td>
    </tr>
    <tr>
      <td colspan="3" align="center">Alle priser i norske kroner</td>
    </tr>
  </table>
</body>
</html>

Opphavsrett

Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/artikler/html/tabeller.html.

Tilbake til Artikler / HTML og CSS