Skapa och Strukturera Tabeller i HTML
Tabeller används för att presentera strukturerad data såsom scheman, kalendrar, ekonomiska register, menyer och prislistor. HTML tillhandahåller flera element för att skapa tabeller.
Viktiga tablelement:
<table>: tabellbehållare;<tr>: en rad;<th>: en rubrikcell (fetstil, centrerad);<td>: en vanlig datacell.
Nedan bygger du steg för steg upp en enkel menytabell.
Steg 1: Skapa HTML-strukturen
Börja med att skapa den grundläggande HTML-strukturen för din sida:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Steg 2: Definiera tabellen
Inuti <body>-elementet, lägg till <table>-taggen för att definiera tabellen:
<table>
<!-- Table content will go here -->
</table>
Steg 3: Lägg till en tabellrubrik (valfritt)
Om du vill ange en titel för tabellen kan du använda <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Skapa tabellhuvuden
Lägg sedan till tabellhuvuden inom <thead>-elementet. Varje rubrik definieras 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 tabellen med data
Använd <tbody>-elementet för att omsluta tabellraderna och <td>-taggar för att definiera cellerna som innehåller data:
<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>
Fullständig kod
Ta gärna en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.
index.html
index.css
Som standard har HTML-tabeller ingen specifik visuell stil. För att anpassa tabellens utseende, lägg till CSS-stilar i en separat CSS-fil eller inom en <style>-tagg i HTML-filens <head>-sektion.
Det är dock inte nödvändigt att gå in på CSS i detta skede, eftersom fokus nu endast ligger på HTML.
Om du vill se hur tabellen ser ut utan någon CSS-styling kan du ta bort rad 4: <link rel="stylesheet" href="index.css" />, som importerar CSS-stilarna.
Om du vill lära dig mer om CSS, överväg att gå kursen CSS Fundamentals.
1. Vilket HTML-element används för att definiera en tabell på en webbsida?
2. Vilket HTML-element används för att definiera en rad i en tabell?
3. Vad är syftet med <th>-elementet i en HTML-tabell?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 2.38Skapa och Strukturera Tabeller i HTML
Svep för att visa menyn
Tabeller används för att presentera strukturerad data såsom scheman, kalendrar, ekonomiska register, menyer och prislistor. HTML tillhandahåller flera element för att skapa tabeller.
Viktiga tablelement:
<table>: tabellbehållare;<tr>: en rad;<th>: en rubrikcell (fetstil, centrerad);<td>: en vanlig datacell.
Nedan bygger du steg för steg upp en enkel menytabell.
Steg 1: Skapa HTML-strukturen
Börja med att skapa den grundläggande HTML-strukturen för din sida:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The link to the styles -->
</head>
<body>
<!-- Table code will go here -->
</body>
</html>
Steg 2: Definiera tabellen
Inuti <body>-elementet, lägg till <table>-taggen för att definiera tabellen:
<table>
<!-- Table content will go here -->
</table>
Steg 3: Lägg till en tabellrubrik (valfritt)
Om du vill ange en titel för tabellen kan du använda <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Skapa tabellhuvuden
Lägg sedan till tabellhuvuden inom <thead>-elementet. Varje rubrik definieras 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 tabellen med data
Använd <tbody>-elementet för att omsluta tabellraderna och <td>-taggar för att definiera cellerna som innehåller data:
<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>
Fullständig kod
Ta gärna en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.
index.html
index.css
Som standard har HTML-tabeller ingen specifik visuell stil. För att anpassa tabellens utseende, lägg till CSS-stilar i en separat CSS-fil eller inom en <style>-tagg i HTML-filens <head>-sektion.
Det är dock inte nödvändigt att gå in på CSS i detta skede, eftersom fokus nu endast ligger på HTML.
Om du vill se hur tabellen ser ut utan någon CSS-styling kan du ta bort rad 4: <link rel="stylesheet" href="index.css" />, som importerar CSS-stilarna.
Om du vill lära dig mer om CSS, överväg att gå kursen CSS Fundamentals.
1. Vilket HTML-element används för att definiera en tabell på en webbsida?
2. Vilket HTML-element används för att definiera en rad i en tabell?
3. Vad är syftet med <th>-elementet i en HTML-tabell?
Tack för dina kommentarer!
