Summary  
This chapter explains how to structure HTML tables by using the `<table>`, `<caption>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>` elements to organize rows, headers, and data cells.

General domain of usage  
Presenting structured data in web pages

Tabeller hjælper med at præsentere strukturerede data såsom tidsplaner, kalendere, finansielle optegnelser, menuer og prislister. HTML tilbyder flere elementer til opbygning af tabeller.

Primære table-elementer:
- `<table>`: tabelbeholderen;
- `<tr>`: en række;
- `<th>`: en overskriftscelle (fed, centreret);
- `<td>`: en almindelig datacelle.

Nedenfor opbygges en simpel menutabel trin for trin.

## Trin 1: Opsæt HTML-strukturen
Start med at oprette den grundlæggende HTML-struktur for din side:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```

## Trin 2: Definer tabellen
Indsæt `<body>`-tagget inde i `<table>`-elementet for at definere tabellen:
```html
<table>
  
</table>
```

## Trin 3: Tilføj en tabeloverskrift (valgfrit)
Hvis du vil give tabellen en titel, kan du bruge `<caption>`-tagget:
```html
<table>
  <caption>New menu</caption>
  
</table>
```

## Trin 4: Opret tabeloverskrifter
Tilføj derefter tabeloverskrifterne inden for `<thead>`-elementet. Hver overskrift defineres ved hjælp af `<th>`-tagget:
```html
<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  
</table>
```

## Trin 5: Udfyld tabellen med data
Brug `<tbody>`-elementet til at omslutte tabelrækkerne og `<td>`-tags til at definere cellerne, der indeholder 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>
```

## Fuld kode
Tag venligst et øjeblik til grundigt at gennemgå alle elementerne for at sikre, at deres sammenhæng er 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 specifik visuel stil. For at tilpasse tabellens udseende kan du tilføje CSS-stilarter i en separat CSS-fil eller inden for et `<style>`-tag i HTML-filens `<head>`-sektion.


Der er dog ingen grund til at gå i dybden med CSS på nuværende tidspunkt, da fokus kun er på HTML.
Hvis du vil se, hvordan tabellen ser ud uden nogen CSS-styling, kan du fjerne linje 4: `<link rel="stylesheet" href="index.css" />`, som importerer CSS-stilarterne.

 

Bemærk

Hvilket HTML-element bruges til at definere en tabel på en webside?

Hvilket HTML-element bruges til at definere en række i en tabel?

Hvad er formålet med `<th>`-elementet i en HTML-tabel?

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Udforsk internettets indre funktioner. Lær hvordan data rejser over netværk, opdag protokollernes rolle, og afslør mysterierne bag IP-adresser og domænenavne. Få en overordnet forståelse af, hvordan webbrowsere og servere kommunikerer for at levere webindhold.

Opdag kraften i tags til at strukturere indhold, fra overskrifter og afsnit til lister og tabeller. Lær hvordan du forbedrer elementerne med attributter.

Kernen i HTML-dokumentstrukturen. Lær komponenterne i et HTML-dokument, inklusive doctype-deklarationen, head og body. Forstå formålet med hvert element, og hvordan de bidrager til den overordnede struktur af en webside.

Gør en webside mere attraktiv ved hjælp af medier som billeder, lyd og video. Arbejd med strukturerede tabeldata i form af tabeller.

Udforsk alsidigheden af HTML-formularer. Lær at designe intuitive og brugervenlige formularer ved at udnytte nøglekoncepter og teknikker. Opdag, hvordan formularer muliggør brugerinteraktion og dataindsendelse på hjemmesider.

Oprettelse og strukturering af tabeller i HTML

Trin 1: Opsæt HTML-strukturen

Trin 2: Definer tabellen

Trin 3: Tilføj en tabeloverskrift (valgfrit)

Trin 4: Opret tabeloverskrifter

Trin 5: Udfyld tabellen med data

Fuld kode

1. Hvilket HTML-element bruges til at definere en tabel på en webside?

2. Hvilket HTML-element bruges til at definere en række i en tabel?

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