Membuat Tabel Zebra HTML Warna Warni dengan CSS3

Adakalanya ketika kita ingin membuat tabel yang menampilkan data kita di sistem informasi yang kita buat dengan tampilan yang berbeda. Misalnya kita ingin membuat tampilan seperti berikut ini :

No	Nama	Jurusan
1	Andi Sholihin	Teknik Informatika
2	Eka Nanda	Teknik Informatika
3	Winda Sarifati	Teknik Informatika
4	Rahilah	Teknik Informatika

caranya mudah, pertama mari kita buat tabelnya dulu.

<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Jurusan</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Andi Sholihin</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Eka Nanda</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Winda Sarifati</td>
            <td>Teknik Informatika</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Rahilah</td>
            <td>Teknik Informatika</td>
        </tr>
    </tbody>
</table>

Selanjutnya kita pasang CSSnya seperti berikut ini.

<style type="text/css">
table {
   border-collapse:collapse;
   width:90%;
}

table, td, th {
   border:1px solid black;
}

tbody tr:nth-child(odd) {
   background-color: #ccc;
}
</style>

Mudah kan? sekian tutorial kali ini, semoga bermanfaat. Salam Blogger Madura.