HTML Tablo Örnekleri

Yazan /

HTML Tabloların Temel Tanımı

HTML tablolar, web geliştiricilerin verileri satır ve sütunlar halinde düzenlemesine olanak tanıyan bir yapıdır. Tablolar, kullanıcılara verileri daha kolay anlayabilir hale getirir ve birçok farklı alanda kullanılabilir. Örneğin, bir ürün listesi, çalışan bilgileri veya herhangi bir kategorideki verilerin sıralanması için etkili bir araçtır.

Bir HTML tablosu, satırların ve sütunların düzenlendiği hücrelerden oluşur. Bu hücreler, içindeki verileri belirtmek için <td> ve başlık hücreleri için <th> etiketleri kullanılarak tanımlanır. Temel bir HTML tablosu oluşturmak oldukça basittir ve yapısı, HTML öğrenmeye yeni başlayanlar için de oldukça anlaşılırdır.

Örneğin, basit bir HTML tablo yapısını şu şekilde oluşturabilirsiniz:

<table>
  <tr>
    <th>Şirket</th>
    <th>İletişim</th>
    <th>Ülke</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Almanya</td>
  </tr>
</table>

Bu kod, 3 sütundan oluşan basit bir tablo oluşturur.

HTML Tablosunun Bileşenleri

HTML tablosu genel olarak birkaç ana bileşenden oluşur. Bunlar sırasıyla:

  • <table>: Tablonun ana etiketidir.
  • <tr>: Her bir satırı tanımlar.
  • <th>: Başlık hücresini temsil eder ve genelde kalın ve ortalanmış görünür.
  • <td>: Veri hücresini belirtir.
  • <caption>: Tablonun başlığını tanımlar.
  • <thead>, <tbody>, <tfoot>: Tablo başlık, gövde ve alt bilgilerini gruplamak için kullanılır.

Örneğin, daha yapısal bir tablo oluşturmak için bu etiketleri kullanabilirsiniz:

<table>
  <caption>Şirket İletişim Bilgileri</caption>
  <thead>
    <tr>
      <th>Şirket</th>
      <th>İletişim</th>
      <th>Ülke</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Almanya</td>
    </tr>
  </tbody>
</table>

Bu yapı, tabloların daha anlamlı ve düzenli olmasını sağlar.

HTML Tablo Örnekleri

Aşağıda farklı kullanım örneklerine dayalı birkaç HTML tablo örneği bulabilirsiniz. Bu örnekler, tabloların çeşitli biçimlerde nasıl düzenlenebileceğini ve kullanılabileceğini göstermektedir.

Örnek 1: Basit Bir Veri Tablosu

Bu örnek, bir ürün listesini içeren basit bir tabloyu gösterir:

<table>
  <tr>
    <th>Ürün Adı</th>
    <th>Fiyat</th>
    <th>Stok Durumu</th>
  </tr>
  <tr>
    <td>Kalem</td>
    <td>1.50 TL</td>
    <td>Var</td>
  </tr>
  <tr>
    <td>Defter</td>
    <td>3.00 TL</td>
    <td>Yok</td>
  </tr>
</table>

Bu tablo, basit özelleştirmeler ile kullanıcıların ürünler hakkında bilgi almasını sağlar.

Örnek 2: İleri Düzey Tablo Özelleştirmesi

Daha karmaşık bir tablo oluşturmak için stil ekleyebiliriz:

<style>
  table {border-collapse: collapse; width: 100%;}
  th, td {border: 1px solid black; padding: 8px; text-align: left;}
  th {background-color: #f2f2f2;}
</style>
<table>
  <tr>
    <th>Öğrenci Adı</th>
    <th>Notu</th>
    <th>Durum</th>
  </tr>
  <tr>
    <td>Ahmet</td>
    <td>85</td>
    <td>Geçti</td>
  </tr>
  <tr>
    <td>Mehmet</td>
    <td>70</td>
    <td>Geçti</td>
  </tr>
  <tr>
    <td>Ayşe</td>
    <td>55</td>
    <td>Kaldı</td>
  </tr>
</table>

Bu örnek, eğitimde kullanılan not takip tabloları için idealdir.

Örnek 3: Dinamik ve Etkileşimli Tablolar

JavaScript ile etkileşimli tablolar oluşturmak mümkündür. Örneğin, aşağıdaki örnek, veri sıralama özelliği olan bir tabloyu göstermektedir:

<table>
  <tr>
    <th onclick="sortTable(0)" style="cursor:pointer;>Ürün Adı</th>
    <th onclick="sortTable(1)" style="cursor:pointer;>Fiyat</th>
    <th onclick="sortTable(2)" style="cursor:pointer;>Stok Durumu</th>
  </tr>
  <tr>
    <td>Kalem</td>
    <td>1.50 TL</td>
    <td>Var</td>
  </tr>
</table>
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementsByTagName("TABLE")[0];
  switching = true;
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (x.innerHTML > y.innerHTML) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}</script>

Bu kod parçacığı, tablo başlıklarına tıkladığınızda verileri sıralamanızı sağlar.

HTML Tablolarında Stil ve Tasarım

HTML tablolarınızı daha çekici hale getirmek için CSS ile stil uygulayabilirsiniz. Stil uygulamak, tabloların okunabilirliğini ve kullanıcı dostu olmasını artırır. Renk, kenar boşlukları, yazı tipi ve arka plan renkleri gibi öğeler üzerinde oynama yaparak kullanıcı deneyimini geliştirmek mümkündür.

Örneğin, CSS kullanarak tablonuza farklı arka plan renkleri ekleyebilir ve hücrelerin kenarlıklarını değiştirebilirsiniz:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
    text-align: left;
  }
</style>

Burada kullanılan CSS ile tablonuzun görünümünü kişiselleştirmiş oluyorsunuz. Ek olarak, daha ilginç bir tasarım elde etmek için zebra şeritli tablolar (her ikinci satırda farklı bir arka plan rengi) da oluşturabilirsiniz.

Sonuç

HTML tablolar, verileri düzenlemek ve sunmak için güçlü bir araçtır. Doğru yapı ve stil ile birlikte kullanıldığında, tablolar bilgilerinizin daha anlaşılır ve erişilebilir olmasını sağlar. Basit tablolarla başladığınızda, daha karmaşık düzenlemelere ve etkileşimli özelliklere geçiş yaparak bilgi aktarımınızı çok daha etkili hale getirebilirsiniz.

Bu yazıda öğrendiğiniz örnekler ve teknikler, HTML ve CSS ile güçlü tablolar oluşturmak için temel bir başlangıç noktası sunar. Bu bilgileri pekiştirmek için pratik yapmayı ve HTML tablolarını kendi projelerinizde denemeyi unutmayın!

Benzer Yazılar

Scroll to Top