Oprettelse og Strukturering af Tabeller i HTML
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 tabel-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:
<!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øjes <table>-tagget for at definere tabellen:
<table>
<!-- Table content will go here -->
</table>
Trin 3: Tilføj en tabeloverskrift (valgfrit)
Hvis du ønsker at angive en titel til tabellen, kan du bruge <caption>-tagget:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Trin 4: Opret tabeloverskrifter
Tilføj derefter tabeloverskrifterne inden for <thead>-elementet. Hver overskrift defineres med <th>-tagget:
<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 tabelrækkerne 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
Undersøg venligst alle elementerne grundigt for at sikre, at deres indbyrdes relation er tydelig.
index.html
index.css
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 ikke behov for at gå i dybden med CSS på nuværende tidspunkt, da fokus kun er på HTML.
Hvis du ønsker at 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 ønsker at lære mere om CSS, kan du overveje at tage CSS Fundamentals-kurset.
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?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Fantastisk!
Completion rate forbedret til 2.38Oprettelse og Strukturering af Tabeller i HTML
Stryg for at vise menuen
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 tabel-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:
<!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øjes <table>-tagget for at definere tabellen:
<table>
<!-- Table content will go here -->
</table>
Trin 3: Tilføj en tabeloverskrift (valgfrit)
Hvis du ønsker at angive en titel til tabellen, kan du bruge <caption>-tagget:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Trin 4: Opret tabeloverskrifter
Tilføj derefter tabeloverskrifterne inden for <thead>-elementet. Hver overskrift defineres med <th>-tagget:
<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 tabelrækkerne 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
Undersøg venligst alle elementerne grundigt for at sikre, at deres indbyrdes relation er tydelig.
index.html
index.css
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 ikke behov for at gå i dybden med CSS på nuværende tidspunkt, da fokus kun er på HTML.
Hvis du ønsker at 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 ønsker at lære mere om CSS, kan du overveje at tage CSS Fundamentals-kurset.
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?
Tak for dine kommentarer!
