Html Dersleri 22, Tablolar 3. Bölüm

sevgili html severler, çok kıymetli okuyucularım yeni haftadan herkeze merhabalar

html'de artık bizler gitdikçe önemli konulara geliyor ve öğreniyoruz; bugünde tablolara devam ederek tabloları özelleştirme bölümünü ele alacağız.

Tabloları Özelleştirmenin Önemi

Tabloları özelleştirmek, sadece verileri düzenli bir şekilde sunmakla kalmaz, aynı zamanda web sayfanızın genel görünümünü de etkiler. Özelleştirme sayesinde tablolarınız daha okunaklı, daha görsel ve daha işlevsel hale gelebilir.

Özelleştirme Teknikleri

  • Tablo Başlıklarını Öne Çıkarma:
    • <th> etiketi ile oluşturulan tablo başlıklarını kalın veya farklı bir renkte yaparak diğer hücrelerden ayırabilirsiniz.
    • align özelliği ile başlıkların konumunu (sol, sağ, merkez) ayarlayabilirsiniz.
  • Hücre İçeriğini Biçimlendirme:
    • align özelliği ile hücre içindeki içeriğin konumunu (sol, sağ, merkez) ayarlayabilirsiniz.
    • valign özelliği ile hücre içindeki içeriğin dikey konumunu (üst, orta, alt) ayarlayabilirsiniz.
    • colspan özelliği ile bir hücreyi birden fazla sütuna yayabilirsiniz.
    • rowspan özelliği ile bir hücreyi birden fazla satıra yayabilirsiniz.
  • Tablo Çerçeveleri:
    • border özelliği ile tablonun ve hücrelerin çevresine çerçeve ekleyebilirsiniz.
    • cellspacing özelliği ile hücreler arasındaki boşluğu ayarlayabilirsiniz.
    • cellpadding özelliği ile hücre içindeki içerik ile çerçeve arasındaki boşluğu ayarlayabilirsiniz.

Örnek

<table>

  <tr>

    <th colspan="2">Ürün Bilgileri</th>

  </tr>

  <tr>

    <th>Ürün Adı</th>

    <th>Fiyat</th>

  </tr>

  <tr>

    <td>Telefon</td>

    <td align="right">1000 TL</td>

  </tr>

  <tr>

    <td>Bilgisayar</td>

    <td align="right">5000 TL</td>

  </tr>

</table>

Bu örnekte:

  • İlk satırdaki başlık iki sütunu kaplıyor (colspan="2").
  • Fiyatlar sağa yaslanmış (align="right").

Ödevler

  • Farklı özelliklere sahip tablolar oluşturarak pratik yapın.
  • Bir ürün kataloğu veya bir ders programı tablosu tasarlayın.
  • Tablo başlıklarını farklı renk ve fontlarla biçimlendirin.
  • Hücreleri birleştirerek daha karmaşık tablolar oluşturun.

Sonuç

Bu derste, HTML tablolarını özelleştirmenin temel tekniklerini öğrendik. Bu sayede web sayfalarınızda daha profesyonel ve etkileyici tablolar oluşturabilirsiniz. Unutmayın, pratik yapmak mükemmelliği sağlar. Farklı örnekler yaparak ve farklı özelliklerle oynayarak HTML tablolarında uzmanlaşabilirsiniz.


YORUM YAZ

YORUMLAR

Şu an yorum bulunmamaktadır.