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ınlacaktır.

1461

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.