CSS zebra strip table

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

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>

Alfa Adhitya Member since December 18, 2019

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