Anasayfa
Forum
Hakkında
Ders 8: Tablolar
Ders 8: Tablolar
Neden?Tablolar, satır ve sütun ilişkisi olan verileri karşılaştırmak için kullanılır.
Ne öğreneceğiz?
Bu derste table, tr, th, td ve tablo bölümlerini öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşün. Ardından aşağıdaki örneği kendin yaz. Kodu kaydet, tarayıcıda aç ve küçük bir değişiklik yaparak sonucu gözlemle.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Veri tabloları oluşturabilecek, başlık ve gövde bölümlerini ayırabileceksiniz.
Tablo oluşturmak için <table> kullanılır. Satırlar <tr>, başlık hücreleri <th>, veri hücreleri <td> ile oluşturulur:
PHP Kod:
<table>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
<tr>
<td>Klavye</td>
<td>750 TL</td>
</tr>
</table>
Daha anlamlı bir tablo için <caption>, <thead>, <tbody> ve gerekirse <tfoot> kullanın:
PHP Kod:
<table>
<caption>Kurs Katılımcıları</caption>
<thead>
<tr>
<th scope="col">Ad</th>
<th scope="col">Ders</th>
<th scope="col">Durum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ayşe</td>
<td>HTML</td>
<td>Tamamlandı</td>
</tr>
<tr>
<td>Mehmet</td>
<td>HTML</td>
<td>Devam ediyor</td>
</tr>
</tbody>
</table>
Tabloları sayfa düzeni oluşturmak için kullanmayın. Tablo, satır ve sütun ilişkisi olan veriler için kullanılmalıdır. Görsel düzenleme CSS ile yapılır.
