Bu yazımızda Css ile tabloları nasıl özelleştirebiliriz onu öğreneceğiz. En basit haliyle bir tablo oluşturalım ve adım adım Css kodları uygulayarak tablo üzerindeki değişimleri inceleyelim.
3 sütun 2 satırdan oluşan tablomuzun Html kodları ve görünümü şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table> <thead> <tr> <th>Ad</th> <th>Yaş</th> <th>Meslek</th> </tr> </thead> <tbody> <tr> <td>Ali</td> <td>45</td> <td>Doktor</td> </tr> <tr> <td>Veli</td> <td>35</td> <td>Mühendis</td> </tr> </tbody> </table> |
Gördüğünüz gibi tablo olduğunu bile anlamakta zorlanabiliriz.
Şimdi table,th, ve td etiketlerine border özelliği ile kenarlık verelim.
|
1 2 3 4 5 |
table, th, td { border: 1px solid black; } |
Gördüğünüz gibi 2 kenarlık birden oluştu ve görüntü çok hoş olmadı.
Bu kenarlıkları düzeltmek için border-collapse : collapse; özelliğini kullanabiliriz.
table etiketine bu özelliği uygulayalım.
|
1 2 3 4 5 |
table { border-collapse: collapse; } |
Evet, kenarlık kısmınıda çözdükten sonra isterseniz tablodaki her hücreye padding değeri ile iç boşluk verebilirsiniz.
|
1 2 3 4 5 |
th, td { padding: 10px; } |
width ve height özelliklerini kullanarak, genişlik ve yükseklik değerleride verebiliriz.
Tablonun genişliğini 100% yapalım ve bulunduğu alanın genişliğini almasını sağlayalım.
th etiketinin ise yükseklik değerine 40px verelim.
Yazıların ortalanması için de text-align özelliğini kullanalım.
|
1 2 3 4 5 6 7 8 9 10 |
table { width:100%; text-align:center; } th{ height:40px; } |
th etiketine bir arkaplan rengi verelim ve tablonun satırlarının zebra görünümünde olması için birer satır atlayacak şekilde renklendirelim.
Sonuç olarak tüm Css kodlarımız ve tablonun görünümü şu şekilde olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
table { border-collapse: collapse; width:100%; text-align:center; } table, th, td { border: 1px solid black; } th, td { padding: 10px; } th{ height:40px; background-color: cornflowerblue; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } |
Herbir satırın üzerine gelindiğinde renginin değişmesini isterseniz hover olayı ile yapabilirsiniz.
Css kodu
|
1 2 3 |
tr:hover {background-color: #f5f5f5;} |
Bazen sütun sayısı fazla olduğunda tablonuz ekrana sığmayacağı için, tabloyu responsive hale getirmemiz gerekebilir.
Bu gibi durumlarda tablonun tamamını bir <div> içerisine alıp div’e overflow-x:auto özelliğini vermeniz yeterli olacaktır. Böylece x ekseninde scroll oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div style="overflow-x:auto;"> <table> <thead> <tr> <th>Ad</th> <th>Yaş</th> <th>Meslek</th> </tr> </thead> <tbody> <tr> <td>Ali</td> <td>45</td> <td>Doktor</td> </tr> <tr> <td>Veli</td> <td>35</td> <td>Mühendis</td> </tr> </tbody> </table> </div> |
border-spacing özelliği ile tablonun hücreleri arasına boşluklar verebiliriz.
Örneğin hücreler arası 20px boşluk bırakalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> table, td, th { border: 1px solid black; } table { border-spacing: 20px; } </style> <table> <tr> <th>hücre-1</th> <th>hücre-2</th> </tr> <tr> <td>hücre-3</td> <td>hücre-4</td> </tr> </table> |
caption-side özelliği ile tablonun başlığını, tablonun üstünde veya altında gösterebiliriz.
İki değer alır, top ve bottom.
Örneğin tablo başlığını, tablonun üstünde gösterelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> table, td, th { border: 1px solid black; } table { caption-side:top; } </style> <table> <caption>Tablo Başlığı-Top</caption> <tr> <th>hücre-1</th> <th>hücre-2</th> <th>hücre-3</th> <th>hücre-4</th> </tr> <tr> <td>hücre-5</td> <td>hücre-6</td> <td>hücre-7</td> <td>hücre-8</td> </tr> </table> |
empty-cells özelliği ile tablonun boş hücrelerinin görünüp görünmemesini sağlayabiliriz.
İki değer alır, hide ve show.
İkisinide uygulayıp görelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<style> #tablo1 { empty-cells: hide; } #tablo2 { empty-cells: show; } </style> <table id="tablo1" border="1"> <tr> <th>hücre-1</th> <th>hücre-2</th> <th>hücre-3</th> <th>hücre-4</th> </tr> <tr> <td>hücre-5</td> <td>hücre-6</td> <td>hücre-7</td> <td>hücre-8</td> </tr> </table> <table id="tablo2" border="1"> <tr> <th>hücre-1</th> <th>hücre-2</th> <th>hücre-3</th> <th>hücre-4</th> </tr> <tr> <td>hücre-5</td> <td></td> <td>hücre-7</td> <td></td> </tr> </table> |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
