HTML <th> tag

Definitie en gebruik

<th> tag definieert de titelcel in de HTML-tabel.

HTML-tabellen hebben twee soorten cellen:

  • Titelcel - bevat titelinformatie (gebruik <th> elementen worden gemaakt)
  • Datacell - bevat gegevens (gebruik <td> elementen worden gemaakt)

Standaard is de<th> De tekst in de elementen is vet en centreren.

Standaard is de tekst in <td>-elementen gewoon en links uitgelijnd.

Zie ook:

HTML-tutorial:HTML table

HTML DOM referentiehandleiding:TableHeader-object

CSS-tutorial:Stijl van het formulier instellen

Voorbeeld

Voorbeeld 1

Een eenvoudige HTML-tabel met drie rijen, twee titelcellen en vier datacellen:

<table>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 2

Hoe je uitlijnt: <th> inhoud (gebruik CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Maand</th>
    <th style="text-align:left">Sparen</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 3

Hoe je een achtergrondkleur toevoegt aan de titelcel van de tabel (gebruik CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Maand</th>
    <th style="background-color:#00FF00">Sparen</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
 </table>

Probeer het zelf

Voorbeeld 4

Hoe je de hoogte van de titelcel van de tabel instelt (gebruik CSS):

<table>
  <tr>
    <th style="height:100px">Maand</th>
    <th style="height:100px">Sparen</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 5

Hoe niet te wisselen van regel in de tabelkopcel (gebruik CSS):

<table>
  <tr>
    <th>Maand</th>
    <th style="white-space:nowrap">Geld voor het nieuwe auto</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 6

Hoe verticaal uit te lijnen <th> inhoud (gebruik CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Maand</th>
    <th style="vertical-align:bottom">Sparen</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 7

Hoe de breedte van de tabelkopcel in te stellen (gebruik CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Maand</th>
    <th style="width:30%">Spaar</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 8

Hoe een tabelkop te maken:

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

Probeer het zelf

Voorbeeld 9

Hoe een tabel met kopregels te maken:

<table>
  <caption>Maandelijkse spaargeld</caption>
  <tr>
    <th>Maand</th>
    <th>Spaargeld</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Probeer het zelf

Voorbeeld 10

Hoe een tabelcel te definiëren die meerdere rijen of kolommen overslaat:

<table>
  <tr>
    <th>Naam</th>
    <th>E-mail</th>
    <th colspan="2">Telefoon</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>

Probeer het zelf

Eigenschap

Eigenschap Waarde Beschrijving
abbr Tekst Het is voorgeschreven dat de samenvatting van de inhoud van de titelcel.
colspan Getal Het is voorgeschreven dat de titelcel de aangeduide kolommen overslaat.
headers header_id Het is voorgeschreven dat een of meerdere titelcellen gerelateerd aan de cel.
rowspan Getal Het is voorgeschreven dat de titelcel de aangeduide rijen overslaat.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Is the table header a column header, row header, or the header of a group of columns or rows?

Global attributes

<th> The tag also supports Global attributes in HTML.

event attributes

<th> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <th> Element:

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

Browser support

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