Cara Membuat Zebra Table pada HTML

Zebra Table cocok untuk digunakan pada tabel yang memiliki banyak data, dan setiap data memiliki field-field yang cukup banyak. Table dengan desain belang-belang ini akan menghilangkan kesan monoton pada tabel.


Oke kita langsung aja buat tabelnya. Nanti hasilnya akan seperti gambar dibawah ini.

Cara Membuat Zebra Table pada HTML, Cara 1.

cara ini adalah dengan mensisipkan kode warna diantara <tr> .... </tr>. Lihat kode berikut ini (perhatikan teks yang diwarnai merah).

<table border="0" cellpadding="7" cellspacing="0" class="zebra-table" style="width: 80%;"><thead>
<tr> <th>No</th> <th>Nama Lengkap</th> <th>Alamat</th> </tr>
</thead> <tbody>
<tr style="background-color: #eeeeee;"> <td>1</td> <td>Aliyah Nabilah</td> <td>Jakarta</td> </tr>
<tr> <td>2</td> <td>Laudya Cynthia Bella</td> <td>Bandung</td> </tr>
<tr style="background-color: #eeeeee;"> <td>3</td> <td>Muhammad Arif</td> <td>Alam Sutra</td> </tr>
<tr> <td>4</td> <td>Jihan Fahira</td> <td>Jakarta</td> </tr>
<tr style="background-color: #eeeeee;"> <td>5</td> <td>Rio Febrian</td> <td>Pagedangan</td> </tr>
<tr> <td>6</td> <td>Titi Kamal</td> <td>Sumedang</td> </tr>
<tr style="background-color: #eeeeee;"> <td>7</td> <td>Dian Sastro Wardoyo</td> <td>Cipinang Gading</td> </tr>
<tr> <td>8</td> <td>Nabila Aulia</td> <td>Cilacap</td> </tr>
<tr style="background-color: #eeeeee;"> <td>9</td> <td>Fachri Ramadhan</td> <td>Ciater</td> </tr>
<tr> <td>10</td> <td>Syaiful Jamil</td> <td>Ciledug</td> </tr>
</tbody> </table>

Cukup merepotkan kalau kita harus menuliskan kodenya satu persatu seperti di atas. Tapi ..... Jangan khawatir, masih ada satu cara lagi yang lebih simpel.
Yuk disimak.

Cara Membuat Zebra Table pada HTML, Cara 2.

Pada cara yang ke-2 ini kita akan membuat kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.

Perhatikan Contoh berikut:

/* CSS for Zebra Table in index.html */
.zebra-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.zebra-table th,.zebra-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.zebra-table tbody tr:nth-child(odd) { /* Make table like zebra */
background:#eee;
}/* End CSS for Zebra Table in index.html */

Jika anda memperhatikannya, anda akan mengetahui bahwa ternyata hanya ada beberapa baris kode saja untuk styling setiap tabel. Untuk menyesuaikannya dengan desain web anda, anda bisa mengganti warna-warnanya. Atau, anda juga mungkin bisa menambahkan style-style yang menurut anda bagus.

Setelah menuliskan kode CSS diatas, sekarang saatnya kita buat tabelnya dengan kode HTML.
Markup HTML yang digunakan untuk membuat zebra Table (tabel belang-belang) hampir sama dengan cara membuat tabel pada umumnya, yang merupakan kode HTML standar dari pembuatan sebuah tabel. Yang berbeda dari setiap table adalah nama class-nya. Anda bisa lihat kodenya dibawah.

<table class=”zebra-table“>
<thead> <tr> <th>No</th> <th>Nama</th> <th>Alamat</th> </tr> </thead>
<tbody>
<tr> <td>1</td> <td>Aliyah Nabilah</td> <td>Jakarta</td> </tr>
<tr> <td>2</td> <td>Laudya Cynthia Bella</td> <td>Bandung</td> </tr>
<tr> <td>3</td> <td>Muhammad Arif</td> <td>Alam Sutra</td> </tr>
<tr> <td>4</td> <td>Jihan Fahira</td> <td>Jakarta</td> </tr>
<tr> <td>5</td> <td>Rio Febrian</td> <td>Pagedangan</td> </tr>
<tr> <td>6</td> <td>Titi Kamal</td> <td>Sumedang</td> </tr>
<tr> <td>7</td> <td>Dian Sastro Wardoyo</td> <td>Cipinang Gading</td> </tr>
<tr> <td>8</td> <td>Nabila Aulia</td> <td>Cilacap</td> </tr>
<tr> <td>9</td> <td>Fachri Ramadhan</td> <td>Ciater</td> </tr>
<tr> <td>10</td> <td>Syaiful Jamil</td> <td>Ciledug</td> </tr>
</tbody>
</table>

Oke sekian dulu ya.
Selamat mencoba.