HTML <th> etiket

Definition og brug

<th> Tagget definerer titelcellen i HTML-tabellen.

HTML-tabeller har to typer celler:

  • Titelceller - indeholder titelsinformation (brug <th> element oprettes)
  • Dataceller - indeholder data (brug <td> element oprettes)

Som standard<th> Teksten i elementet er fed og centreret.

Som standard er teksten i <td>-elementet almindelig og venstrestillet.

Se også:

HTML-tutorial:HTML-tabeller

HTML DOM referencehåndbog:TableHeader-objektet

CSS-tutorial:Indstil stil på formularen

Eksempel

Eksempel 1

En simpel HTML-tabel med tre rækker, to titelceller og fire dataceller:

<table>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 2

Hvordan justere <th> indholdet (brug af CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Måned</th>
    <th style="text-align:left">Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 3

Hvordan tilføje baggrundsfarve til titelcellen i tabellen (brug CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Måned</th>
    <th style="background-color:#00FF00">Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
 </table>

Prøv det selv

Eksempel 4

Hvordan indstille højden på titelcellen i tabellen (brug CSS):

<table>
  <tr>
    <th style="height:100px">Måned</th>
    <th style="height:100px">Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Prøv det selv

Eksempel 5

Hvordan defineres det, at der ikke skal skiftes linje i tabeloverskriften (brug af CSS):

<table>
  <tr>
    <th>Måned</th>
    <th style="white-space:nowrap">Penge til nyt bil</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Prøv det selv

Eksempel 6

Hvordan justeres lodret <th> indholdet (brug af CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Måned</th>
    <th style="vertical-align:bottom">Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Prøv det selv

Eksempel 7

Hvordan indstilles bredden af titelceller i tabellen (brug af CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Måned</th>
    <th style="width:30%">Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
</table>

Prøv det selv

Eksempel 8

Hvordan oprettes en tabeloverskrift:

<table>
  <tr>
    <th Navn</th>
    <th>E-mail</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Prøv det selv

Eksempel 9

Hvordan oprettes en tabel med titelceller:

<table>
  <caption>Månedlige sparepenge</caption>
  <tr>
    <th>Måned</th>
    <th>Sparepenge</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
</table>

Prøv det selv

Eksempel 10

Hvordan definerer man en tabelcelle, der krydser flere rækker eller kolonner:

<table>
  <tr>
    <th Navn</th>
    <th>E-mail</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Prøv det selv

Egenskab

Egenskab Værdi Beskrivelse
abbr Tekst Definerer en kort version af indholdet i titelcellen.
colspan Tal Definerer antallet af kolonner, som en titelcelle skal krydse.
headers header_id Definerer en eller flere titelceller relateret til cellen.
rowspan Tal Definerer antallet af rækker, som en titelcelle skal krydse.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Er cellen i overskrift, rækkeoverskrift eller en gruppe kolonner eller rækker?

Globale egenskaber

<th> Tagget understøtter også Globale egenskaber i HTML。

event-egenskaber

<th> Tagget understøtter også Event-egenskaber i HTML。

Standard CSS-indstillinger

De fleste browsere vil bruge følgende standardværdier til at vise <th> Element:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

Browser-understøttelse

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support