Kursusindhold
Ultimativ HTML
Ultimativ HTML
Oprette 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.css
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?
Tak for dine kommentarer!
