HTML <thead> - otsikkorivi

Määritelmä ja käyttö

<thead> elementin kanssa käytetään HTML-taulukon otsikkotiedon ryhmittämiseen.

<thead> elementti yhdessä <tbody> ja </tfoot> elementit yhdistettynä määrittelemään taulukon jokaisen osan (otsikko, sisältö, alatikki).

Selaimet voivat käyttää näitä elementtejä, jotta otsikot ja alat näkyvät erillisinä, kun taulukon sisältö pyörii. Lisäksi, kun suuret taulukot painetaan useilla sivuilla, nämä elementit mahdollistavat otsikkojen ja alatikkeiden tulostamisen jokaisen sivun ylä- ja alareunalla.

Huomioitavaa:<thead> elementin sisällä on oltava yksi tai useampi <tr> elementti.

<thead> elementti on käytettävä seuraavassa kontekstissa: toimien <table> elementin alielementit, kaikissa <caption> ja <colgroup> elementin jälkeen, sekä kaikissa <tbody>、</tfoot> ja <tr> elementin edellä.

Vinkki:Oletuksena:<thead>、<tbody> ja <tfoot> -elementit eivät vaikuta taulukon asetteluun. Mutta voit käyttää CSS:ää näiden elementtien tyyleihin (katso alla olevat esimerkit)!

Esimerkki

esimerkki 1

HTML-taulukko, joka sisältää <thead>、<tbody> ja <tfoot> -elementtejä:

<table>
  <thead>
    <tr>
      <th> Kuukausi</th>
      <th> Säästäminen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> tammikuu</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

esimerkki 2

Aseta <thead>、<tbody> ja <tfoot> -elementtien tyylit CSS:n avulla:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th> Kuukausi</th>
      <th> Säästäminen</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> tammikuu</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

esimerkki 3

miten tasaus tehdään <thead> sisältöä (käyttämällä CSS):

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

Kokeile itse

esimerkki 4

miten vertikaalinen tasaus tehdään <thead> sisältöä (käyttämällä CSS):

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

Kokeile itse

Globaalit attribuutit

<thead> Tagi tukee myös HTML -globaalit attribuutit.

tapahtumamäärittelyjä

<thead> Tagi tukee myös HTML -tapahtumat.

Oletusarvoiset CSS-asetukset

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

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

Selaimen tuki

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