CSS zebra strip table

alfa6661
- December 31, 2011
0 (0 votes)
Rate :
Bagaimana Membuat efek zebra strip pada table dengan menggunakan CSS

Artikel ini membahas bagaimana cara membuat efek zebra pada table, artinya membuat warna background yang berbeda untuk baris ganjil dan genap pada table

Contoh

Berikut adalah potongan kode untuk contoh diatas

CSS

tbody tr:nth-child(odd) {
   background-color: #F8F8F8;
}
 
tbody tr:nth-child(even) {
   background-color: #dadada;
}

HTML

<table>
<thead>
    <tr>
        <th width="100px" align="left">Nama</th>
        <th width="100px" align="center">Kelas</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Alfa Adhitya</td>
        <td align="center">3 IF 4</td>
    </tr>
    <tr>
        <td>Ade</td>
        <td align="center">3 IF 4</td>
    </tr>
    <tr>
        <td>Agus</td>
        <td align="center">3 IF 2</td>
    </tr>
    <tr>
        <td>Asep</td>
        <td align="center">3 IF 5</td>
    </tr>
</tbody>
</table>

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article