CSS Dersleri Bölüm 8 –Tabloları Stillendirme
Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.
Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Table Borders(tablo kenarları)
border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.
Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:
Örnek
table, th, td
{
border: 1px solid black;
}
Kendiniz deneyin! »Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.
Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.
Kenarları birleştirmek
border-collapse özelliği tablo kenarlarının birleşik ya da ayrı olup olmayacağını belirler:
Örnek
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}Kendiniz deneyin! »
Tablo genişlik ve yüksekliği
Width ve height özellikleri ile tablonun genişlik ve yüksekliği belirlenir.
Aşağıdaki örnekte genişlik yüzde yüz ve yükseklik de 50px:
Örnek
table
{
width:100%;
}
th
{
height:50px;
}Kendiniz deneyin! »
Tablo yazısı hizalaması
text-align ve vertical-align özellikleri ile tablo içeriği hizalanmaktadır.
text-align özelliği yatay hizalama tıpkı sol,sağ veya merkeze alma gibi(left,right,center):
Örnek
td
{
text-align:right;
}Kendiniz deneyin! »
vertical-align özelliği de dikey hizalama için tıpkı tepede, dipte veya ortada gibi(top,bottom,middle):
Örnek
td
{
height:50px;
vertical-align:bottom;
}Kendiniz deneyin! »
Table Padding(Tablo iç boşluğu)
Tablodaki içerik ile kenar arasındaki boşluğu kontrol edebilmeyi sağlar padding özelliğini td ve th elementlerinde kullanmak:
Örnek
td
{
padding:15px;
}Kendiniz deneyin! »
Table Color(Tablo rengi)
Aşağıdaki örnek bize tablo kenarlarının rengini ve th elementine ait olan yazının ve arkaplanın rengini değiştirmeyi göstermektedir:
Örnek
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}Kendiniz deneyin! »
Daha fazla Örnek
Süslü bir tablo yapın Bu örnek süslü bir tablo yapımını göstermektedir.
Tablo başlığının konumunu ayarlama Bu örnek tablo açıklamasının konumunu ayarlamayı göstermektedir.