HTML <tbody> etiket

Definition og brug

<tbody> mærket bruges til at gruppere hovedindholdet i HTML-tabeller.

<tbody> elementet sammen med <thead> og <tfoot> elementer bruges sammen til at specificere hver del (hoved, rubrik, fodnote) af tabellen.

Browseren kan bruge disse elementer til at sikre, at rubrikker og fodnoter vises uafhængigt, når tabellens hovedindhold rulles. Derudover kan disse elementer gøre det muligt at printe rubrikker og fodnoter øverst og nederst på hver side, når store tabeller printes over flere sider.

Bemærk:<tbody> elementet skal have en eller flere <tr>-mærket.

<tbody> mærker skal bruges i følgende kontekst: som <table> elementernes underelementer, i hvilken som helst <caption>og<colgroup> og <thead> elementer efter.

Tip:Som standard påvirker <thead>, <tbody> og <tfoot>-elementer ikke tabellayout. Men du kan bruge CSS til at sætte stilen på disse elementer (se eksemplerne nedenfor)!

Eksempel

Eksempel 1

HTML-tabellen, der indeholder <thead>, <tbody> og <tfoot>-elementer:

<table>
  <thead>
    <tr>
      <th>Måned</th>
      <th>Opsparing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

Eksempel 2

Brug CSS til at sætte stilen på <thead>, <tbody> og <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åned</th>
      <th>Opsparing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Samlet</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prøv det selv

Eksempel 3

Hvordan man justerer <tbody> indholdet (brug af CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Måned</th>
      <th>Opsparing</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prøv det selv

Eksempel 4

Hvordan man justerer lodret <tbody> indholdet (brug af CSS):

<table style="width:50%;">
  <tr>
    <th>Måned</th>
    <th>Opsparing</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prøv det selv

Globale attributter

<tbody> Etiketter understøtter også Globale attributter i HTML.

begivenhedsattributter

<tbody> Etiketter understøtter også Begivenhedsattributter i HTML.

Standard CSS-indstillinger

De fleste browsere viser følgende standardværdier <tbody> Element:

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

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support