Summary  
This chapter explains how to create and structure HTML tables using the table, tr, th, td, caption, thead, and tbody elements to organize tabular data.

General domain of usage  
Menus

Tabeller hjelper til med å presentere strukturert data som timeplaner, kalendere, regnskapsoversikter, menyer og prislister. HTML tilbyr flere elementer for å lage tabeller.

Viktige tabellelementer:
- `<table>`: tabellbeholder;
- `<tr>`: en rad;
- `<th>`: en overskriftscelle (fet, sentrert);
- `<td>`: en vanlig datacelle.

Nedenfor bygger du en enkel menytabell steg for steg.

## Steg 1: Sett opp HTML-strukturen
Start med å lage den grunnleggende HTML-strukturen for siden din:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```

## Steg 2: Definer tabellen
Inne i `<body>`-elementet legger du til `<table>`-taggen for å definere tabellen:
```html
<table>
  
</table>
```

## Steg 3: Legg til en tabelltittel (valgfritt)
Hvis du vil gi tabellen en tittel, kan du bruke `<caption>`-taggen:
```html
<table>
  <caption>New menu</caption>
  
</table>
```

## Steg 4: Opprett tabelloverskrifter
Legg deretter til tabelloverskriftene innenfor `<thead>`-elementet. Hver overskrift defineres med `<th>`-taggen:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  
</table>
```

## Steg 5: Fyll ut tabellen med data
Bruk `<tbody>`-elementet for å omslutte tabellradene og `<td>`-tagger for å definere cellene som inneholder dataene:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>
```

## Fullstendig kode
Ta gjerne et øyeblikk for å undersøke alle elementene nøye slik at forholdet mellom dem blir tydelig.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDwhLS0gTGluayB0byBleHRlcm5hbCBzdHlsZXNoZWV0IC0tPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHRhYmxlPgogICAgICA8IS0tIFRhYmxlIHRpdGxlOiBEZXNjcmliZXMgdGhlIGNvbnRlbnQgb2YgdGhlIHRhYmxlIC0tPgogICAgICA8Y2FwdGlvbj4KICAgICAgICBOZXcgTWVudQogICAgICA8L2NhcHRpb24+CgogICAgICA8IS0tIFRhYmxlIGhlYWRlcjogRGVmaW5lcyBjb2x1bW4gaGVhZGluZ3MgLS0+CiAgICAgIDx0aGVhZD4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGg+Q2F0ZWdvcnk8L3RoPgogICAgICAgICAgPHRoPk1lYWw8L3RoPgogICAgICAgICAgPHRoPlByaWNlPC90aD4KICAgICAgICA8L3RyPgogICAgICA8L3RoZWFkPgoKICAgICAgPCEtLSBUYWJsZSBib2R5OiBDb250YWlucyB0aGUgbWFpbiBjb250ZW50IG9mIHRoZSB0YWJsZSAtLT4KICAgICAgPHRib2R5PgogICAgICAgIDwhLS0gUm93IDE6IERldGFpbHMgZm9yIGFuIGFwcGV0aXplciAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+QXBwZXRpemVyPC90ZD4KICAgICAgICAgIDx0ZD5HYXJsaWMgU2hyaW1wczwvdGQ+CiAgICAgICAgICA8dGQ+JDg8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMjogRGV0YWlscyBmb3IgYSBwYXN0YSBkaXNoIC0tPgogICAgICAgIDx0cj4KICAgICAgICAgIDx0ZD5QYXN0YTwvdGQ+CiAgICAgICAgICA8dGQ+TG9ic3RlciBMaW5ndWluZSBOb29kbGVzPC90ZD4KICAgICAgICAgIDx0ZD4kMTY8L3RkPgogICAgICAgIDwvdHI+CiAgICAgICAgPCEtLSBSb3cgMzogRGV0YWlscyBmb3IgYSBzYW5kd2ljaCAtLT4KICAgICAgICA8dHI+CiAgICAgICAgICA8dGQ+U2FuZHdpY2g8L3RkPgogICAgICAgICAgPHRkPkxvYnN0ZXIgVGFpbCBTYW5kd2ljaDwvdGQ+CiAgICAgICAgICA8dGQ+JDExPC90ZD4KICAgICAgICA8L3RyPgogICAgICA8L3Rib2R5PgogICAgPC90YWJsZT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogCiAgV2UgY29sbGFwc2UgdGhlIGJvcmRlcnMgb2YgZWFjaCBjZWxsLiAKICBCeSBkZWZhdWx0IGVhY2ggY2VsbCBoYXMgaXRzIG93biBib3JkZXJzIAogIHdoaWNoIGFyZSBub3QgY29ubmVjdGVkLgoqLwp0YWJsZSB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKfQoKLyogCiAgQWRkIGEgYm9yZGVyIGFuZCBwYWRkaW5nIHRvIHRoZSBjZWxscywgCiAgdGhlIGRpc3RhbmNlIGZyb20gdGhlIGNvbnRlbnQgdG8gdGhlIGJvcmRlci4KKi8KdGFibGUgdGgsCnRhYmxlIHRkIHsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwp9

Som standard har HTML-tabeller ingen spesifikk visuell stil. For å tilpasse tabellens utseende, legg til CSS-stiler i en egen CSS-fil eller innenfor en `<style>`-tagg i HTML-filens `<head>`-seksjon.

Det er imidlertid ikke nødvendig å gå inn på CSS på dette stadiet, siden fokuset nå kun er på HTML.
Hvis du ønsker å se hvordan tabellen ser ut uten CSS-styling, kan du fjerne linje 4: `<link rel="stylesheet" href="index.css" />`, som importerer CSS-stilene.

 

Merk

Hvilket HTML-element brukes til å definere en tabell på en nettside?

Hvilket HTML-element brukes til å definere en rad i en tabell?

Hva er formålet med `<th>`-elementet i en HTML-tabell?

Lær det grunnleggende i HTML (HyperText Markup Language), grunnlaget for webutvikling. Dette nybegynnervennlige kurset dekker tags, attributter, elementer og strukturering av nettsider. Få praktiske ferdigheter i å lage overskrifter, avsnitt, lister, bilder, lenker, skjemaer og tabeller. Utforsk beste praksis, optimalisering og webtilgjengelighet. Start din webutviklingsreise med HTML.

Utforsk allsidigheten til HTML-skjemaer. Lær å designe intuitive og brukervennlige skjemaer ved å utnytte nøkkelkonsepter og teknikker. Oppdag hvordan skjemaer muliggjør brukerinteraksjon og datasending på nettsteder.

Oppretting og strukturering av tabeller i HTML

Steg 1: Sett opp HTML-strukturen

Steg 2: Definer tabellen

Steg 3: Legg til en tabelltittel (valgfritt)

Steg 4: Opprett tabelloverskrifter

Steg 5: Fyll ut tabellen med data

Fullstendig kode

1. Hvilket HTML-element brukes til å definere en tabell på en nettside?

2. Hvilket HTML-element brukes til å definere en rad i en tabell?

3. Hva er formålet med `<th>`-elementet i en HTML-tabell?