1. HTML'de Tablo Nedir?
HTML tabloları, verileri düzenli ve anlaşılır bir şekilde sunmak için kullanılır. Tablolar, satırlar (<tr>) ve sütunlar (<td>) kullanılarak oluşturulur. Tablo yapıları, başlıklar (<th>), alt başlıklar ve veri hücreleri gibi çeşitli bölümlerden oluşabilir.
2. HTML'de Temel Tablo Yapısı
HTML'de basit bir tablo oluşturmak için <table> etiketi kullanılır. Tabloya satır eklemek için <tr>, her satır içindeki hücreler için <td> ve tablo başlıkları için <th> etiketleri kullanılır.
<table>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ali</td>
<td>Yılmaz</td>
<td>25</td>
</tr>
<tr>
<td>Aylin</td>
<td>Kaya</td>
<td>28</td>
</tr>
</table>
Bu örnekte, bir tablo oluşturduk. <th> etiketleri tablo başlıklarını belirtir ve genellikle kalın ve ortalı şekilde görüntülenir. <td> etiketleri ise veri hücrelerini belirtir.
3. Tabloya Satır ve Sütun Ekleme
Tablonun boyutunu genişletmek için <tr> ve <td> etiketlerini kullanarak yeni satır ve sütunlar ekleyebilirsiniz.
<table>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td>Bilgisayar</td>
<td>1500 TL</td>
<td>20</td>
</tr>
<tr>
<td>Telefon</td>
<td>3000 TL</td>
<td>15</td>
</tr>
<tr>
<td>Tablet</td>
<td>800 TL</td>
<td>10</td>
</tr>
</table>
Bu örnekte, her satırda bir ürünün adını, fiyatını ve stok miktarını gösteren hücreler bulunur. Yeni satırlar ekleyerek tabloyu büyütebilirsiniz.
4. HTML'de Hücre Birleştirme (colspan ve rowspan)
Tablo hücrelerini yatay veya dikey olarak birleştirmek için colspan ve rowspan özniteliklerini kullanabilirsiniz.
colspan ile Yatay Birleştirme:
<table>
<tr>
<th colspan="3">Kayıt Bilgileri</th>
</tr>
<tr>
<td>Ad</td>
<td>Soyad</td>
<td>Yaş</td>
</tr>
<tr>
<td>Emre</td>
<td>Ak</td>
<td>29</td>
</tr>
</table>
colspan="3" kullanarak başlık hücresini üç sütunu kaplayacak şekilde birleştirdik.
rowspan ile Dikey Birleştirme:
<table>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Adres</th>
</tr>
<tr>
<td rowspan="2">Burak</td>
<td>Çelik</td>
<td>İstanbul</td>
</tr>
<tr>
<td>Özdemir</td>
<td>Ankara</td>
</tr>
</table>
rowspan="2" kullanarak "Ad" hücresini iki satırı kapsayacak şekilde birleştirdik.
5. Tabloya Kenarlık Eklemek
HTML tabloları varsayılan olarak kenarlık içermez. border özniteliği veya CSS kullanarak tabloya kenarlık ekleyebilirsiniz. Örnek:
<table border="1">
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Elif</td>
<td>Demir</td>
<td>22</td>
</tr>
</table>
Bu örnekte, border="1" kullanarak tabloya kenarlık ekledik. Daha gelişmiş kenarlıklar ve stiller için CSS kullanabilirsiniz.
6. CSS ile Tablo Stilleri
Tabloları özelleştirmek için CSS kullanarak stiller ekleyebilirsiniz. Arka plan rengi, yazı tipi, kenarlık ve hücre aralıklarını özelleştirmek mümkündür.
Tablo Stili Örneği:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
<table>
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yıldız</td>
<td>30</td>
</tr>
<tr>
<td>Sevda</td>
<td>Kara</td>
<td>27</td>
</tr>
</table>
Bu örnekte, tabloyu %100 genişlikte yaptık ve satırların üzerine gelindiğinde arka plan rengini değiştirdik. Kenarlıkları ve hücre aralıklarını özelleştirdik.
7. Tablo Başlıklarını Sabitleme
Tablo başlıklarını sabitleyerek kullanıcıların veri okurken başlıkları her zaman görebilmesini sağlayabilirsiniz. Bu, özellikle uzun tablolar için kullanışlıdır.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 1;
}
</style>
<table>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td>Laptop</td>
<td>5000 TL</td>
<td>10</td>
</tr>
<!-- Daha fazla veri satırı -->
</table>
Bu örnekte, position: sticky ile tablo başlıklarını sabitledik. Kullanıcı sayfayı kaydırdığında başlıklar sabit kalır.
8. Responsive (Duyarlı) Tablolar
Duyarlı tasarımlar, tablo verilerinin mobil cihazlarda da düzgün görüntülenmesini sağlar. overflow ve width özellikleri ile tabloları mobil uyumlu hale getirebilirsiniz.
<style>
.table-responsive {
width: 100%;
overflow-x: auto;
}
</style>
<div class="table-responsive">
<table>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td>Televizyon</td>
<td>2500 TL</td>
<td>5</td>
</tr>
<!-- Daha fazla veri satırı -->
</table>
</div>
Bu örnekte, tabloyu yatay kaydırılabilir hale getirdik. Mobil cihazlarda tabloyu kaydırarak tüm verileri görüntüleyebilirsiniz.
9. Detaylı Tablo Örneği
Aşağıda, yukarıdaki konuların tümünü kapsayan bir tablo örneği bulabilirsiniz:
<style>
.table-responsive {
width: 100%;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
position: sticky;
top: 0;
z-index: 1;
}
tr:hover {
background-color: #f1f1f1;
}
</style>
<div class="table-responsive">
<table>
<tr>
<th colspan="3">Ürün Listesi</th>
</tr>
<tr>
<th>Ürün</th>
<th>Fiyat</th>
<th>Stok</th>
</tr>
<tr>
<td rowspan="2">Bilgisayar</td>
<td>1500 TL</td>
<td>20</td>
</tr>
<tr>
<td>2000 TL</td>
<td>15</td>
</tr>
<tr>
<td>Telefon</td>
<td>3000 TL</td>
<td>10</td>
</tr>
</table>
</div>
Bu kapsamlı örnek, tablo başlıklarının sabit kalması, hücre birleştirme (colspan ve rowspan), ve responsive tasarım gibi özelliklerin hepsini içerir.
Kapanış
HTML'de tablo oluşturma ve düzenleme konusunu tüm detaylarıyla ele aldık. Tablolar, verilerin düzenli ve okunabilir bir şekilde sunulması için vazgeçilmezdir. colspan ve rowspan gibi özniteliklerle hücre birleştirme, CSS ile stillendirme ve responsive tasarım ile tablolarınızı her cihazda mükemmel görünecek şekilde düzenleyebilirsiniz. Umarım bu içerik, tabloları daha etkili kullanmanız için size rehberlik eder.
Daha fazla HTML konusu ve kod örnekleri için Kodlasak.com'u takip edebilir, diğer içeriklerimizle web geliştirme dünyasında kendinizi daha da geliştirebilirsiniz!