CSS Tablo Özellikleri (Table)

HTML’de bir şeyleri düzenli bir şekilde yazma, kategorilere ayırmak vb. bir çok şey için tabloları kullanırız. Sonrasında bu tabloları CSS ile şekillendiririz. Bu yazımızda CSS tablo özellikleri konusunu işleyeceğiz.

CSS tabloları şekillendirmek için farklı komutlar vardır. Bunlar border, border-collapse, width-height ve border-spacing‘dir. Şimdi bu komutların sırası ile ne olduğunu ve nasıl kullanabileceğimizi görelim.

Kenarlık (Border)

Tablo kenarındaki kenarlıkları şekillendirmemize yarar.

Bu konuyu ‘CSS Kenarlıklar’ adlı yazımızda işlemiştik. Detaylı bilgi almak için buraya tıklayınız.

Kısa bir örnek ile nasıl kullanıldığını görelim.

table {
  border: 1px solid black;
}

Bu kodu yazdığımızda tablomuzun kenarlığı 1px genişliğinde, düz kenarlık ve siyah renginde olacak.

Kenarlık Şekli (border-collapse)

Tablolar varsayılan olarak iki kenarlık ile gelir. Bazı durumlarda tek kenarlık olsun isteyebilirsiniz. Bunu border-collapse ile sağlayabilirsiniz. Hemen örnek kullanımını görelim.

table {
  border-collapse: collapse;
}

Tablo Genişliği ve Yüksekliği (width-height)

Tablo ve tablo hücrelerinin genişlik (width) ve yüksekliklerinin (height) ne olacağını belirleriz.

Konu hakkında yeterli bilgiye sahip değilseniz ‘CSS Genişlik ve Yükseklik’ adlı yazımızı buraya tıklayarak okuyabilirsiniz.

Kullanımı;

td{
  width: 100px;
  height: 100px;
}

Hücre Arası Boşluk (border-spacing)

Border-spacing özelliği ile tablomuzda bulunan hücreler arasına boşluklar verebiliriz. Örnek kullanımı;

table {
  border-spacing: 20px;
}

Bu yazımızda CSS tablo özellikleri konusunu işledik. Diğer CSS derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.