Oppretting og Strukturering av Tabeller i HTML
Tabeller hjelper med å presentere strukturert data som timeplaner, kalendere, finansielle oppføringer, menyer og prislister. HTML tilbyr flere elementer for å bygge tabeller.
Viktige tabellelementer:
<table>: tabellbeholderen;<tr>: en rad;<th>: en overskriftscelle (fet, sentrert);<td>: en vanlig datacelle.
Nedenfor bygger du en enkel menytabell steg for steg.
Steg 1: Sett opp HTML-strukturen
Start med å lage den grunnleggende HTML-strukturen for siden din:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Steg 2: Definer tabellen
Inne i <body>-elementet, legg til <table>-taggen for å definere tabellen:
<table>
<!-- Table content will go here -->
</table>
Steg 3: Legg til en tabelltittel (valgfritt)
Hvis du ønsker å gi tabellen en tittel, kan du bruke <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Opprett tabelloverskrifter
Legg deretter til tabelloverskriftene inne i <thead>-elementet. Hver overskrift defineres med <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>
Steg 5: Fyll ut tabellen med data
Bruk <tbody>-elementet for å omslutte tabellradene og <td>-tagger for å definere cellene som inneholder 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>
Fullstendig kode
Vennligst sett av et øyeblikk til å undersøke alle elementene grundig for å sikre at deres sammenheng er tydelig.
index.html
index.css
Som standard har HTML-tabeller ingen spesifikk visuell stil. For å tilpasse tabellens utseende, legg til CSS-stiler i en egen CSS-fil eller innenfor en <style>-tagg i HTML-filens <head>-seksjon.
Det er imidlertid ikke nødvendig å gå inn på CSS på dette stadiet, siden fokuset nå kun er på HTML.
Hvis du ønsker å se hvordan tabellen ser ut uten noen CSS-stil, kan du fjerne linje 4: <link rel="stylesheet" href="index.css" />, som importerer CSS-stilene.
Hvis du ønsker å lære mer om CSS, kan du vurdere å ta CSS Fundamentals-kurset.
1. Hvilket HTML-element brukes for å definere en tabell på en nettside?
2. Hvilket HTML-element brukes for å definere en rad i en tabell?
3. Hva er formålet med <th>-elementet i en HTML-tabell?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Fantastisk!
Completion rate forbedret til 2.38Oppretting og Strukturering av Tabeller i HTML
Sveip for å vise menyen
Tabeller hjelper med å presentere strukturert data som timeplaner, kalendere, finansielle oppføringer, menyer og prislister. HTML tilbyr flere elementer for å bygge tabeller.
Viktige tabellelementer:
<table>: tabellbeholderen;<tr>: en rad;<th>: en overskriftscelle (fet, sentrert);<td>: en vanlig datacelle.
Nedenfor bygger du en enkel menytabell steg for steg.
Steg 1: Sett opp HTML-strukturen
Start med å lage den grunnleggende HTML-strukturen for siden din:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Steg 2: Definer tabellen
Inne i <body>-elementet, legg til <table>-taggen for å definere tabellen:
<table>
<!-- Table content will go here -->
</table>
Steg 3: Legg til en tabelltittel (valgfritt)
Hvis du ønsker å gi tabellen en tittel, kan du bruke <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Opprett tabelloverskrifter
Legg deretter til tabelloverskriftene inne i <thead>-elementet. Hver overskrift defineres med <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>
Steg 5: Fyll ut tabellen med data
Bruk <tbody>-elementet for å omslutte tabellradene og <td>-tagger for å definere cellene som inneholder 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>
Fullstendig kode
Vennligst sett av et øyeblikk til å undersøke alle elementene grundig for å sikre at deres sammenheng er tydelig.
index.html
index.css
Som standard har HTML-tabeller ingen spesifikk visuell stil. For å tilpasse tabellens utseende, legg til CSS-stiler i en egen CSS-fil eller innenfor en <style>-tagg i HTML-filens <head>-seksjon.
Det er imidlertid ikke nødvendig å gå inn på CSS på dette stadiet, siden fokuset nå kun er på HTML.
Hvis du ønsker å se hvordan tabellen ser ut uten noen CSS-stil, kan du fjerne linje 4: <link rel="stylesheet" href="index.css" />, som importerer CSS-stilene.
Hvis du ønsker å lære mer om CSS, kan du vurdere å ta CSS Fundamentals-kurset.
1. Hvilket HTML-element brukes for å definere en tabell på en nettside?
2. Hvilket HTML-element brukes for å definere en rad i en tabell?
3. Hva er formålet med <th>-elementet i en HTML-tabell?
Takk for tilbakemeldingene dine!
