HTML <th> -elementti

Määrittely ja käyttö

<th> Th-merkkijono määrittää HTML-taulukon otsikkokellon.

HTML-taulukolla on kaksi solua:

  • Otsikkokellot - sisältää otsikkotietoja (käyttämällä <th> elementin luominen)
  • Tietokellot - sisältää tietoja (käyttämällä <td> elementin luominen)

Oletuksena,<th> Elementin teksti on粗体且居中的。

Oletuksena, <td> -elementin teksti on tavallista ja vasemmassa tasossa.

Katso myös:

HTML-opas:HTML-taulukko

HTML DOM -viittausopas:TableHeader-objekti

CSS-opas:Muokkaa lomakkeen tyylejä

Esimerkki

Esimerkki 1

Yksinkertainen HTML-taulukko, joka sisältää kolme riviä, kaksi otsikkokellon ja neljä tietokellon:

<table>
  <tr>
    <th>Kuukausi</th>
    <th>Säästö</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 2

Kuinka tasata: <th> sisältöä (käyttäen CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Kuukausi</th>
    <th style="text-align:left">Säästäminen</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 3

Kuinka lisätä taustaväri taulukon otsikkokellon (käyttämällä CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Kuukausi</th>
    <th style="background-color:#00FF00">Säästäminen</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
 </table>

Kokeile itse!

Esimerkki 4

Kuinka asettaa taulukon otsikkokellon korkeus (käyttämällä CSS):

<table>
  <tr>
    <th style="height:100px">Kuukausi</th>
    <th style="height:100px">Säästö</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 5

Kuinka määritellä, ettei taulukon otsikkosolussa vaihdeta rivejä (käyttäen CSS):

<table>
  <tr>
    <th>Kuukausi</th>
    <th style="white-space:nowrap">Uuden auton säästäminen</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 6

Kuinka pystysuora tasaus: <th> sisältöä (käyttäen CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Kuukausi</th>
    <th style="vertical-align:bottom">Säästö</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 7

Kuinka asettaa taulukon otsikkosolujen leveys (käyttäen CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Kuukausi</th>
    <th style="width:30%">Säästö</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 8

Kuinka luoda taulukon otsikko:

<table>
  <tr>
    <th>Nimi</th>
    <th>Sähköposti</th>
    <th>Puhelin</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 9

Kuinka luoda otsikoitu taulukko:

<table>
  <caption>Kuukausittainen säästö</caption>
  <tr>
    <th>Kuukausi</th>
    <th>Säästö</th>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
</table>

Kokeile itse!

Esimerkki 10

Kuinka määritellä usean rivin tai sarakkeen ylittävät taulukkosolut:

<table>
  <tr>
    <th>Nimi</th>
    <th>Sähköposti</th>
    <th colspan="2">Puhelin</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>

Kokeile itse!

Ominaisuus

Ominaisuus Arvo Kuvaus
abbr Teksti Määritellään otsikkosolun sisällön lyhennetty versio.
colspan Luku Määritellään, montako saraketta otsikkosolu pitäisi kattaa.
headers header_id Määritellään yksi tai useampi otsikkosolu, joka liittyy soluihin.
rowspan Luku Määritellään, montako riviä otsikkosolu pitäisi kattaa.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Otsikkoyksikkö on sarakeotsikko, riviosoite vai yhdistelmä sarake- tai rivikohteita.

Globaalit ominaisuudet

<th> Tunniste tukee myös HTML:ssä olevat globaalit ominaisuudet.

tapahtumavara-ominaisuuksia

<th> Tunniste tukee myös HTML:ssä olevat tapahtumavara-ominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <th> Elementti:

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

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki