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
Can you explain what each table element does in more detail?
How can I style this table to make it look better?
Can you show me how to add more rows or columns to the table?
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!
