CSS Dersleri 18 - Tablo Özellikleri

Merhaba değerli Kodlama Vakti takipçileri, 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;
}

CSS Tablo Stilleri

Tablolarda Padding

Bir tablodaki kenarlık ve içerik arasındaki boşluğu kontrol etmek için td ve th öğelerinde "padding" özelliğini kullanın:

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

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

th, td {
  padding: 15px;
}

Yatay Ayraç

Tablolarımıza yatay ayraç eklemek için border-bottom özelliğini th ve td 'ye ekleyin:

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

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

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>