HTML <tfoot> etiketi

Tanım ve Kullanım

<tfoot> etiketi, HTML tablosundaki alt başlık içeriğini gruplamak için kullanılır.

<tfoot> etiketi ile <thead> ve <tbody> öğeleri bir araya getirerek tablonun her bölümünü (alt başlık, başlık, metin) belirtebilirsiniz.

tarayıcılar bu öğeleri kullanabilir, böylece tablo metnini kaydırırken başlık ve alt başlık bağımsız olarak görüntülenebilir. Ayrıca, büyük tabloların sayfalar halinde yazdırıldığında, bu öğeler tablo başlığı ve alt başlıklarının her sayfanın üstünde ve altında yazdırılmasını sağlayabilir.

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

<tfoot> etiketi, aşağıdaki bağlamda kullanılmalıdır: olarak <table> öğesinin alt öğeleri, herhangi bir <caption>、<colgroup>、<thead> ve <tbody> öğesi之后。

İpucu:Varsayılan olarak, <thead>、<tbody> ve <tfoot> Öğeler tablo düzenini etkilemez. Ancak, bu öğelerin stillerini CSS kullanarak ayarlayabilirsiniz (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

Hizalama nasıl yapılır <tfoot> İçeriği (CSS kullanarak):

<table style="width:100%">
  <tr>
    <th> Ay </th>
    <th> Tasarruf </th>
  </tr>
  <tr>
    <td> Ocak </td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Toplam</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kişisel olarak deneyin

Örnek 4

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

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

Kişisel olarak deneyin

Genel özellikler

<tfoot> Bu etiketler ayrıca HTML'deki genel özellikler.

olay özelliklerini destekler

<tfoot> Bu 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üleyecektir <tfoot> Eleman:

tfoot {
  display: table-footer-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