HTML – CSS ile Tablo Biçimlendirme

Web sayfamıza eklediğimiz tablo üzerinde çerçeve ekleme, arka plan rengi düzenlemesi, metin hizalama, yazı rengi değiştirme işlemlerini CSS ile düzenleyebiliriz.

Tabloya Border Ekleme

<TABLE> etiketine verdiğimiz BORDER özelliği tablomuza genel bir çerçeve çizilmesini sağlar.

Hücrelerde çerçeve belirlemek istiyorsak <TD> etiketine BORDER vermemiz gerekir.

Tablonun çerçevesini düzenleme

Tablonun kenarlıklarını birleştirerek tek bir çizgi olarak görünmesini istiyorsak border-collapse özelliğini değiştirmemiz gerekir.

Tablonun genişlik ve yükseklik ayarları

<TABLE> etiketine yazdığımız width (genişlik) ve height (yükseklik) değerleri tüm tabloyu etkilemektedir. Ancak belli bir satırı etkilemek istiyorsak aşağıdaki örnekte olduğu gibi <TR> etiketine yukseklik adında ID tanımlayarak yalnızca o satırın yüksekliği ayarlanabilir.

Tablonun iç boşluklarını ayarlama

<TD> etiketine verdiğimi PADDING özelliği ile yazıların tablo hücrelerine olan uzaklığı ayarlanır.

Tabloda metin hizalama

TEXT-ALIGN özelliği ile tablo içinde yazılan metinlerin konumu ayarlanır.

  • Center (ortala)
  • Left (Sola dayalı)
  • Right (Sağa dayalı)
  • Justify(iki yana yaslı)

Tablonun arkaplan rengi değiştirme

<TABLE> etikete verilecek olan BACKGROUND-COLOR özelliği ile tabloya arkaplan rengi verilir.

Arkaplana resim ekleme

<TABLE> etikete verilecek olan BACKGROUND-IMAGE özelliği ile tabloya arkaplan resmi eklenir.

Tabloda yazı rengi değiştirme

COLOR özelliği ile tablo içindeki metinlerin rengi değiştirilir. FONT-WEIGHT özelliği ile metinlerin kalın olması sağlanır.

 

Tabloda Sütun ve Satır renklendirme

nth-child kullanımı:

Seçil ŞEKERCİ HÜSEM

2010 yılından bu yana Bilişim Teknolojileri Öğretmeni olarak meslek liselerinde görev yapmaktayım.

Tüm yazılarını göster

One Comment on “HTML – CSS ile Tablo Biçimlendirme”

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.