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
course content

Kursinnehåll

Ultimate HTML

Ultimate HTML

1. Förstå Webbutveckling
Välkommen till HTML och WebbutvecklingVad Är Internet?Hur Fungerar Internet?Förstå Hur Webbplatser FungerarFrontend- och Backendutveckling Förklarat
2. HTML-Taggar och Attribut
Förstå HTML-TaggarArbeta med HTML-AttributFörstå Parvisa och Enkla Taggar i HTMLTextmarkering och Formatering i HTMLUtmaning: Skapa Ditt Första WebbsidesstyckeUtmaning: Bygg en Personlig IntroduktionswebbsidaUtmaning: Designa en FilmskyltwebbsidaAnvända Länkar och Knappar i HTMLUtmaning: Skapa Länkar till Populära WebbplatserValidera Din HTML-Kod för Bästa Praxis
3. HTML-Dokumentstruktur
Hemligheterna Bakom Välstrukturerade WebbsidorFörstå HTML-DokumentstrukturDokumenthuvudets RollHantera Dokumentflöde och LayoutUtmaning: Strukturera ett HTML-Dokument KorrektAnvända Utvecklarverktyg för HTML-Inspektion och Felsökning
4. Arbeta med Media och Tabeller
Lägga till Bilder i HTMLUtmaning: Arbeta med BilderArbeta med Klickbara Bilder, Bildtexter och OptimeringFörståelse för Vektor- och RastergrafikBädda in Ljud och Video för Rikt MedieinnehållUtmaning: Bädda in Ljud och Video i HTMLSkapa och Strukturera Tabeller i HTMLUtmaning: Designa en Funktionell HTML-Tabell
5. HTML-Formulär och Användarinmatning
Introduktion till HTML-FormulärGrunderna i Formulärskapande i HTMLAnvända Etiketter för Bättre FormuläråtkomstFörbättra Formulär med InputattributUtforska Olika Inmatningstyper i HTMLUtmaning: Skapa Formulär med Inputs och EtiketterArbeta med Textarea-Elementet för Flerradig InmatningAnvända Select-Elementet för RullgardinsmenyerAnvända Datalistelementet för Fördefinierade InmatningsförslagGruppera Formulärelement för Bättre Struktur

book
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

Steg 2: Definiera tabellen

Inuti <body>-elementet, lägg till <table>-taggen för att definiera tabellen:

html

Steg 3: Lägg till en tabellrubrik (Valfritt)

Om du vill ge tabellen en titel kan du använda <caption>-taggen:

html

Steg 4: Skapa tabellhuvuden

Nästa steg är att lägga till tabellhuvuden inom <thead>-elementet. Varje huvud definieras med <th>-taggen:

html

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

Fullständig kod

Vänligen ta en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.

html

index.html

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
ChatGPT

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

course content

Kursinnehåll

Ultimate HTML

Ultimate HTML

1. Förstå Webbutveckling
Välkommen till HTML och WebbutvecklingVad Är Internet?Hur Fungerar Internet?Förstå Hur Webbplatser FungerarFrontend- och Backendutveckling Förklarat
2. HTML-Taggar och Attribut
Förstå HTML-TaggarArbeta med HTML-AttributFörstå Parvisa och Enkla Taggar i HTMLTextmarkering och Formatering i HTMLUtmaning: Skapa Ditt Första WebbsidesstyckeUtmaning: Bygg en Personlig IntroduktionswebbsidaUtmaning: Designa en FilmskyltwebbsidaAnvända Länkar och Knappar i HTMLUtmaning: Skapa Länkar till Populära WebbplatserValidera Din HTML-Kod för Bästa Praxis
3. HTML-Dokumentstruktur
Hemligheterna Bakom Välstrukturerade WebbsidorFörstå HTML-DokumentstrukturDokumenthuvudets RollHantera Dokumentflöde och LayoutUtmaning: Strukturera ett HTML-Dokument KorrektAnvända Utvecklarverktyg för HTML-Inspektion och Felsökning
4. Arbeta med Media och Tabeller
Lägga till Bilder i HTMLUtmaning: Arbeta med BilderArbeta med Klickbara Bilder, Bildtexter och OptimeringFörståelse för Vektor- och RastergrafikBädda in Ljud och Video för Rikt MedieinnehållUtmaning: Bädda in Ljud och Video i HTMLSkapa och Strukturera Tabeller i HTMLUtmaning: Designa en Funktionell HTML-Tabell
5. HTML-Formulär och Användarinmatning
Introduktion till HTML-FormulärGrunderna i Formulärskapande i HTMLAnvända Etiketter för Bättre FormuläråtkomstFörbättra Formulär med InputattributUtforska Olika Inmatningstyper i HTMLUtmaning: Skapa Formulär med Inputs och EtiketterArbeta med Textarea-Elementet för Flerradig InmatningAnvända Select-Elementet för RullgardinsmenyerAnvända Datalistelementet för Fördefinierade InmatningsförslagGruppera Formulärelement för Bättre Struktur

book
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

Steg 2: Definiera tabellen

Inuti <body>-elementet, lägg till <table>-taggen för att definiera tabellen:

html

Steg 3: Lägg till en tabellrubrik (Valfritt)

Om du vill ge tabellen en titel kan du använda <caption>-taggen:

html

Steg 4: Skapa tabellhuvuden

Nästa steg är att lägga till tabellhuvuden inom <thead>-elementet. Varje huvud definieras med <th>-taggen:

html

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

Fullständig kod

Vänligen ta en stund att noggrant granska alla element för att säkerställa att deras relation är tydlig.

html

index.html

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
Vi beklagar att något gick fel. Vad hände?
some-alt