PricingLoginStart free
HTML Academy · Oppitunti

thead-, tbody- ja tfoot-rakenne

Järjestä taulukon rivit semanttisiin otsikko-, runko- ja alatunnisteosioihin.

Oppitunti 2/414 vaihetta

thead-, tbody- ja tfoot-rakenne on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Taulukon osiot

Täydellisessä HTML-taulukossa on kolme valinnaista mutta suositeltua osiota:

  • <thead> — otsikkorivit
  • <tbody> — sisältörivit (pääasialliset tiedot)
  • <tfoot> — alatunnisterivit (summat, yhteenvedot)

thead

<thead>-elementti sisältää otsikkorivit:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

<tbody>-elementti sisältää pääasialliset datarivit:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

<tfoot>-elementti sisältää alatunnisterivit — yleensä summat tai yhteenvedot:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Täydellinen rakenteinen taulukko

Kokonainen taulukko, jossa on kaikki kolme osiota:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Miksi thead-, tbody- ja tfoot-elementtejä käytetään?

Taulukon rakenteen hyödyt:

  • Semantiikka — ruudunlukijat ymmärtävät otsikot, datan ja yhteenvedon erot
  • CSS-kohdistus — tyylittäkää osiot toisistaan riippumatta
  • Tulostus — thead toistuu jokaisella tulostetulla sivulla
  • Vieritys — vierittäkää tbody-osiota erikseen CSS:n overflow-määrityksellä

Vieritettävä tbody

Vierittäkää vain sisältöä ja pitäkää otsikko paikallaan:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

Implisiittinen tbody

Jos jätätte <tbody>-elementin pois, selain lisää sen automaattisesti:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Useita tbody-elementtejä

Taulukossa voi olla useita <tbody>-ryhmiä:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Taulukon osioiden tyylittäminen

Kohdistakaa osiot CSS:llä:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Ruudunlukijan toiminta

Kun thead- ja tbody-rakenne on määritetty oikein, ruudunlukijat voivat:

  • Ilmoittaa sarakeotsikot kunkin datasolun asiayhteydeksi
  • Siirtyä osioiden välillä (otsikkoalueen ja data-alueen välillä)
  • Kertoa käyttäjille rivien ja sarakkeiden määrän

Useita rivejä sisältävät thead-otsikot

thead voi sisältää useita rivejä monimutkaisia otsikoita varten:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Pikatarkistus

Missä tfoot yleensä sijaitsee HTML-lähdekoodissa verrattuna renderöityyn taulukkoon?

Vastaa interaktiivisessa oppitunnissa

Kertaus: thead tbody tfoot

Taulukon rakenteen perusteet:

  • <thead> — otsikkorivit (toistuvat tulostettaessa)
  • <tbody> — datarivit (niitä voi olla useita)
  • <tfoot> — yhteenveto- ja summirivit
  • Mahdollistaa CSS-kohdistuksen osioihin ja taulukoiden saavutettavan lukemisen
  • Kirjoittakaa tbody aina näkyviin, vaikka selaimet lisäävät sen automaattisesti
Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
40
Oppitunnit
159
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”thead-, tbody- ja tfoot-rakenne” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “thead-, tbody- ja tfoot-rakenne”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”thead-, tbody- ja tfoot-rakenne”?

Järjestä taulukon rivit semanttisiin otsikko-, runko- ja alatunnisteosioihin. Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”thead-, tbody- ja tfoot-rakenne”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. table, tr, td ja th
  2. thead-, tbody- ja tfoot-rakenne
  3. colspan ja rowspan solujen yhdistämiseen
  4. Taulukoiden saavutettavuus: scope, summary ja caption
← Takaisin: HTML Academy