Kursinnehåll
Ultimate HTML
Ultimate HTML
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!
