Aşağıda temel olarak html dosyasında tablo oluşturulmuş ve aşağıdaki tüm anlatım ve örnekler bu dosya üzerinden verilmiştir.
<!DOCTYPE html> <html> <head> <title>CSS'de Tablo Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table> <tr> <th>Birinci Başlık Sütunu</th> <th>İkinci Başlık Sütunu</th> <th>Üçüncü Başlık Sütunu</th> </tr> <tr> <td>Birinci Satır Birinci Sütun</td> <td>Birinci Satır İkinci Sütun</td> <td>Birinci Satır Üçüncü Sütun</td> </tr> <tr> <td>İkinci Satır Birinci Sütun</td> <td>İkinci Satır İkinci Sütun</td> <td>İkinci Satır Üçüncü Sütun</td> </tr> <tr> <td>Üçüncü Satır Birinci Sütun</td> <td>Üçüncü Satır İkinci Sütun</td> <td>Üçüncü Satır Üçüncü Sütun</td> </tr> <tr> <td>Dördüncü Satır Birinci Sütun</td> <td>Dördüncü Satır İkinci Sütun</td> <td>Dördüncü Satır Üçüncü Sütun</td> </tr> </table> </body> </html>
Tablo Kenarlıkları (Border) / Sınırları
Kenarlıklar konusunda anlatılan tüm özellikler tablo işlemlerinde de kullanılabilir. Kenarlık (Border) ve Özellikleri adlı yazıma ulaşmak için tıklayınız.
table, th, td{
border:2px solid red;
}
Tablo Kenarlıklarını Daraltma (border-collapse)
Tablo ögelerinden tablo başlığı (<th> table head), hüçre içeriklerine (<td> table data) eğer kenarlık (border) ataması gerçekleştirirsek, her bir hücrenin kendisine ait sınırlarına kenarlık verilirse görüntüde herbir hücrenin arasında çift çizgi varmış gibi gözükür. <table> etiketine de eğer border verilmiş ise tablonun içinde hücreleri ayıran tüm kenarlıklar çift çizgi olarak gözükecektir. Bunu normal bir görünüme kazandırmak için CSS’de border-collapse özelliği kullanılır. Border-collapse özelliğinin varsayılan değeri “separate”‘tir.
table{
border-collapse: collapse;
}
Örnekte border-collapse özelliğine collapse değeri atanarak görünümde tablonun ve hücrelerin kenarlık çizgileri tek çizgi görünümüne kavuşmuştur.
Tablo Genişlik ve Yükseklikleri
Tablolarda hücrelere (başlık <th> satır <tr> içerik <td>) yükseklik ve genişlik değerleri verebiliriz. Genişlik (width) ve yükseklik (height) değerleri yüzdesel (%), pixel (px) cinslerinden olabilir ve en çok kullanılan birimlerdir. Responsive tablolar için yüzdesel değerler tercih edilir.
tr,th{
width: 200px;
height: 50px;
}
Tabloda Hücre İçeriğini Yatay ve Dikey Hizalama
Hücre içeriklerini hizalamak için text-align (yatay hizalama) ve vertical-align (dikey hizalama) özellikleri kullanılmaktadır. Yatay olarak hizalama metni sağa yaslamaya, sola yaslamaya, ortalamaya ve iki yana yaslamak için kullanılır. Vertical-align ise dikey olarak hizalar. Hücre yükseklikleri içeriklere göre fazlalaştırılmış ise metnin daha iyi ve düzenli gözükmesi için dikey anlamda hizalanmaya ihtiyaç duyabilirler. Vertical-align özelliğinin alacağı değerler top (üste hizala), bottom (alta hizala), middle (ortala) olacaktır. Bu değerler en sıklıkla kullanılanları olmakla beraber diğer alabileceği değerleri CSS3 ve HTML Dersleri | Hizalamalar (Align) isimli yazımda bulabilirsiniz. Yazıya ulaşmak için tıklayınız.
th{
text-align: center;
vertical-align: middle;
}
td{
text-align: left;
vertical-align: bottom;
}
Tabloda Hücreler İçin Padding
Tablo’nun kendisi ve hücreleri ayrı ayrı padding değeri alabilirler. Padding değer bazı durumlarda hizalayıcı olarak dahi kullanılabilir fakat bu durum responsive bir tablo yapısına aykırı olacaktır.
th, td{
padding-left: 20px;
padding-right: 50px;
}
Yukarıdaki örnekte hücreler için soldan 20px ve sağdan 50px’lik padding değeri verilmiştir.
Tablo Satırlarına :Hover Sınıfı (Class) Atama
Tablo satırlarına (<tr> table row) :hover sınıfı atayarak, mouse imlecinin üzerine gelmesiyle tablo satırlarını birbirinden ayırabilecek renk veya efektlerin verilmesi mümkündür. Genelge bu bir renk belirlemek veya bulunan renge opacity (saydamlık) özelliği eklenmek suretiyle gerçekleştirilir.
tr{
background-color: lightpink;
}
tr:hover{
opacity: 0.8;
}
Tablo Satırlarını Farkedilebilir Olması için Renklendirme
Satırları aynı renkte bulunan geniş tablolar okunabilmesi ve takip edilebilmesi açısından gözleri yoran bir yapıdadır. Her bir satıra ayrı ayrı renk atamak tabiki mümkünken, genelde yapılan Sözde Sınıflar konusunda gösterilen :nth-child(sayı) sözde sınıfının uygulanmasıdır. Bu sözde sınıf ile satır numaralı çift (even) veya tek (odd) olanlar şeklinde bir stil ataması mevcut olabilir.
th{
background-color: lightblue;
color:white;
}
tr:nth-child(even){
background-color: lightgreen;
}
Caption Tablo Başlık Etiketi
Caption kelime anlamı itibariyle altyazı koymak demektir. Caption özelliği bize tablonun anlamını içeren başlık kısmının nereye konulması ile ilgili bir özelliktir. Top (Üst) veya Bottom (alt) değeri alır. Dikkat edilmesi gereken <table> etiketinden sonra bu başlığın <caption> etiketi içinde belirtilmesidir.
caption{
margin:10px;
caption-side:bottom;
}
Yukarıdaki tüm örnekleri aşağıdaki script’te bulabilir üzerinde sizde değişikler yaparak değişimleri gözlemleyebilirsiniz.
See the Pen Table Proporties by Emre (@esencan) on CodePen.
Son Yorumlar