Html Ders 6 – Tablolar

Tablolar, verileri satır ve sütunlar halinde düzenli bir şekilde sunmak için kullanılır. Özellikle sayısal veriler, karşılaştırmalar veya zaman çizelgeleri gibi yapılandırılmış bilgileri görselleştirmek için idealdirler.

Temel Tablo Yapısı:

HTML’de bir tablo oluşturmak için aşağıdaki etiketleri kullanılır:

  • <table>: Tablonun kendisini tanımlar.
  • <tr>: Bir satırı (table row) tanımlar.
  • <td>: Bir hücreyi (table data) tanımlar ve veriyi içerir.
  • <th>: Bir başlık hücresini (table header) tanımlar. Genellikle sütun veya satır başlıkları için kullanılır. Tarayıcılar genellikle kalın ve merkezli olarak görüntülerler.

Temel Kullanım:

HTML
<table>
  <tr>
    <th>Başlık 1</th>
    <th>Başlık 2</th>
  </tr>
  <tr>
    <td>Veri 1</td>
    <td>Veri 2</td>
  </tr>
  <tr>
    <td>Veri 3</td>
    <td>Veri 4</td>
  </tr>
</table>

Tablo Özellikleri ve Biçimlendirme:

  • border Özelliği: Tablonun kenarlıklarını tanımlar. CSS ile daha iyi kontrol edilebilir.
  • colspan Özelliği: Bir hücrenin birden fazla sütunu kaplamasını sağlar. Örneğin, bir başlık hücresinin iki sütunu kapsamasını istiyorsanız colspan=”2″ kullanabilirsiniz.
  • rowspan Özelliği: Bir hücrenin birden fazla satırı kaplamasını sağlar. Örneğin, bir başlık hücresinin iki satırı kapsamasını istiyorsanız rowspan=”2″ kullanabilirsiniz.
  • width ve height Özellikleri: Tablonun veya hücrelerin genişliğini ve yüksekliğini belirtir. CSS ile daha iyi kontrol edilebilir.
  • align Özelliği: Hücre içindeki metnin hizalamasını belirler (left, right, center). CSS ile daha iyi kontrol edilebilir.

Örnek:

HTML
<table>
  <tr>
    <th colspan="2">Genel Bilgiler</th>
  </tr>
  <tr>
    <td>Ad:</td>
    <td>John Doe</td>
  </tr>
  <tr>
    <td>Soyad:</td>
    <td>Smith</td>
  </tr>
</table>

Tablo Bölümleri:

Tabloları daha yapılandırılmış hale getirmek için aşağıdaki etiketleri kullanabilir:

  • <thead>: Tablonun başlık bölümünü tanımlar. Genellikle sütun başlıklarını içerir.
  • <tbody>: Tablonun ana veri bölümünü tanımlar.
  • <tfoot>: Tablonun altbilgi bölümünü tanımlar. Genel toplamlar veya ek bilgiler için kullanılabilir.

Örnek:

HTML
<table>
  <thead>
    <tr>
      <th>Ürün</th>
      <th>Fiyat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elma</td>
      <td>2 TL</td>
    </tr>
    <tr>
      <td>Muz</td>
      <td>3 TL</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Toplam: 5 TL</td>
    </tr>
  </tfoot>
</table>

CSS ile Tablo Biçimlendirme:

HTML tablolarının görünümünü özelleştirmek için CSS kullanmak en iyi uygulamadır. Aşağıdaki CSS özelliklerini kullanarak tablolar biçimlendirilebilir:

  • border: Kenarlık stilini, genişliğini ve rengini belirler.
  • background-color: Arka plan rengini ayarlar.
  • text-align: Metin hizalamasını ayarlar (left, right, center).
  • padding: Hücre içindeki metne boşluk ekler.
  • margin: Hücre dışındaki boşluğu ayarlar.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler