HTML <th> etikett

Definition och användning

<th> taggen definierar rubrikcellen i HTML-tabellen.

HTML-tabeller har två typer av celler:

  • Rubrikcell - innehåller rubrikinformation (använd <th> element skapas)
  • Datacell - innehåller data (använd <td> element skapas)

Som standard:<th> Texten i elementen är fet och centrerad.

Som standard är texten i <td>-elementen vanlig och vänsterjusterad.

Se också:

HTML-tutorial:HTML-tabeller

HTML DOM-referencehandboken:TableHeader-objektet

CSS-tutorial:Ställ in stilen för formuläret

Exempel

Exempel 1

En enkel HTML-tabell med tre rader, två rubrikceller och fyra dataceller:

<table>
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Prova själv

Exempel 2

Hur man justerar <th> innehållet (använd CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Månad</th>
    <th style="text-align:left">Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Prova själv

Exempel 3

Hur man lägger till bakgrundsfärg till cellen för tabellrubriken (använd CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Månad</th>
    <th style="background-color:#00FF00">Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
 </table>

Prova själv

Exempel 4

Hur man ställer in höjden på cellen för tabellrubriken (använd CSS):

<table>
  <tr>
    <th style="height:100px">Månad</th>
    <th style="height:100px">Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Prova själv

Exempel 5

Hur specificerar man att rubrikceller i tabellen inte ska brytas (använd CSS):

<table>
  <tr>
    <th>Månad</th>
    <th style="white-space:nowrap">Pengar för ny bil</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Prova själv

Exempel 6

Hur justerar man vertikalt: <th> innehållet (använd CSS):

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

Prova själv

Exempel 7

Hur ställer man in bredden på rubrikceller i tabellen (använd CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Månad</th>
    <th style="width:30%">Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Prova själv

Exempel 8

Hur skapar man tabellrubriker:

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

Prova själv

Exempel 9

Hur skapar man en tabell med rubrik:

<table>
  <caption>Månatligt sparande</caption>
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Prova själv

Exempel 10

Hur definierar man tabellceller som korsar flera rader eller kolumner:

<table>
  <tr>
    <th>Namn</th>
    <th>E-post</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>

Prova själv

Egenskap

Egenskap Värde Beskrivning
abbr Text Specificerar en förkortad version av innehållet i rubrikcellen.
colspan Nummer Specificerar hur rubrikceller bör korsa kolumner.
headers header_id Specificerar en eller flera rubrikceller relaterade till cellen.
rowspan Nummer Specificerar hur rubrikceller bör korsa rader.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Kolumnhuvudet är en kolumnhuvud, radhuvud eller en grupp av kolumn- eller radhuvuden.

Globala egenskaper

<th> Etiketten stöder också Globala egenskaper i HTML。

händelseegenskaper

<th> Etiketten stöder också Händelseegenskaper i HTML。

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <th> Element:

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

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd