HTML <tfoot> Etiketi
Örnek
<thead>, <tbody> ve <tfoot> öğesi içeren bir HTML tablosu:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
<tfoot>etiketi, bir HTML tablosundaki altbilgi içeriğini gruplamak için kullanılır .
<tfoot>Öğe, bir tablonun her bir bölümünü (altbilgi, üstbilgi, gövde) belirtmek için
<thead> ve <tbody> öğeleriyle birlikte kullanılır .
Tarayıcılar, tablo gövdesinin üstbilgi ve altbilgiden bağımsız olarak kaydırılmasını sağlamak için bu öğeleri kullanabilir. Ayrıca, birden çok sayfaya yayılan büyük bir tablo yazdırırken, bu öğeler tablo üstbilgisinin ve altbilgisinin her sayfanın üstüne ve altına yazdırılmasını sağlayabilir.
Not: Öğenin <tfoot>içinde bir veya daha fazla
<tr> etiketi olmalıdır.
Etiket <tfoot>aşağıdaki bağlamda kullanılmalıdır: Bir
<table> öğesinin alt öğesi olarak, herhangi bir
<caption> , <colgroup> ,
< thead> ve <tbody > öğelerinden sonra.
İpucu: <thead>, <tbody> ve <tfoot>öğeleri, varsayılan olarak tablonun düzenini etkilemez. Ancak, bu öğelere stil vermek için CSS'yi kullanabilirsiniz (aşağıdaki örneğe bakın)!
Tarayıcı Desteği
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<tfoot> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<tfoot> de destekler .
Daha fazla örnek
Örnek
CSS ile <thead>, <tbody> ve <tfoot> stili:
<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>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Örnek
<tfoot> içindeki içerik nasıl hizalanır (CSS ile):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="text-align:center">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Örnek
<tfoot> içindeki içerik nasıl dikey olarak hizalanır (CSS ile):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr
style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Varsayılan CSS Ayarları
Çoğu tarayıcı, <tfoot>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}