HTML tablolarında her sütun veya satır için ya da birçok sütun/satır için başlıklar bulunabilir.
Tablo Başlıkları
Tablo başlıkları th etiketiyle tanımlanır. Her th ögesi bir tablo hücresini temsil eder.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Turk</th>
<th>Yazilimci</th>
<th>Sitesi</th>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
</table>
</body>
</html>
HTML Dikey Tablo Başlıkları
İlk sütunu tablo başlığı olarak kullanmak için ilk sütundaki alanları <th> olarak değiştirmek gereklidir.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Turk</th>
<td>Yazilimci</td>
<td>Sitesi</td>
</tr>
<tr>
<th>Deneme</th>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<th>Deneme</th>
<td>Deneme</td>
<td>Deneme</td>
</tr>
</table>
</body>
</html>HTML Tablo Başlıklarını Hizalama
Varsayılan olarak tablo başlıkları ortalanmış ve kalın yazılmıştır. Tablo başlıklarını hizalamak için text-align özelliği kullanılabilir.
<!DOCTYPE html>
<html>
<head>
<style>
th {
text-align: right;
}
</style>
</head>
<body>
<table style ="width:100%">
<tr>
<th>Turk</th>
<th>Yazilimci</th>
<th>Sitesi</th>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
</table>
</body>
</html>
HTML Birden Çok Sütun Başlığı
Bazı durumlarda sütunları birleştirip başlık eklememiz gerekebilir. Bu durumda <th> etiketine colspan özelliği eklenerek işlem yapılabilir.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style ="width:100%">
<tr>
<th colspan="2">TurkYazilimci</th>
<th>Sitesi</th>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
</table>
</body>
</html>
HTML Tablolara Başlık Ekleme
Tablonun tamamına başlık görevi görecek bir yazı eklemek mümkündür.
<!DOCTYPE html>
<html>
<body>
<table style ="width:100%">
<caption>Eğitim Sitesi İle İlgili Tablo</caption>
<tr>
<th>Turk</th>
<th>Yazilimci</th>
<th>Sitesi</th>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
<tr>
<td>Deneme</td>
<td>Deneme</td>
<td>Deneme</td>
</tr>
</table>
</body>
</html>
Not : <caption> etiketi <table> etiketinin hemen altına eklenmelidir.
