CSS ZEBRA DESENLİ TABLO

Daha önceki yazımızda css ile tablo şekillendirmeye değinmiştik. Css ile tablolara müdahale edince güzel sonuçlar elde edebildiğimizi gördük; şimdi de oldukça işimize yarayacak bir stil üzerinde daha duracağız zebra desenli tablolar. Neden böyle bir kullanıma ihtiyaç duyarız çünkü alt alta listeler ile çalışıyorsak biraz algıyı artırabilmek için bir çözüm sunacaktır.

CSS ile zebra çizgili tablo oluşturmak çok kolay; Bir sürü css yazmak, class tanımlamakla uğraşmak yerine aşağıdaki şekilde tablolarınızı kolaylıkla zebra çizgili hale dönüştürebilirsiniz, hem de tek satırlık bir kodla bunu yaparız.

CSS:

tr:nth-child(odd) { background-color:#a9cdeb}

ÇIKTI:

Zebra desenli tablomuzun css kodu ie8 ve alt versiyonlarında çalışmaz. İe8 ve altı için tek tek class tanımlamalıyız. İe8 ve alt versiyonları kullanan çok az sayıda kullanıcı var önemli değil diyorsanız ilk css kod yapısını kullanın.

HTML:

<table>
    <tbody>
  
    <tr class="odd">
  
    <td>a1</td> 
    <td>a2</td>
    <td>a3</td> 
    
    </tr>
    <tr class="even">
     <td>b1</td> 
     <td>b2</td>
     <td>b3</td> 
      
    </tr>
    <tr class="odd">
     <td>c1</td> 
     <td>c2</td>
     <td>c3</td> 
      
    </tr>
    <tr class="even">
  
     <td>c1</td> 
     <td>c2</td>
     <td>c3</td> 
   
    </tr>
    <tr class="odd">
  
     <td>d1</td> 
     <td>d2</td>
     <td>d3</td>
   
    </tr>
    <tr class="even">
  
     <td>e1</td> 
     <td>e2</td>
     <td>e3</td>
   
    </tr>
  <tr class="odd">
  
     <td>f1</td> 
     <td>f2</td>
     <td>f3</td>
   
    </tr>
  
    </tbody>
</table>

CSS:

table, tr, td { 

  border: 1px solid #000;
  
  border-collapse: collapse;
  
  padding: 10px;
}

td{width:50px;}

tr.even {
         background:#ddd;
        }
 
tr.odd  {
         background:#FFE6CC;
        }
 

Tablomuzu bir başlık kısmı ekleyelim onu gri tonla renklendirelim.

HTML:

<table> 
   
<thead >

<tr>
 
    <th>BAŞLIK1</th>
    <th>BAŞLIK2</th> 
    <th>BAŞLIK3</th>
    
</tr>

</thead>

<tbody>
 
<tr>

    <td>a1</td> 
    <td>a2</td>
    <td>a3</td> 
    
</tr>

<tr>

    <td>b1</td>
    <td>b2</td>
    <td>b3</td> 

</tr>

<tr>

    <td>c1</td> 
    <td>d2</td>
    <td>e3</td> 
    
</tr>

<tr>

    <td>e1</td> 
    <td>e2</td>
    <td>e3</td> 
    
</tr>
<tr>

    <td>f1</td> 
    <td>f2</td>
    <td>f3</td> 
    
</tr>

</tbody>

CSS:

table{border-collapse: collapse}

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

td,th{width:120px;height:30px;}

th{background-color:#c1c1c1}

tr:nth-child(odd){background:#a9cdeb;}

tr:nth-child(even){background:#f8f8b1;}

ÇIKTI:

CSS TABLOLARI ŞEKİLLENDİRME konusu için Bakınız