Pages

Friday 17 October 2014

Membuat Tabel Zebra dengan CSS

Tabel biasa digunakan ketika menampilkan data-data dari database. Ketika data yang ditampilkan berjumlah banyak, dan kolom pun juga berjumlah banyak, pembaca akan sedikit kesulitan membaca sebaris data yang diinginkan. Karena semua baris data sama warnanya sehingga tampak sulit meluruskan kolom paling kiri dengan kolom di kanannya. Dengan tabel zebra akan mengatasi masalah ini.
Langsung saja ke tutorialnya.

Pertama, siapkan tabel dan data yang akan ditampilkan. Misal tabel dengan script di bawah ini.

<html>
<head>
<title>Tabel Zebra dengan CSS</title>
</head>

<body>
<table border="1" cellpadding="5" width="400">
<tr>
<th>Nama Lengkap</th>
<th>Nama Panggilan</th>
<th>Tempat Lahir</th>
<th>Tanggal Lahir</th>
<th>Alamat</th>
<th>Hobi</th>
</tr>
<tr>
<td>M. Syaifullah Alfaruq</td>
<td>Faruq</td>
<td>Bantul</td>
<td>29 Juni 1996</td>
<td>Sewon, Bantul</td>
<td>Cycling</td>
</tr>
<tr>
<td>M. Fakhri Z. A.</td>
<td>Fakhri</td>
<td>Bantul</td>
<td>1 Januari 1999</td>
<td>Banguntapan, Bantul</td>
<td>Futsal</td>
</tr>
<tr>
<td>Fatimah Az-zahra</td>
<td>Fatimah</td>
<td>Bantul</td>
<td>12 Juni 2001</td>
<td>Pandak, Bantul</td>
<td>Membaca</td>
</tr>
<tr>
<td>Ahmad Syahid Fat-Huddin</td>
<td>Syahid</td>
<td>Bantul</td>
<td>25 Agustus 2003</td>
<td>Srandakan, Bantul</td>
<td>Futsal</td>
</tr>
<tr>
<td>Tsabita Fathiya Ghaida</td>
<td>Bita</td>
<td>Bantul</td>
<td>10 Oktober 2010</td>
<td>Sanden, Bantul</td>
<td>Menggambar</td>
</tr>
<tr>
<td>Tahmid Rahmad Ramadhan</td>
<td>Adhan</td>
<td>Bantul</td>
<td>18 Agustus 2012</td>
<td>Imogiri, Bantul</td>
<td>Lari</td>
</tr>
</table>
</body>
</html>

akan tampil tabel seperti berikut.

Nama Lengkap Nama Panggilan Tempat Lahir Tanggal Lahir Alamat Hobi
M. Syaifullah Alfaruq Faruq Bantul 29 Juni 1996 Sewon, Bantul Cycling
M. Fakhri Z. A. Fakhri Bantul 1 Januari 1999 Banguntapan, Bantul Futsal
Fatimah Az-zahra Fatimah Bantul 12 Juni 2001 Pandak, Bantul Membaca
Ahmad Syahid Fat-Huddin Syahid Bantul 25 Agustus 2003 Srandakan, Bantul Futsal
Tsabita Fathiya Ghaida Bita Bantul 10 Oktober 2010 Sanden, Bantul Menggambar
Tahmid Rahmad Ramadhan Adhan Bantul 18 Agustus 2012 Imogiri, Bantul Lari

Sekarang kita modifikasi tabel tersebut dengan warna selang-seling / tabel zebra. Tambahkan tag style di dalam tag head.

<head>
<title>Tabel Zebra dengan CSS</title>
<style>

</style>
</head>

Kita akan mengganti warna background baris ganjil dengan warna hijau. Ketikkan script seperti di bawah ini.

<style>
table tr:nth-child(odd) {background:#30b726;}
</style>

table tr adalah selector dimana dalam halaman tersebut yang dieksekusi adalah tr(baris) di dalam tag table.
nth-child(odd) berarti hanya baris ganjil (odd) saja yang dieksekusi dengan warna background #30b726.



Tabel telah berubah menjadi tabel zebra dengan warna baris yang selang-seling. Sekian tutorial saya mengenai tabel zebra dengan CSS kali ini. Semoga bermanfaat :)

untuk pengaturan dasar tabel Anda dapat membaca di link ini http://alfaruqdeveloper.blogspot.com/2014/09/tutorial-css-mengatur-fornat-tabel.html

Jasa desain grafis jogja, desain banner murah, desain poster, desain brosur, desain kartu nama, bikin poster ilmiah
Jasa Desain Grafis Jogja, portfolio kunjungi https://www.instagram.com/alfaruqmedia/

0 comments:

Post a Comment