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:

css zebra tablo

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 zebra tablo

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

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

5932

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • HTML LÄ°NK(BaÄŸlantı)EKLEME - LÄ°NK VERME
  • HTML YAZI VE RESÄ°M ORTALAMA
  • HTML RESME LÄ°NK VERME
  • HTML FORM OLUÅžTURMA
  • CSS YATAY MENÃœ YAPIMI
  • HTML RESÄ°M EKLEME
  • CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
  • HTML DÄ°V ve SPAN NEDÄ°R?
  • HTML ARKAPLANA MÃœZÄ°K EKLEME
  • KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.