Cara Membuat Rainbow Table pada HTML

Rainbow Table cocok untuk digunakan pada tabel yang memiliki banyak data, dan setiap data memiliki field-field yang cukup banyak. Perbedaan warna pada tiap data akan membantu pengguna menemukan data yang dicari. Dari semua tabel yang ada disini, saya kira tabel ini yang paling menarik. Namun, perpaduan warna yang tidak pas justru bisa membuat tabel jadi terlihat norak. Sesuaikan warna dengan warna yang digunakan pada desain web anda.


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

Cara Manual Membuat Rainbow Table pada HTML, Cara 1.

Cara membuat Rainbow Table (tabel warna pelangi alias warna-warni) hampir sama dengan cara membuat tabel Zebra, cukup diganti saja warna tabelnya dengan warna yang diinginkan pada kode warna diantara <tr style="background-color: kode_warna"> .... </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: #cc3333;"> <td>1</td> <td>Aliyah Nabilah</td> <td>Jakarta</td> </tr>
<tr style="background-color: #cccc33;"> <td>2</td> <td>Laudya Cynthia Bella</td> <td>Bandung</td> </tr>
<tr style="background-color: #33cc33;"> <td>3</td> <td>Muhammad Arif</td> <td>Alam Sutra</td> </tr>
<tr style="background-color: #3333cc;"> <td>4</td> <td>Jihan Fahira</td> <td>Jakarta</td> </tr>
<tr style="background-color: #cc3333;"> <td>5</td> <td>Rio Febrian</td> <td>Pagedangan</td> </tr>
<tr style="background-color: #cccc33;"> <td>6</td> <td>Titi Kamal</td> <td>Sumedang</td> </tr>
<tr style="background-color: #33cc33;"> <td>7</td> <td>Dian Sastro Wardoyo</td> <td>Cipinang Gading</td> </tr>
<tr style="background-color: #cc3333;"> <td>8</td> <td>Nabila Aulia</td> <td>Cilacap</td> </tr>
<tr style="background-color: #cccc33;"> <td>9</td> <td>Fachri Ramadhan</td> <td>Ciater</td> </tr>
<tr style="background-color: #33cc33;"> <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 Rainbow 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 Rainbow Table in index1.html */
.rainbow-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 3px 1px #ddd;
overflow: hidden;
border:10px solid #fff;
}
.rainbow-table th,.rainbow-table td{
vertical-align: top;
padding:10px 7px;
text-align: left;
margin:0;
}
.rainbow-table tbody {
color: #fff;
}
/* Make table like rainbow */
.rainbow-table tbody tr:nth-child(4n+1) { /* 4n is 4 colours */
background:#cc3333; /* red */
}
.rainbow-table tbody tr:nth-child(4n+2) {
background:#cccc33; /* yellow */
}
.rainbow-table tbody tr:nth-child(4n+3) {
background:#33cc33; /* green */
}
.rainbow-table tbody tr:nth-child(4n+4) {
background:#3333cc; /* blue */
}/* End CSS for Rainbow Table in index1.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 Rainbow Table (tabel warna-warni) 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=”rainbow-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.