İlginizi Çekebilir

CSS Tablo Özellikleri

CSS Tablo Özellikleri

HTML ile oluşturduğumuz tabloları, HTML ile belli bir yere kadar özelleştirebilmekteyiz. Bildiğiniz gibi özelleştirme dendiği zaman akla CSS gelmektedir. Tam bu noktada ise devreye; CSS tablo özellikleri giriyor. HTML ile özelleştirme yerine CSS ile özelleştirebilme ve zenginleştirme imkanı oldukça fazladır. Tablolarımızın görünümünü zenginleştirirken en büyük yardımcımız CSS kodları olacaktır.
Tablo oluşturma ve tablo özellikleri hakkında bilgi sahibi değilseniz, ” HTML Tablo Oluşturma “ konumuza göz atabilirsiniz.

CSS Tablo Özellikleri
Önerilen Yazı
HTML Tablo Oluşturma

Örnekler yardımıyla tablolarımızı nasıl CSS ile özelleştireceğimizi birlikte inceleyelim.

İsimVizeFinal
Mustafa5570
Mert6515

Elimizde bu şekilde bir tablo bulunsun. Bu tablonun adım adım özelleştirmelerini yapalım. İlk olarak tablonun çerçevesini ayarlamakla başlayalım.
 
 

Tabloya çerçeve ekleme

Tablomuza yeşil renkte, 5px kalınlığında bir çerçeve eklemek istersek; border parametresini kullanmamız gerekecek.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Hücre içi çerçeve ekleme

Tablomuzun çerçevesini ayarladıktan sonra, hücre içi çerçeve ayarlamasını yapalım. Hücre içi çerçeve ayarlaması yaparken, border-collapse özelliğini kullanmamız; bize görünüm açısından fayda sağlaycaktır. border-collapse parametresi ile tablo kenarlıklarının belli bir sınır dahilinde birleşmesini ayarlamaktayız.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Tablonun arka plan rengini değiştirme

Şimdi de tablo içeriğimizin arka plan renk ayarlamalarını; hücre içi renklendirmelerine bakalım. CSS ile arka plan renklendirmesi yaparken; background-color parametresi kullanılır.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Tablo yazılarının görünümünü değiştirme

CSS metin özelliklerinde ve font özelliklerinde kullandığımız özellikleri, tablo özelleştirmelerinde kullanabiliriz. Örneğin yazıların boyutunu, kalınlığı gibi çeşitli özelleştirmeleri yapabiliriz.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Tablo boyutu ayarlama

Tablonun genel yükseklik ve alçaklık değerlerini de değiştirebiliriz. height ve width etiketlerini kullanarak yapmaktayız.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Hücre içi boşluk ayarlama

Tablomuz içerisinde hücre içi boşlukların ayarlanmasında padding parametresini kullanmaktayız.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Tabloya hover ekleme

Tabloyu CSS ile özelleştirme yaparken belki de en çok beğenebileceğiniz özelliklerden birisi, hover özelliği olabilir. Tablo satırlarının üzerine geldiğiniz zaman satırın renklenmesini sağlayan bu özellik ile tablonuzu zenginleştirebilirsiniz.

İsimVizeFinal
Mustafa5570
Mert6515

 
 

Genel özet ve tüm özelleştirmelerin kullanımı

Öğrendiğimiz bu bilgiler doğrultusunda; bütün özellikleri kullanarak bir tablo oluşturalım.

1 Nisan 2021 COVID-19 Tablosu
ÜLKELERTOPLAM VAKATOPLAM İYİLEŞENTOPLAM VEFAT
ABD31.175.88223.674.406565.331
Brezilya12.753.25811.169.937321.886
Hindistan12.299.98711.522.224163.421
Fransa4.644.423294.63895.640
Rusya4.554.2644.176.41999.233
İngiltere4.350.2663.860.174126.764
İtalya3.607.0832.933.757109.847
Türkiye3.357.9883.035.04331.713
İspanya3.291.3943.042.35275.541
Almanya2.840.4892.535.00077.139

İlk olarak caption, tablo başlığına göz atalım;

 
Tablonun genel CSS özelleştirmelerine bakacak olursak;

 
Tablo içerisinde ki başlık hücreleri özelleştirmeleri ise;

 
Tablo içi hücrelerin özelleştirmeleri;

 
Tablonun hover kodu;

 
Tablonun HTML kodu;

Yorum Yap

Yorum Yap

Yorumlar (1)

  1. 4 ay önce

    güzel

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir