HTML <tbody> 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
<tbody>etiketi, gövde içeriğini bir HTML tablosunda gruplamak için kullanılır .
<tbody>Öğe, bir tablonun her bir bölümünü (gövde, üstbilgi, altbilgi) belirtmek için <thead > ve
<tfoot> öğ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 <tbody>içinde bir veya daha fazla
<tr> etiketi olmalıdır.
Etiket <tbody>aşağıdaki bağlamda kullanılmalıdır: Bir
<table> öğesinin alt öğesi olarak, herhangi bir
<caption> , <colgroup> ve
< thead> öğesinden sonra .
İpucu: < <tbody>thead>, 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 | |||||
|---|---|---|---|---|---|
| <tbody> | Yes | Yes | Yes | Yes | Yes |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<tbody> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<tbody> 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
<tbody> içindeki içerik nasıl hizalanır (CSS ile):
<table style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Örnek
<tbody> içindeki içerik nasıl dikey olarak hizalanır (CSS ile):
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody style="vertical-align:bottom">
<tr
style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr
style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Varsayılan CSS Ayarları
Çoğu tarayıcı, <tbody>öğeyi aşağıdaki varsayılan değerlerle görüntüler:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}