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, portfolio kunjungi https://www.instagram.com/alfaruqmedia/ |
0 comments:
Post a Comment