HTML <tbody> - taulukon sisältö

Määritelmä ja käyttö

<tbody> tagi käytetään HTML-taulukon sisällön ryhmittelyyn.

<tbody> elementti yhdessä <thead> ja <tfoot> elementit yhdistelmällä määritellään taulukon jokaisen osan (pääosa, otsikko, alat) tyyli.

Selaimet voivat käyttää näitä elementtejä, jotta otsikot ja alat näkyvät erillisinä, kun taulukon pääosa on vedettynä. Lisäksi, kun tulostetaan suuria taulukoita, jotka kattavat useita sivuja, nämä elementit voivat varmistaa, että taulukon otsikot ja alat tulostuvat jokaisen sivun ylä- ja alareunassa.

Huomioitavaa:<tbody> elementin sisällä täytyy olla yksi tai useampi <tr> -elementti。

<tbody> merkki täytyy käyttää seuraavassa kontekstissa: <table> elementin alielementit, missä tahansa <caption>ja<colgroup> ja <thead> elementin jälkeen.

Vinkki:Oletuksena <thead>、<tbody> ja <tfoot> -elementit eivät vaikuta taulukon asetteluun. Voit kuitenkin määrittää näiden elementtien tyylit CSS:n avulla (katso alla olevat esimerkit)!

esimerkki

esimerkki 1

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

<table>
  <thead>
    <tr>
      <th>Kuukausi</th>
      <th>Varastointi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>takuu</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> -tyyliä CSS:llä:

<html>
<head>
<style>
thead {color: vihreä;}
tbody {color: sininen;}
tfoot {color: red;}
table, th, td {
  border: 1px solmu mustaa;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Kuukausi</th>
      <th>Varastointi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>takuu</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

kuinka tasata <tbody> sisältöä (käyttää CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Kuukausi</th>
      <th>Varastointi</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>takuu</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Kokeile itse

esimerkki 4

kuinka tasata ylös <tbody> sisältöä (käyttää CSS):

<table style="width:50%;">
  <tr>
    <th>Kuukausi</th>
    <th>Varastointi</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>takuu</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Kokeile itse

Globaalit attribuutit

<tbody> Tunniste tukee myös HTML:n globaalit attribuutit。

tapahtumamäärittely

<tbody> Tunniste tukee myös HTML:n tapahtumamäärittely。

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <tbody> Elementti：

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Selaimen tuki

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