Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Oprette og Strukturere Tabeller i HTML | Arbejde med Medier og Tabeller
Ultimativ HTML

bookOprette og Strukturere Tabeller i HTML

Tabeller er nyttige til at præsentere komplekse relationer ved at organisere indhold i celler. De er særligt effektive til at vise tabeldata såsom transporttidsplaner, kalendere, lønkompensationer, kampresultater, finansielle transaktioner, restaurantmenuer, prislister og andre oplysninger, der naturligt passer ind i et tabelformat, ligesom Google Sheets.

For at oprette tabeller i HTML, brug følgende hovedelementer:

  • <table>: definerer en tabel på en webside;
  • <tr>: definerer en række inden for tabellen;
  • <th>: definerer en headercelle inden for en række. Headerceller er typisk fede og centrerede;
  • <td>: definerer en standard datacelle inden for en række.

Lad os gennemgå trinene for at oprette en tabel til en menu:

Trin 1: Opsæt HTML-strukturen

Start med at oprette den grundlæggende HTML-struktur for din side:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Trin 2: Definer tabellen

Inde i <body> elementet, tilføj <table> tagget for at definere tabellen:

<table>
  <!-- Table content will go here -->
</table>

Trin 3: Tilføj en tabeloverskrift (Valgfrit)

Hvis du vil give en titel til tabellen, kan du bruge <caption> tagget:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Trin 4: Opret tabeloverskrifter

Dernæst tilføjes tabeloverskrifterne inden for <thead> elementet. Hver overskrift defineres ved hjælp af <th> taggen:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Trin 5: Udfyld tabellen med data

Brug <tbody> elementet til at omslutte tabellens rækker og <td> tags til at definere cellerne, der indeholder dataene:

<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 at undersøge alle elementerne grundigt for at sikre, at deres sammenhæng er tydelig.

index.html

index.html

index.css

index.css

copy

Bemærk

Som standard har HTML-tabeller ingen specifik visuel stil. For at tilpasse tabelens udseende, tilføj CSS-stilarter i en separat CSS-fil eller inden for en <style>-tag i HTML-filens <head>-sektion.

Der er dog ingen grund til at dykke ned i CSS på dette tidspunkt, da fokus lige nu kun er på HTML.

Hvis du gerne 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.

Hvis du gerne vil lære mere om CSS, kan du overveje at tage  CSS Fundamentals kurset.

1. Hvad er HTML-elementet, der bruges til at definere en tabel på en webside?

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

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

question mark

Hvad er HTML-elementet, der bruges til at definere en tabel på en webside?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.56

bookOprette og Strukturere Tabeller i HTML

Stryg for at vise menuen

Tabeller er nyttige til at præsentere komplekse relationer ved at organisere indhold i celler. De er særligt effektive til at vise tabeldata såsom transporttidsplaner, kalendere, lønkompensationer, kampresultater, finansielle transaktioner, restaurantmenuer, prislister og andre oplysninger, der naturligt passer ind i et tabelformat, ligesom Google Sheets.

For at oprette tabeller i HTML, brug følgende hovedelementer:

  • <table>: definerer en tabel på en webside;
  • <tr>: definerer en række inden for tabellen;
  • <th>: definerer en headercelle inden for en række. Headerceller er typisk fede og centrerede;
  • <td>: definerer en standard datacelle inden for en række.

Lad os gennemgå trinene for at oprette en tabel til en menu:

Trin 1: Opsæt HTML-strukturen

Start med at oprette den grundlæggende HTML-struktur for din side:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Trin 2: Definer tabellen

Inde i <body> elementet, tilføj <table> tagget for at definere tabellen:

<table>
  <!-- Table content will go here -->
</table>

Trin 3: Tilføj en tabeloverskrift (Valgfrit)

Hvis du vil give en titel til tabellen, kan du bruge <caption> tagget:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Trin 4: Opret tabeloverskrifter

Dernæst tilføjes tabeloverskrifterne inden for <thead> elementet. Hver overskrift defineres ved hjælp af <th> taggen:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Trin 5: Udfyld tabellen med data

Brug <tbody> elementet til at omslutte tabellens rækker og <td> tags til at definere cellerne, der indeholder dataene:

<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 at undersøge alle elementerne grundigt for at sikre, at deres sammenhæng er tydelig.

index.html

index.html

index.css

index.css

copy

Bemærk

Som standard har HTML-tabeller ingen specifik visuel stil. For at tilpasse tabelens udseende, tilføj CSS-stilarter i en separat CSS-fil eller inden for en <style>-tag i HTML-filens <head>-sektion.

Der er dog ingen grund til at dykke ned i CSS på dette tidspunkt, da fokus lige nu kun er på HTML.

Hvis du gerne 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.

Hvis du gerne vil lære mere om CSS, kan du overveje at tage  CSS Fundamentals kurset.

1. Hvad er HTML-elementet, der bruges til at definere en tabel på en webside?

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

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

question mark

Hvad er HTML-elementet, der bruges til at definere en tabel på en webside?

Select the correct answer

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7
some-alt