Skapa och Strukturera Tabeller i HTML
Tabeller är användbara för att presentera komplexa relationer genom att organisera innehåll i celler. De är särskilt effektiva för att visa tabulär data som transporttidtabeller, kalendrar, lönekompensationer, matchresultat, finansiella transaktioner, restaurangmenyer, prislistor och annan information som naturligt passar in i ett tabellformat, liknande Google Sheets.
För att skapa tabeller i HTML, använd följande huvudelement:
<table>: definierar en tabell på en webbsida;<tr>: definierar en rad inom tabellen;<th>: definierar en rubrikcell inom en rad. Rubrikceller är vanligtvis fetstilta och centrerade;<td>: definierar en standarddatacell inom en rad.
Låt oss gå igenom stegen för att skapa en tabell för en meny:
Steg 1: Ställ in 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 ge tabellen en titel kan du använda <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Skapa tabellhuvuden
Nästa steg är att lägga till tabellhuvuden inom <thead>-elementet. Varje huvud 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
Vänligen ta en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.
index.html
index.css
Notera
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 finns dock ingen anledning att fördjupa sig i CSS i detta skede, eftersom fokus just 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 ta CSS Fundamentals kursen.
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 inom 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
Awesome!
Completion rate improved to 2.56Skapa och Strukturera Tabeller i HTML
Svep för att visa menyn
Tabeller är användbara för att presentera komplexa relationer genom att organisera innehåll i celler. De är särskilt effektiva för att visa tabulär data som transporttidtabeller, kalendrar, lönekompensationer, matchresultat, finansiella transaktioner, restaurangmenyer, prislistor och annan information som naturligt passar in i ett tabellformat, liknande Google Sheets.
För att skapa tabeller i HTML, använd följande huvudelement:
<table>: definierar en tabell på en webbsida;<tr>: definierar en rad inom tabellen;<th>: definierar en rubrikcell inom en rad. Rubrikceller är vanligtvis fetstilta och centrerade;<td>: definierar en standarddatacell inom en rad.
Låt oss gå igenom stegen för att skapa en tabell för en meny:
Steg 1: Ställ in 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 ge tabellen en titel kan du använda <caption>-taggen:
<table>
<caption>New menu</caption>
<!-- Table content will go here -->
</table>
Steg 4: Skapa tabellhuvuden
Nästa steg är att lägga till tabellhuvuden inom <thead>-elementet. Varje huvud 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
Vänligen ta en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.
index.html
index.css
Notera
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 finns dock ingen anledning att fördjupa sig i CSS i detta skede, eftersom fokus just 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 ta CSS Fundamentals kursen.
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 inom en tabell?
3. Vad är syftet med <th>-elementet i en HTML-tabell?
Tack för dina kommentarer!
