CSS’de Tablolar

CSS tablolarınızda farklı renk ve tasarımlar kullanmanıza olanak sağlamaktadır.

Tablolarla ilgili öğreneceğimiz komutlar:

  • border
  • border-collapse
  • width ve height
  • padding
  • color

border: Kenarlık

Tablalora kenarlık verebilmek için border özelliği kullanılır.


Örnek Kullanım

table, th, td {
    border: 1px solid black;
}

border-collapse: Kenarlıkları Kaldır

Tablo özelliği olarak bunu belirtirsek tablonun varsayılan kenarlıkları görülmeyecektir.


Örnek Kullanım

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

width/height: Tablo Genişliği ve Yüksekliği

Tablo ve tablo hücreleri için genişlik (width) ve yükseklik (height) belirtmemizi sağlar.


Örnek Kullanım

table {
    width: 100%;
}

th {
    height: 50px;
} 

padding: Kenar Boşlukları

Tablo içinden belirtilen değerde boşluk verdirir.


Örnek Kullanım

td {
    padding: 15px;
} 

Renklendirme

Örnek Kullanım

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}