Bu dersimizde CSS Tablo Özelliklerinin Kullanımı konusunu öğreneceğiz.
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;
}
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.
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;
}
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;
}
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;
}
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 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;}
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>
Sorular (0)