tfoot Etiketi

tfoot etiketi, tablonun alt kısmını tanımlar. Belirli bir gruba hemen CSS stilleri uygulanabilmesi için satırları gruplamak amacıyla kullanılır. Bir tabloda yalnızca bir tane tfoot etiketi bulunabilir.

tfoot etiketi genellikle, HTML tablosunun üst kısmını, ana kısmını ve alt kısmını tanımlamak için thead ve tbody etiketleriyle birlikte kullanılır. Varsayılan olarak tarayıcı, tfoot içeriğini tablonun altına, thead içeriğini ise üst kısmına yerleştirecektir.

Örnek

tfoot etiketiyle gruplanmış satır grubuna, color özelliğini kullanarak kırmızı metin rengi verelim:

html<table>
  <thead>
    <tr>
      <th>İsim</th>
      <th>Soyisim</th>
      <th>Maaş</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>isim1</td>
      <td>soyisim1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>isim2</td>
      <td>soyisim2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>adet: 2</td>
      <td>-</td>
      <td>toplam: 1200$</td>
    </tr>
  </tfoot>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Örnek

Burada ise, thead'ın üstte olmadığına ve tfoot'ın altta olmadığına bakalım, yine de tarayıcı onları kendi yerlerine yerleştirecektir:

html<table>
  <tfoot>
    <tr>
      <td>adet: 2</td>
      <td>-</td>
      <td>toplam: 1200$</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>isim1</td>
      <td>soyisim1</td>
      <td>200$</td>
    </tr>
    <tr>
      <td>isim2</td>
      <td>soyisim2</td>
      <td>1000$</td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <th>İsim</th>
      <th>Soyisim</th>
      <th>Maaş</th>
    </tr>
  </thead>
</table>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Ayrıca Bakınız