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

Suggested prompts:

Can you explain what each HTML table tag does?

How can I add more rows or columns to the table?

What are some common uses for tables in web development?

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