HTML Tablolarına Giriş
HTML tabloları, yapılandırılmış verileri satır ve sütunlar halinde göstermek için kullanılır. Tablolar sadece tablo verisi için kullanılmalı, sayfa düzeni için kullanılmamalıdır.
Temel Tablo Yapısı
Basit Tablo
<table>
<tr>
<th>Ürün Adı</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td>MacBook Pro</td>
<td>25.000 TL</td>
<td>15</td>
</tr>
<tr>
<td>iPhone 15</td>
<td>18.000 TL</td>
<td>32</td>
</tr>
</table>Tablo Etiketleri
<table>: Tablo kapsayıcısı<tr>: Tablo satırı (Table Row)<th>: Tablo başlık hücresi (Table Header)<td>: Tablo veri hücresi (Table Data)
Gelişmiş Tablo Yapısı
Tablo Bölümleri
<table>
<caption>2024 Satış Raporu</caption>
<thead>
<tr>
<th>Ay</th>
<th>Satış</th>
<th>Hedef</th>
<th>Başarı Oranı</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ocak</td>
<td>150.000 TL</td>
<td>120.000 TL</td>
<td>125%</td>
</tr>
<tr>
<td>Şubat</td>
<td>180.000 TL</td>
<td>140.000 TL</td>
<td>129%</td>
</tr>
<tr>
<td>Mart</td>
<td>95.000 TL</td>
<td>130.000 TL</td>
<td>73%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Toplam</th>
<td>425.000 TL</td>
<td>390.000 TL</td>
<td>109%</td>
</tr>
</tfoot>
</table>Tablo Bölümleri Açıklaması:
<caption>: Tablo başlığı ve açıklaması<thead>: Tablo başlık bölümü<tbody>: Tablo veri bölümü<tfoot>: Tablo alt bilgi bölümü
Ipucu
İpucu: <thead>, <tbody> ve <tfoot> kullanımı, büyük tablolarda yazdırma sırasında her sayfada başlık tekrarını sağlar ve CSS ile stil vermeyi kolaylaştırır.
Hücre Birleştirme
Sütun Birleştirme (colspan)
<table>
<tr>
<th colspan="3">Ürün Bilgileri</th>
</tr>
<tr>
<th>Ürün Adı</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td>Laptop</td>
<td>15.000 TL</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">Toplam Değer</td>
<td>375.000 TL</td>
</tr>
</table>Satır Birleştirme (rowspan)
<table>
<tr>
<th>Kategori</th>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
<tr>
<td rowspan="2">Bilgisayar</td>
<td>MacBook Pro</td>
<td>25.000 TL</td>
</tr>
<tr>
<td>MacBook Air</td>
<td>18.000 TL</td>
</tr>
<tr>
<td rowspan="2">Telefon</td>
<td>iPhone 15</td>
<td>18.000 TL</td>
</tr>
<tr>
<td>iPhone 14</td>
<td>15.000 TL</td>
</tr>
</table>Karmaşık Birleştirme
<table>
<caption>Üç Aylık Satış Raporu</caption>
<thead>
<tr>
<th rowspan="2">Bölge</th>
<th colspan="3">2024 İlk Çeyrek</th>
<th rowspan="2">Toplam</th>
</tr>
<tr>
<th>Ocak</th>
<th>Şubat</th>
<th>Mart</th>
</tr>
</thead>
<tbody>
<tr>
<td>İstanbul</td>
<td>150.000</td>
<td>180.000</td>
<td>165.000</td>
<td>495.000</td>
</tr>
<tr>
<td>Ankara</td>
<td>95.000</td>
<td>110.000</td>
<td>105.000</td>
<td>310.000</td>
</tr>
<tr>
<td>İzmir</td>
<td>75.000</td>
<td>85.000</td>
<td>90.000</td>
<td>250.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Genel Toplam</th>
<td>320.000</td>
<td>375.000</td>
<td>360.000</td>
<td>1.055.000</td>
</tr>
</tfoot>
</table>Tablo Erişilebilirliği
Başlık ve Veri İlişkilendirme
<table>
<caption>Öğrenci Not Listesi</caption>
<thead>
<tr>
<th id="name">Öğrenci Adı</th>
<th id="math">Matematik</th>
<th id="science">Fen Bilgisi</th>
<th id="english">İngilizce</th>
<th id="average">Ortalama</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Ahmet Yılmaz</td>
<td headers="math">85</td>
<td headers="science">92</td>
<td headers="english">78</td>
<td headers="average">85</td>
</tr>
<tr>
<td headers="name">Ayşe Demir</td>
<td headers="math">94</td>
<td headers="science">88</td>
<td headers="english">91</td>
<td headers="average">91</td>
</tr>
</tbody>
</table>Scope Özelliği
<table>
<caption>Finansal Özet</caption>
<thead>
<tr>
<th scope="col">Kategori</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Gelir</th>
<td>1.200.000</td>
<td>1.350.000</td>
<td>1.180.000</td>
<td>1.450.000</td>
</tr>
<tr>
<th scope="row">Gider</th>
<td>800.000</td>
<td>950.000</td>
<td>750.000</td>
<td>920.000</td>
</tr>
<tr>
<th scope="row">Kar</th>
<td>400.000</td>
<td>400.000</td>
<td>430.000</td>
<td>530.000</td>
</tr>
</tbody>
</table>Uyarı
Erişilebilirlik: Karmaşık tablolarda scope ve headers özelliklerini kullanarak ekran okuyucuların tabloyu doğru şekilde okumasını sağlayın.
Responsive Tablo Teknikleri
1. Yatay Kaydırma
<div class="table-container">
<table>
<thead>
<tr>
<th>Ürün Adı</th>
<th>Kategori</th>
<th>Fiyat</th>
<th>Stok</th>
<th>Satış</th>
<th>Değerlendirme</th>
<th>Tarih</th>
</tr>
</thead>
<tbody>
<tr>
<td>MacBook Pro 16"</td>
<td>Bilgisayar</td>
<td>45.000 TL</td>
<td>12</td>
<td>156</td>
<td>4.8/5</td>
<td>15.06.2025</td>
</tr>
</tbody>
</table>
</div>
<style>
.table-container {
overflow-x: auto;
max-width: 100%;
}
table {
min-width: 600px;
width: 100%;
}
</style>2. Sütun Gizleme
<table class="responsive-table">
<thead>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
<th class="hide-mobile">Kategori</th>
<th class="hide-mobile">Stok</th>
<th class="hide-tablet">Tarih</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone 15</td>
<td>18.000 TL</td>
<td class="hide-mobile">Telefon</td>
<td class="hide-mobile">45</td>
<td class="hide-tablet">10.06.2025</td>
</tr>
</tbody>
</table>
<style>
@media (max-width: 768px) {
.hide-mobile {
display: none;
}
}
@media (max-width: 480px) {
.hide-tablet {
display: none;
}
}
</style>3. Kart Görünümü
<table class="card-table">
<thead>
<tr>
<th>Öğrenci</th>
<th>Sınıf</th>
<th>Ortalama</th>
<th>Durum</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Öğrenci">Ahmet Yılmaz</td>
<td data-label="Sınıf">10-A</td>
<td data-label="Ortalama">85.5</td>
<td data-label="Durum">Başarılı</td>
</tr>
<tr>
<td data-label="Öğrenci">Ayşe Demir</td>
<td data-label="Sınıf">10-B</td>
<td data-label="Ortalama">92.0</td>
<td data-label="Durum">Başarılı</td>
</tr>
</tbody>
</table>
<style>
@media (max-width: 480px) {
.card-table thead {
display: none;
}
.card-table tr {
display: block;
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.card-table td {
display: block;
text-align: right;
padding: 5px 0;
border: none;
}
.card-table td:before {
content: attr(data-label) ": ";
float: left;
font-weight: bold;
}
}
</style>Gelişmiş Tablo Örnekleri
Fiyat Listesi Tablosu
<table class="price-table">
<caption>Hosting Paketleri Fiyat Listesi</caption>
<thead>
<tr>
<th scope="col">Özellik</th>
<th scope="col">Başlangıç</th>
<th scope="col">Profesyonel</th>
<th scope="col">Kurumsal</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Disk Alanı</th>
<td>5 GB</td>
<td>50 GB</td>
<td>Sınırsız</td>
</tr>
<tr>
<th scope="row">Bant Genişliği</th>
<td>100 GB</td>
<td>1 TB</td>
<td>Sınırsız</td>
</tr>
<tr>
<th scope="row">E-posta Hesabı</th>
<td>5</td>
<td>50</td>
<td>Sınırsız</td>
</tr>
<tr>
<th scope="row">Veritabanı</th>
<td>1</td>
<td>10</td>
<td>Sınırsız</td>
</tr>
<tr>
<th scope="row">SSL Sertifikası</th>
<td>❌</td>
<td>✅</td>
<td>✅</td>
</tr>
<tr>
<th scope="row">Destek</th>
<td>E-posta</td>
<td>E-posta + Chat</td>
<td>7/24 Telefon</td>
</tr>
<tr class="price-row">
<th scope="row">Aylık Fiyat</th>
<td><strong>₺29</strong></td>
<td><strong>₺99</strong></td>
<td><strong>₺299</strong></td>
</tr>
</tbody>
</table>Program Tablosu
<table class="schedule-table">
<caption>Haftalık Ders Programı - 10-A Sınıfı</caption>
<thead>
<tr>
<th scope="col">Saat</th>
<th scope="col">Pazartesi</th>
<th scope="col">Salı</th>
<th scope="col">Çarşamba</th>
<th scope="col">Perşembe</th>
<th scope="col">Cuma</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">08:30-09:20</th>
<td>Matematik</td>
<td>Türkçe</td>
<td>İngilizce</td>
<td>Fen Bilgisi</td>
<td>Tarih</td>
</tr>
<tr>
<th scope="row">09:30-10:20</th>
<td>Türkçe</td>
<td>Matematik</td>
<td>Fen Bilgisi</td>
<td>İngilizce</td>
<td>Coğrafya</td>
</tr>
<tr>
<th scope="row">10:30-11:20</th>
<td>İngilizce</td>
<td>Fen Bilgisi</td>
<td>Matematik</td>
<td>Türkçe</td>
<td>Matematik</td>
</tr>
<tr>
<th scope="row">11:30-12:20</th>
<td colspan="5" class="break">ÖĞLE ARASI</td>
</tr>
<tr>
<th scope="row">13:00-13:50</th>
<td>Beden Eğitimi</td>
<td>Resim</td>
<td>Müzik</td>
<td>Beden Eğitimi</td>
<td>Seçmeli</td>
</tr>
<tr>
<th scope="row">14:00-14:50</th>
<td>Laboratuvar</td>
<td>Sosyal Bilgiler</td>
<td>Teknoloji</td>
<td>Laboratuvar</td>
<td>Seçmeli</td>
</tr>
</tbody>
</table>Karşılaştırma Tablosu
<table class="comparison-table">
<caption>Telefon Modelleri Karşılaştırması</caption>
<thead>
<tr>
<th scope="col">Özellik</th>
<th scope="col">iPhone 15</th>
<th scope="col">Samsung S24</th>
<th scope="col">Google Pixel 8</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ekran</th>
<td>6.1" OLED</td>
<td>6.2" Dynamic AMOLED</td>
<td>6.2" OLED</td>
</tr>
<tr>
<th scope="row">İşlemci</th>
<td>A17 Pro</td>
<td>Snapdragon 8 Gen 3</td>
<td>Google Tensor G3</td>
</tr>
<tr>
<th scope="row">RAM</th>
<td>8 GB</td>
<td>8 GB</td>
<td>8 GB</td>
</tr>
<tr>
<th scope="row">Depolama</th>
<td>128/256/512 GB</td>
<td>128/256 GB</td>
<td>128/256 GB</td>
</tr>
<tr>
<th scope="row">Kamera</th>
<td>48MP Ana + 12MP Ultra</td>
<td>50MP Ana + 12MP Ultra</td>
<td>50MP Ana + 12MP Ultra</td>
</tr>
<tr>
<th scope="row">Batarya</th>
<td>3349 mAh</td>
<td>4000 mAh</td>
<td>4575 mAh</td>
</tr>
<tr>
<th scope="row">İşletim Sistemi</th>
<td>iOS 17</td>
<td>Android 14</td>
<td>Android 14</td>
</tr>
<tr class="price-row">
<th scope="row">Fiyat</th>
<td><strong>₺34.999</strong></td>
<td><strong>₺29.999</strong></td>
<td><strong>₺24.999</strong></td>
</tr>
<tr>
<th scope="row">Değerlendirme</th>
<td>⭐⭐⭐⭐⭐ (4.8)</td>
<td>⭐⭐⭐⭐⭐ (4.6)</td>
<td>⭐⭐⭐⭐⭐ (4.5)</td>
</tr>
</tbody>
</table>Tablo Performansı ve En İyi Uygulamalar
1. Büyük Tablolar için Sayfanlama
<div class="table-pagination">
<table>
<caption>
Kullanıcı Listesi (1-10 / 250)
</caption>
<thead>
<tr>
<th>ID</th>
<th>Ad Soyad</th>
<th>E-posta</th>
<th>Kayıt Tarihi</th>
<th>Durum</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Ahmet Yılmaz</td>
<td>[email protected]</td>
<td>15.06.2025</td>
<td>Aktif</td>
</tr>
<!-- Diğer satırlar... -->
</tbody>
</table>
<nav aria-label="Tablo sayfanlama">
<ul class="pagination">
<li><a href="?page=1" aria-label="Önceki sayfa">‹</a></li>
<li><a href="?page=1" aria-current="page">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=2" aria-label="Sonraki sayfa">›</a></li>
</ul>
</nav>
</div>2. Sıralama Özelliği
<table class="sortable-table">
<thead>
<tr>
<th>
<button type="button" aria-sort="ascending">
Ad Soyad
<span aria-hidden="true">↑</span>
</button>
</th>
<th>
<button type="button" aria-sort="none">
Yaş
<span aria-hidden="true">↕</span>
</button>
</th>
<th>
<button type="button" aria-sort="none">
Maaş
<span aria-hidden="true">↕</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmet Yılmaz</td>
<td>28</td>
<td>₺15.000</td>
</tr>
<tr>
<td>Ayşe Demir</td>
<td>32</td>
<td>₺18.500</td>
</tr>
</tbody>
</table>3. Filtreleme
<div class="table-filters">
<form>
<label for="department">Departman:</label>
<select id="department" name="department">
<option value="">Tümü</option>
<option value="it">IT</option>
<option value="hr">İK</option>
<option value="sales">Satış</option>
</select>
<label for="search">Arama:</label>
<input type="search" id="search" name="search" placeholder="Çalışan ara...">
<button type="submit">Filtrele</button>
</form>
</div>
<table>
<!-- Tablo içeriği -->
</table>Özet ve Ödev
Bu bölümde öğrendikleriniz:
✅ HTML tablo yapısı ve temel etiketler
✅ Gelişmiş tablo özellikleri (thead, tbody, tfoot, caption)
✅ Hücre birleştirme teknikleri (colspan, rowspan)
✅ Tablo erişilebilirliği (scope, headers)
✅ Responsive tablo teknikleri
✅ Karmaşık tablo örnekleri
Pratik Ödev
-
Öğrenci not listesi oluşturun:
- Öğrenci adları, dersler ve notlar
- Ortalama hesaplama satırı
- Başarı durumu gösterimi
- Responsive tasarım
-
Ürün karşılaştırma tablosu yapın:
- En az 3 ürün, 5 özellik
- Fiyat karşılaştırması
- Görsel puanlama sistemi
- Mobil uyumlu tasarım
-
Çalışan listesi tablosu:
- Kişisel bilgiler, pozisyon, maaş
- Departman gruplandırması
- Toplam hesaplamalar
- Erişilebilirlik özellikleri
Sonraki ve son bölümde HTML5’in gelişmiş özelliklerini ve modern web standartlarını öğreneceksiniz!