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?

1. 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.
2. 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ı

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.