Table Hücre Satır ve Sütun Birleştirme

HTML tablolarında, bir hücrenin birden fazla satır veya sütuna yayılmasını sağlamak için colspan ve rowspan özelliklerini kullanabiliriz. Bu yazıda, bu özelliklerin nasıl kullanıldığını öğrenmek için bir örnek üzerinden ilerleyeceğiz.

1. `colspan` ve `rowspan` Nedir?

colspan: Bir hücrenin kaç sütunu kapsayacağını belirler. Örneğin, bir hücreyi iki sütun genişliğinde yapmak için colspan="2" kullanılır.
rowspan: Bir hücrenin kaç satırı kapsayacağını belirler. Örneğin, bir hücreyi iki satır yüksekliğinde yapmak için rowspan="2" kullanılır.

Bu özellikler, özellikle tabloların daha düzenli ve anlamlı görünmesi için çok kullanışlıdır.

2. Örnek Tablo: En Popüler Programlama Dilleri

HTML Kodu

Aşağıda, programlama dillerinin kullanım alanları ve öğrenme zorluklarıyla ilgili bir tablo oluşturuyoruz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>En Popüler Programlama Dilleri</title>
</head>
<body>
  <h1>En Popüler Programlama Dilleri</h1>
  <table border="1">
    <!-- Tablo Başlıkları -->
    <thead>
      <tr>
        <th>Programlama Dili</th>
        <th>Kullanım Alanı</th>
        <th>Öğrenme Zorluğu</th>
      </tr>
    </thead>
    <!-- Tablo Gövdesi -->
    <tbody>
      <tr>
        <td>Python</td>
        <td>Veri Bilimi, Web Geliştirme</td>
        <td>Kolay</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>Web Geliştirme, Mobil Uygulama</td>
        <td>Orta</td>
      </tr>
      <tr>
        <td>Java</td>
        <td>Kurumsal Uygulamalar, Android</td>
        <td>Zor</td>
      </tr>
      <tr>
        <td>C++</td>
        <td>Oyun Geliştirme, Sistem Programlama</td>
        <td>Zor</td>
      </tr>
    </tbody>
    <!-- Tablo Alt Bilgisi -->
    <tfoot>
      <tr>
        <td colspan="3">Bu tablo, en popüler programlama dillerinin özetini içerir.</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

3. Tablo Çıktısı

Programlama Dili	Kullanım Alanı	Öğrenme Zorluğu
Python	Veri Bilimi, Web Geliştirme	Kolay
JavaScript	Web Geliştirme, Mobil Uygulama	Orta
Java	Kurumsal Uygulamalar, Android	Zor
C++	Oyun Geliştirme, Sistem Programlama	Zor
Alt Bilgi:	Bu tablo, en popüler programlama dillerinin özetini içerir.

4. Kullanım Senaryoları

Bilgilendirme Amaçlı Tablolar: Eğitim materyallerinde veya sunumlarda bu tarz tablolardan faydalanabilirsiniz.
Karmaşık Veriler: Verileri daha düzenli göstermek için satır ve sütun birleştirme tekniklerini uygulayabilirsiniz.

Sonuç

Bu örnek, HTML tablolarında temel yapı taşlarını öğrenmenizi kolaylaştıracak. colspan ve rowspan gibi özellikler, tabloları daha esnek ve düzenli hale getirmenizi sağlar. Bu bilgilerle, daha karmaşık tablolar oluşturabilirsiniz.