HTML <tbody> etiketi

Tanım ve Kullanım

<tbody> etiketi, HTML tablosundaki metin içeriğini gruplamak için kullanılır.

<tbody> etiketi ile <thead> ve <tfoot> elementleri birlikte kullanarak, tablonun her bölümünü (metin, başlık, alt başlık) belirlemek için kullanılır.

Tarayıcılar bu elementleri kullanarak, tablo metnini kaydırırken başlık ve alt başlıkların bağımsız olarak görüntülenmesini sağlar. Ayrıca, büyük tabloların birden fazla sayfada yazdırıldığında, bu elementler sayfa başında ve sonunda tablo başlık ve alt başlıklarını yazdırmak için kullanılabilir.

Dikkat:<tbody> elementi içinde bir veya daha fazla <tr> etiketi.

<tbody> işareti, aşağıdaki bağlamda kullanılmalıdır: <table> elementinin alt elementleri, herhangi bir <caption>ve<colgroup> ve <thead> elementinin ardından.

İpucu:Varsayılan olarak, <thead>、<tbody> ve <tfoot> elementleri tablo düzenini etkilemez. Ancak, bu elementlerin stillerini ayarlamak için CSS kullanabilirsiniz (aşağıdaki örnekleri gözatın)!

Örnek

Örnek 1

<thead>、<tbody> ve <tfoot> içeren HTML tablosu:

<table>
  <thead>
    <tr>
      <th> Ay</th>
      <th> Tasarruf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Ocak</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Şubat</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kişisel olarak deneyin

Örnek 2

CSS kullanarak <thead>、<tbody> ve <tfoot> stillerini ayarlayın:

<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> Ay</th>
      <th> Tasarruf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Ocak</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Şubat</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kişisel olarak deneyin

Örnek 3

Nasıl hizalanır <tbody> İçeriği (CSS kullanarak):

<table style="width:100%">
  <thead>
    <tr>
      <th> Ay</th>
      <th> Tasarruf</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td> Ocak</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Şubat</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Kişisel olarak deneyin

Örnek 4

Dikey hizalama nasıl yapılır <tbody> İçeriği (CSS kullanarak):

<table style="width:50%;">
  <tr>
    <th> Ay</th>
    <th> Tasarruf</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td> Ocak</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Şubat</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Kişisel olarak deneyin

Genel Özellikler

<tbody> Etiketler ayrıca HTML'deki Genel Özellikler.

olay özelliklerini destekler

<tbody> Etiketler ayrıca HTML'deki Olay Özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüler <tbody> Element:

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

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek