CSS Tablolar (Tables)

CSS Tablolar (Tables)

Bir HTML tablosunun görünümü CSS ile büyük ölçüde iyileştirilebilir.

Tablo Kenarlıkları

CSS'de tablo kenarlıkları belirtmek için border özelliğini kullanırız.

Aşağıdaki örnekte, <table>, <th> ve <td> öğelerine siyah bir kenarlık verilmiştir.

Örnek:

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

Tabloya Tam Genişlik Nasıl Verilir?

Yukarıdaki tablo bazı durumlarda küçük görünebilir. Tüm ekranı (tam genişlik) kaplayacak bir tabloya ihtiyacınız varsa, <table> öğesine width: 100% eklemelisiniz.

Örnek:

table {
  width: 100%;
}

Yukarıdaki örneklerdeki tabloların çift kenarlıklı olduğuna dikkat edin. Bunun nedeni, hem tablonun hem de <th> ve <td> öğelerinin ayrı kenarlıklara sahip olmasıdır.

Çift kenarlıkları kaldırmak için aşağıdaki örneğe göz atabilirsiniz.

Tablo Kenarlarını Daraltma

border-collapse özelliği, tablo kenarlıklarının tek bir kenarlığa daraltılıp daraltılmayacağını belirler.

Örnek:

table {
  border-collapse: collapse;
}

Yalnızca tablonun etrafında bir kenarlık istiyorsanız, sadece <table> için border özelliğini belirtmelisiniz.

Örnek:

table {
  border: 1px solid black;
}

CSS Tablo Boyutu Ayarlama

Tablo Genişliği ve Yüksekliği

Bir tablonun genişliği ve yüksekliği, width ve height özellikleriyle tanımlanır.

Aşağıdaki örnek, tablonun genişliğini %100'e ve <th> öğelerinin yüksekliğini 70 piksele ayarlar.

Örnek:

table {
  width: 100%;
}

th {
  height: 70px;
}

Sayfanın yalnızca yarısını kapsaması gereken bir tablo oluşturmak için genişlik: %50'yi kullanmalısınız.

Örnek:

table {
  width: 50%;
}

CSS Tablo Hizalama

Yatay Hizalama

text-align özelliği, <th> veya <td> içindeki içeriğin yatay hizalamasını ayarlar.

Varsayılan olarak, <th> öğelerinin içeriği ortaya hizalanırken <td> öğelerinin içeriği sola hizalanır.

<td> öğelerinin içeriğini de ortaya hizalamak için text-align: center kullanılır.

Örnek:

td {
  text-align: center;
}

İçeriği sola hizalamak için, <th> öğelerine text-align: left özelliğini uygulamalısınız.

Örnek:

th {
  text-align: left;
}

Dikey Hizalama

Dikey hizalama özelliği, <th> veya <td> içindeki içeriğin dikey hizalamasını ayarlar.

Varsayılan olarak, bir tablodaki içeriğin dikey hizalaması ortadadır.

Aşağıdaki örnek, <td> öğeleri için dikey metin hizalamasını aşağıya ayarlar.

Örnek:

td {
  height: 50px;
  vertical-align: bottom;
}

CSS Tablo Stillendirme

Tablo İç Boşluğu (Padding)

Bir tablodaki kenarlıkla içerik arasındaki boşluğu kontrol etmek için <td> ve <th> öğelerinde padding özelliği kullanılır.

Örnek:

th, td {
  padding: 15px;
  text-align: left;
}

Yatay Ayırıcılar

Yatay ayırıcılar için border-bottom özelliğini <th> ve <td> öğelerine eklemelisiniz.

Örnek:

th, td {
  border-bottom: 1px solid #ddd;
}

Tablo Hover Özelliği

Fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için <tr> üzerindeki :hover seçicisi eklenir.

Örnek:

tr:hover {background-color: yellow;}

Çizgili Tablolar

Zebra çizgili tablolar için, nth-child() seçicisini kullanın ve tüm çift (veya tek) tablo satırlarına bir arka plan rengi eklemelisiniz.

Örnek:

tr:nth-child(even) {background-color: #f2f2f2;}

Tabloya Renk Ekleme

Aşağıdaki örnek, <th> öğelerinin arka plan rengini ve metin rengi ekler.

Örnek:

th {
  background-color: #04AA6D;
  color: white;
}

CSS Duyarlı Tablo (Responsive Table)

Ekran tam içeriği görüntüleyemeyecek kadar küçükse, duyarlı bir tablo yatay bir kaydırma çubuğu ile görüntülenir.

Duyarlı hale getirmek için <table> öğesinin etrafına overflow-x:auto eklenmelidir.

Örnek:

<div style="overflow-x:auto;">

<table>
... table İçeriği...
</table>

</div>