HTML <tbody> etikett

Kursrekommendationer:

<tbody> Definition och användning

<tbody> etikett används för att gruppera innehåll i HTML-tabeller. <thead> och <tfoot> elementen används tillsammans för att specificera varje del (kropp, rubrik, fot) av tabellen.

Webbläsare kan använda dessa element så att rubriker och fötter kan visas oberoende när kroppen i tabellen rullas. Dessutom kan dessa element användas för att skriva ut rubriker och fötter på toppen och botten av varje sida när stora tabeller som sträcker sig över flera sidor skrivs ut.

Observera:<tbody> elementet måste innehålla en eller flera <tr>-etikett。

<tbody> tecken måste användas i följande kontext: som <table> elementets underelement, i vilket som helst <caption>och<colgroup> och <thead> element efter.

Tips:Som standard påverkar inte <thead>, <tbody> och <tfoot>-elementen tabellens layout. Men du kan använda CSS för att ställa in stilen för dessa element (se exempel nedan)!

exempel

exempel 1

HTML-tabell som innehåller <thead>, <tbody> och <tfoot>-element:

<table>
  <thead>
    <tr>
      <th>Månad</th>
      <th>Sparkonto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totalt</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

exempel 2

Använd CSS för att ställa in stilen för <thead>, <tbody> och <tfoot>:

<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>Månad</th>
      <th>Sparkonto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totalt</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

exempel 3

hur man justerar <tbody> innehållet (använd CSS):

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

Prova själv

exempel 4

hur man justerar vertikalt <tbody> innehållet (använd CSS):

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

Prova själv

Globala egenskaper

<tbody> Etiketterna stöder också Globala egenskaper i HTML。

händelseegenskaper

<tbody> Etiketterna stöder också Händelseegenskaper i HTML。

Standarda CSS-inställningar

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

tbody {
  display: tabellradsgrupp;
  vertical-align: mittpunkt;
  border-color: arv;
}

Webbläsarstöd

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