Vi börjar med att diskutera tabeller. Specifikt kommer vi att undersöka följande textorganisation:

Tabeller

Tabeller i HTML används för att visa data i rader och kolumner, vilket ger ett strukturerat sätt att organisera information.

Skapa tabeller

Taggen <table> används för att skapa en tabell i HTML. Tabeller består av rader (<tr>) och celler (<td>), vilka definierar tabellens struktur och innehåll. Den grundläggande tabellstrukturen ser ut enligt följande.
Exempel:

I exemplet ovan:

• Taggen <table> används för att skapa en tabell;
• Varje <tr>-tagg representerar en rad i tabellen;
• Inom varje rad representerar <td>-taggar celler, vilket definierar innehållet i varje cell.

Även om vi skulle kunna avsluta arbetet med tabeller här, kan vi förbättra deras semantik för att underlätta för sökmotorer att förstå deras innehåll.

Tabellrubriker

Taggen <th> definierar tabellrubriker som representerar kolumn- eller radrubriker. Den ska användas inom en tabells <thead>-sektion.
Exempel:

I exemplet ovan:

• <thead>-sektionen innehåller tabellhuvudceller definierade med taggen <th>;
• Varje <th>-tagg representerar en rubrikcell.

Tabellkropp

tbody-sektionen ska placeras efter thead-sektionen och omsluta all tabellinformation utom rubrikerna. Alla element inuti tbody förblir oförändrade.
Exempel:

Sammanfattning

Tabeller är strukturerade med en hierarki av element:

1. Tabell

<table>-taggen är det överordnade elementet som definierar hela tabellen. Den innehåller alla rader och kolumner i tabellen.

<table></table>

2. Tabellhuvud

Taggen <thead> används för att gruppera tabellens rubrikrader. Den innehåller en eller flera rader (<tr>) med rubrikceller (<th>), vilka definierar kolumnrubriker.

<table>
  <thead></thead>
</table>

3. Tabellkropp

Taggen <tbody> används för att gruppera tabellens huvudinnehållsrader. Den innehåller en eller flera rader (<tr>) med dataceller (<td>), vilka definierar tabellens huvudinnehåll.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Tabellrader

Taggen <tr> representerar en rad i tabellen. Den innehåller en eller flera tabellceller (<td> eller <th>), vilka definierar innehållet i varje kolumn i raden.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Tabellceller

Taggen <td> representerar en standarddatacell inom tabellkroppen. Taggen <th> representerar en rubrikcell inom tabellhuvudet. Varje cell innehåller det faktiska innehållet i tabellen, såsom text, bilder eller andra HTML-element.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Videohandledning