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:

html
9
1
2
3
4
5
6
7
8
9
<!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:

html
9
1
2
3
<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:

html
9
1
2
3
4
<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:

html
99
1
2
3
4
5
6
7
8
9
10
11
<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:

html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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

<!DOCTYPE html>

<head>

</head>

<body>

<table>

New Menu

</caption>

<thead>

<tr>

<th>Category</th>

<th>Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>Appetizer</td>

<td>Garlic Shrimps</td>

</tr>

<tr>

<td>Pasta</td>

<td>Lobster Linguine Noodles</td>

</tr>

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.