![Html Tablo Başlıkları](/wp-content/uploads/2023/03/html-tablo-basliklari-00-1024x640.webp)
25 – Tablo Başlıkları – Table Header
Tablomuzun başlıklarıdır. Altındaki sütunların ya da yanındaki satırın başlığıdır. Table head kısaltması olan th etiketi ile tanımlanır.
Yatayda veya dikeyde olabilir.
Bir başlık veya birden fazla başlık kullanılabilir.
![Tablo Başlıkları](/wp-content/uploads/2023/03/tablo-basliklari.webp)
Yatay Tablo Başlıkları
Tablo başlıklarını yatayda kullanabilmemiz için ilk açtığımız satır içerisine th ile başlıkları tanımlayabiliriz.
![Yatay Tablo Başlıkları](/wp-content/uploads/2023/03/yatay-tablo-baslik-olusturma.webp)
Örnek
<html>
<head>
<title>Html Tablo Başlıkları</title>
</head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%; text-align:left;">
<tr>
<th >Adı</th>
<th >Soyadı</th>
<th >Telefon</th>
<th >Adres</th>
</tr>
<tr>
<td>Mehmet</td>
<td>Eser</td>
<td>053200000000</td>
<td>Eskişehir</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Gülen</td>
<td>053200000000</td>
<td>İstanbul</td>
</tr>
<tr>
<td>Enes</td>
<td>Eser</td>
<td>053200000000</td>
<td>Kırklareli</td>
</table>
</body>
</html>
Dikey Tablo Başlıkları
Her satırın ilk sütunu tablo başlığı olacağı için, açtığımız her satırın ilk sütununa th ile tablo başlığını tanımlamalıyız.
Bu her satırda bu şekilde devam edecektir.
![Dikey Tablo Başlık Oluşturma](/wp-content/uploads/2023/03/dikey-tablo-baslik-olusturma.webp)
Örnek
<html>
<head>
<title>Html Yatay Tablo Başlığı</title>
</head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%; text-align:left;">
<tr>
<th >Adı</th>
<td >Mehmet</td>
<td >Ayşe</td>
<td >Mustafa</td>
</tr>
<tr>
<th>Soyadı</th>
<td>Eser</td>
<td>Güler</td>
<td>Topçu</td>
</tr>
<tr>
<th>Yaşı</th>
<td>42</td>
<td>26</td>
<td>55</td>
</tr>
</table>
</body>
</html>
Tabloda birden fazla sütun için başlık
Bazen iki sütuna bir başlık ihtiyacımız olabiliyor. Bunu yapmak için th etiketi içerisinde colspan attribute kullanıyoruz. Örnek kullanımı <th colspan=”2″>Ad, Soyad</th> şeklindedir.
![Birden fazla sütun için başlık oluşturma](/wp-content/uploads/2023/03/birden-fazla-sutun-icin-baslik-ekleme.webp)
Örnek
<html>
<head>
<title>Birden fazla sütun için tablo başlığı</title>
</head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<th colspan="2">Adı ve Soyadı</th>
<th >Telefonu</th>
</tr>
<tr>
<td>Mehmet Eser</td>
<td>Eser</td>
<td>053200000000</td>
</tr>
<tr>
<td>Ayşe Şimşek</td>
<td>Şimşek</td>
<td>053200000000</td>
</tr>
</table>
</body>
</html>
Html Tabloya Genel Başlık Ekleme
Bunun için <caption> kullanabilirsiniz. Tabloya genel bir başlık ekleyecektir.
![Tabloya Genel Başlık Ekleme](/wp-content/uploads/2023/03/tablo-baslik-ekleme-caption.webp)
Örnek
<html>
<head>
<title>Caption ile tabloya başlık ekleme</title>
</head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<table style="width:100%; text-align:center;">
<caption>Öğrenci Listesi</caption>
<tr>
<th colspan="2">Adı ve Soyadı</th>
<th >Telefonu</th>
</tr>
<tr>
<td>Mehmet Eser</td>
<td>Eser</td>
<td>053200000000</td>
</tr>
<tr>
<td>Ayşe Şimşek</td>
<td>Şimşek</td>
<td>053200000000</td>
</tr>
</table>
</body>
</html>