CSS'de Tablo Özellikleri

Bu dersimizde CSS Tablo Özelliklerinin Kullanımı konusunu öğreneceğiz.

# border : Tablo Kenarlıkları

CSS'de tablo kenarlıklarını belirtmek için border özelliğini kullanılır.Aşağıdaki örnek table, th ve td etiketleri için siyah bir kenarlık belirtir.

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

# Tam Ekran (Full-Width) Tablo Oluşturma 

Bazı durumlarda oluşturduğumuz tablolar küçük görünebilir. Tüm ekrana (tam genişlik) yayılması gereken bir tabloya ihtiyacınız varsa, table etiketine width:100% ekleyin:

table {
  width: 100%;
}

Tablolarda Çift Kenarlık Sorunu

Yukarıdaki örneklerdeki tablonun çift kenarlı olduğuna dikkat edin. Bunun nedeni, hem table hem de th ve td etiketlerinin ayrı kenarlıklara sahip olmasıdır. Bunun çözümü ise CSS'de ki "border-collapse" özelliğidir.

# border-collapse

CSS'de border-collapse özelliği, tablo kenarlıklarının tek bir sınır olarak daraltılıp daraltılmayacağını belirler:

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

table {
  width: 100%;
  border-collapse: collapse;
}

# 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ğin 100% ve th etiketinin yüksekliğini 70 piksel olarak ayarlarmasını sağlar :

table {
  width: 100%;
}

th {
  height: 70px;
}

# Tablolarda Yatay (Horizontal) Hizalama

CSS'de text-align özelliği, th veya td içindeki içeriğin yatay hizalamasını (sol, sağ veya merkez gibi) ayarlar.Varsayılan olarak, th etiketinin içeriği ortaya hizalanır ve td etiketinin içeriği sola hizalanır.

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

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}

# Tablolarda Dikey (Vertical) Hizalama

CSS'de vertical-align özelliği, içeriğin th veya td içindeki dikey hizalamasını (üst, alt veya orta gibi) ayarlar.Varsayılan olarak, bir tablodaki içeriğin dikey hizalaması ortadır.

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

table {
  border-collapse: collapse;
  width: 100%;
}

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

# Tablolarda Hover Özelliği

Tablolarda fareyle üzerine gelindiğinde tablo satırlarını vurgulamak için tr üzerindeki :hover seçicisini kullanın:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

# Tablolarda Responsive Özelliği

Duyarlı (Responsive) bir tablo, ekran tüm içeriği görüntülemek için çok küçükse yatay bir kaydırma çubuğu görüntüleyecektir:

CSS'de tablolarımızı responsive hale getirmek için table etiketinin etrafına overflow-x: auto özelliği olan bir kapsayıcı (div) ekleyin.

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

  <table>
 
  </table>

</div>