HTML tabeller 1.0: Hvordan lage tabeller i HTML

Det er strengt tatt ikke nødvendig å ha inngående kjennskap til HTML for å bygge HTML tabeller. Byggeklossene som kreves er avgrenset fra annen HTML, og fungerer dermed helt fint på egenhånd. Etter å ha lest denne artikkelen bør du har nok kunnskap til å bygge dine egne HTML tabeller, som du kan implementere i nyhetsbrevene dine eller andre steder.

Alle HTML tabeller består av et skjelett på samme måte som mennesker og dyr. Skjelettet er predefinert og helt fundamentalt for at tabellens struktur skal kunne opprettholdes. La oss først ta en titt på hva skjelettet består av.

Standard oppsett for HTML tabeller

<table>
  <thead>
    <tr>
      <th>Overskrift</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Innhold</td>
    </tr>
  </tbody>
</table>

<table> – EN HTML tabell defineres ved <table>. Siden alle HTML tagger krever en avslutning må vi også avslutte tabellen ved </table>.
<thead> – Gruppering av overskrifter i tabellen. Avsluttes ved </thead>.
<tbody> – Gruppering av innhold i tabellen. Avsluttes ved </tbody>.
<tfoot> – Gruppering av bunnen i tabellen. Avsluttes ved </tfoot>.
<tr> – Definerer en ny rad i tabellen. Raden avsluttes ved </tr>.
<th> – Definerer en celle innenfor en rad av overskrifter. Avsluttes ved </th>.
<td> – Definerer en celle innenfor en rad i tabellens innhold. Avsluttes ved </td>

Noen små bemerkninger

<th> og <td> er nesten akkurat det samme. Den eneste forskjellen er at <th> lever innenfor <thead> og <td> hører hjemme innenfor <tbody>.

<thead>, <tbody> og <tfoot> er er grupperinger og vil ikke være synlig på samme måte som de andre elementene. Disse elementene gjør det lettere å få de delene av tabellene de representerer til å oppføre seg på samme måte.

Praktisk eksempel: Bygg en størrelsesguide for herreskjorter

Vi har fått i oppdrag å lage en størrelsesguide for herreskjorter. Attributtene vi skal vise frem er skreddersydde størrelser, størrelse, EU, krage (cm) og krage (inch). Det kan være behjelpelig å tegne tabellen på et ark først, så du har det helt klart for deg hvordan tabellen skal se ut.

Da er det på tide å åpne opp Codepen og bygge tabellen fra scratch. Vi vil utvide tabellen etterhvert som vi lærer mer. Klikk på Create > Pen (ikke fra template) øverst i venstre hjørnet. Du kan også med fordel minimere CSS- og JS panelene for å gi HTML koden litt mer plass (minimize CSS Editor, minimize JS Editor).

Vår nye Pen etter at CSS- og JS panelene er minimert.

HTML empty

Siden alle tabeller har samme skjelettet kopierer vi bare koden over inn i det sorte feltet. Hvis det ikke dukker opp noe i det hvite feltet under, må du klikke ett annet sted innenfor det sorte feltet.

HTML tabell skjelett

Forhåndsvisningen av det vi koder foregår i det hvite feltet under det sorte feltet vi jobber i. Det er svært lite av dette som minner om en tabell, men det skal vi nå gjøre noe med. Legg til border=»1″ som en attributt på tabellen.

HTML border
Nå ser det endelig mer ut som en tabell, uten at det er et designmessig unikum. Vi ønsker også å gi elementene i tabellen litt mer plass, så det ikke ser så trangt ut. Legg til cellpadding=»10″ som en ny attributt på tabellen.

HTML cellpadding

Da er fundamentet for tabellen ferdig og vi kan begynne å lage størrelsesguiden. Kravspekken fra butikken som har bestilt tabellen er at den skal inneholde fem av skjortens attributter: Skreddersydde størrelser, størrelse, EU, krage (cm) og krage (inch). La oss kode det inn som overskrifter (<th>) i tabellen.

HTML head

Det gjenstår kun å legge inn de forskjellige størrelsene som vi har fått tilsendt i et Excel-ark. Hver rad (<tr>) er en skjorte og hver kolonne (<td>) innenfor hver rad er en størrelse. For enkelthetens skyld har butikken denne skjorten tilgjengelig i kun tre størrelser.

HTML-body

Jeg er ikke veldig stor tilhenger av den avstanden vi har mellom cellene i tabellen. Nå har både hele tabellen og hver enkelt celle en ramme rundt seg (husk at vi satt border til 1), som strengt tatt ser litt 1990 ut. Vi kan fjerne mellomrommet og da også slå sammen rammene, ved å legge til cellspacing=»0″ som attributt på tabellen.
HTML cellspacing

Det siste vi skal gjøre er å lage tabellen bredere. Vi skal sørge for at den alltid er 100% av bredden i den konteksten koden limes inn i. Dvs at hvis tabellen introduseres inn i et element som er 500px bredt, vil tabellens brede også være 500 pixler. Vi legger til en siste attributt, width, på tabellen og setter den til 100%.

HTML width

Slik bygges altså en tabell i HTML. Helt vanlig tekstinnhold satt i system. Jeg er enig at den ser litt kjedelig ut, og det er noe vi skal gjøre noe med i neste artikkel om stilsetting av HTML tabeller.

All kode for tabellen:

<table border="1" cellpadding="10" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Skreddersydde størrelser</th>
      <th>Størrelse</th>
      <th>EU</th>
      <th>Krage (cm)</th>
      <th>krage (inch)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>48</td>
      <td>S </td>
      <td>37</td>
      <td>37</td>
      <td>14.5</td>
    </tr>
    <tr>
      <td>50</td>
      <td>M</td>
      <td>39</td>
      <td>39</td>
      <td>15.5</td>
    </tr>
    <tr>
      <td>52</td>
      <td>L</td>
      <td>42</td>
      <td>42</td>
      <td>17</td>
    </tr>
  </tbody>
</table>

Flere ressurser:
👉 Hvordan bygge HTML for nyhetsbrev
👉 Validering av HTML kode

About the author

Related Posts