Css Tablo Özellikleri ve Kullanımı

Bu yazımızda Css ile tabloları nasıl özelleştirebiliriz onu öğreneceğiz. En basit haliyle bir tablo oluşturalım ve adım adım Css kodları uygulayarak tablo üzerindeki değişimleri inceleyelim.

3 sütun 2 satırdan oluşan tablomuzun Html kodları ve görünümü şu şekilde;

css-dersleri-tablo-ozellikleri-ve-kullanimi 

Gördüğünüz gibi tablo olduğunu bile anlamakta zorlanabiliriz.

Şimdi table,th, ve td etiketlerine border özelliği ile kenarlık verelim.

css-dersleri-tablo-ozellikleri-ve-kullanimi-1

Gördüğünüz gibi 2 kenarlık birden oluştu ve görüntü çok hoş olmadı.

Bu kenarlıkları düzeltmek için border-collapse : collapse; özelliğini kullanabiliriz.

table etiketine bu özelliği uygulayalım.

css-dersleri-tablo-ozellikleri-ve-kullanimi-2

Evet, kenarlık kısmınıda çözdükten sonra isterseniz tablodaki her hücreye padding değeri ile iç boşluk verebilirsiniz.

css-dersleri-tablo-ozellikleri-ve-kullanimi-3

width ve height özelliklerini kullanarak, genişlik ve yükseklik değerleride verebiliriz.

Tablonun genişliğini 100% yapalım ve bulunduğu alanın genişliğini almasını sağlayalım.

th etiketinin ise yükseklik değerine 40px verelim.

Yazıların ortalanması için de text-align özelliğini kullanalım.

css-dersleri-tablo-ozellikleri-ve-kullanimi-4

th etiketine bir arkaplan rengi verelim ve tablonun satırlarının zebra görünümünde olması için birer satır atlayacak şekilde renklendirelim.

Sonuç olarak tüm Css kodlarımız ve tablonun görünümü şu şekilde olacaktır.

css-dersleri-tablo-ozellikleri-ve-kullanimi-5

Herbir satırın üzerine gelindiğinde renginin değişmesini isterseniz hover olayı ile yapabilirsiniz.

Css kodu

Bazen sütun sayısı fazla olduğunda tablonuz ekrana sığmayacağı için, tabloyu responsive hale getirmemiz gerekebilir.

Bu gibi durumlarda tablonun tamamını bir <div> içerisine alıp div’e overflow-x:auto özelliğini vermeniz yeterli olacaktır. Böylece x ekseninde scroll oluşacaktır.

css-dersleri-tablo-ozellikleri-ve-kullanimi-6

border-spacing özelliği ile tablonun hücreleri arasına boşluklar verebiliriz.

Örneğin hücreler arası 20px boşluk bırakalım.

css-dersleri-tablo-ozellikleri-ve-kullanimi-7

caption-side özelliği ile tablonun başlığını, tablonun üstünde veya altında gösterebiliriz.

İki değer alır, top ve bottom.

Örneğin tablo başlığını, tablonun üstünde gösterelim.

css-dersleri-tablo-ozellikleri-ve-kullanimi-8

empty-cells özelliği ile tablonun boş hücrelerinin görünüp görünmemesini sağlayabiliriz.

İki değer alır, hide ve show.

İkisinide uygulayıp görelim.

css-dersleri-tablo-ozellikleri-ve-kullanimi-9

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link