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