Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Skapa och Strukturera Tabeller i HTML | Arbeta med Media och Tabeller
Ultimate HTML

bookSkapa 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.html

index.css

index.css

copy

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?

question mark

Vilket HTML-element används för att definiera en tabell på en webbsida?

Select the correct answer

question mark

Vilket HTML-element används för att definiera en rad inom en tabell?

Select the correct answer

question mark

Vad är syftet med <th>-elementet i en HTML-tabell?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 7

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Ställ mig frågor om detta ämne

Sammanfatta detta kapitel

Visa verkliga exempel

Awesome!

Completion rate improved to 2.56

bookSkapa 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.html

index.css

index.css

copy

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?

question mark

Vilket HTML-element används för att definiera en tabell på en webbsida?

Select the correct answer

question mark

Vilket HTML-element används för att definiera en rad inom en tabell?

Select the correct answer

question mark

Vad är syftet med <th>-elementet i en HTML-tabell?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 7
some-alt