html derslerimizin 21. haftasından sevgiyle merhabalar kıymetli okurlarım; 20 haftayı geride bıraktık ve pekçok şey öğrendik artık html üzerinde.
bu hafta sizinle tablolarda 2. bölümü, esasen tabloları tüm detayıyla kullanmayı işliyoruz.
Tekrar etmek ve yinelemek gerekirse tablo nedir?
HTML tabloları, web sayfalarında verileri düzenli bir şekilde sunmak için kullanılan bir yapıdır. Günlük hayatta kullandığımız tablolar gibi satır (row) ve sütun (column)lardan oluşur. Bu sayede verilerimiz daha okunaklı ve anlaşılır hale gelir.
Tablo Etiketleri
- <table>: Tüm tabloyu kapsayan ana etikettir.
- <tr>: Tablonun her bir satırını temsil eder.
- <td>: Tablonun her bir hücresini temsil eder.
- <th>: Tablo başlıklarını oluşturmak için kullanılır.
Basit Bir Tablo Örneği
<table>
<tr>
<th>
Ad Soyad</th>
<th>
Yaş</th>
<th>
Şehir</th>
</tr>
<tr>
<td>
Ali Can</td>
<td>
30</td>
<td>
Ankara</td>
</tr>
<tr>
<td>
Ayşe Demir</td>
<td>
25</td>
<td>
İstanbul</td>
</tr>
</table>
Bu kodun açıklaması:
- <table>: Bir tablo oluşturur.
- <tr>: İlk satırı oluşturur ve içinde üç başlık hücresi bulunur.
- <th>: Tablo başlıklarını belirtir.
- <tr>: İkinci ve üçüncü satırları oluşturur.
- <td>: Veri hücrelerini belirtir.
Bu örneği tarayıcınızda açtığınızda basit bir tablo göreceksiniz.
Daha Fazla Örnek
- Bir ürün kataloğu:
<table>
<tr>
<th>
Ürün Adı</th>
<th>
Fiyat</th>
<th>
Stok</th>
</tr>
</table>
- Bir ders programı:
<table>
<tr>
<th>
Gün</th>
<th>
Saat</th>
<th>
Ders</th>
</tr>
</table>
Unutmayın: Tablolar, web sayfalarında verileri düzenli bir şekilde sunmanın en etkili yollarından biridir. Ancak, aşırı karmaşık tablolar kullanmaktan kaçının. Basit ve anlaşılır tablolar her zaman daha iyidir.
Bir sonraki bölümde: Tabloları daha da özelleştirmek için kullanabileceğimiz diğer etiketleri ve CSS stillemeyi öğreneceğiz.
22. haftada görüşmek üzere; esenlikler dilerim.