"Om Swastyastu"
Cara pembuatan tabel zebra ini sangat gampang yang terpenting kalian sudah mengetahui dasar pemrograman HTML dan tentang CSS. Oke, langsung saja ke cara pembuatannya.
Pertama, siapkan editor kalian (Dreamweaver, Notepad++, Editplus, dll)
Kedua, siapkan server localhost kalian karena nantinya kita akan menggunakan file PHP. Kalau saya menggunakan XAMPP (cara menggunakan dan download disini).
Ketiga, buat folder baru di htdocs.
Sudah siapkah??
kalau sudah mari kita membuat coding CSSnya terlebih dahulu. Ketik script CSS di bawah ini di editor kesayangan kalian :
/*CSS Tabel Zebra */
#zebra {
width:25%;
font: 11px Arial Helvetica, sans-serif;
color: #000;
border-collapse: collapse;
border-spacing: 0;
}
#zebra th {
color: #fff;
background-color:#555;
font-size:15px;
padding:2px 0;
}
#zebra td {
font-size: 12px;
text-align: center;
padding: 2px 0;
background-color: #FFFF99;
}
#zebra tr:nth-child(odd) td
{
background-color: #CCE9FD;
} /* table */
Simpan dengan nama Style.css di folder yang telah dibuat tadi. Untuk kombinasi warna yang lain, kalian bisa pilih warnanya di Daftar Kode Warna Lengkap.Selanjutnya membuat file PHP dan tabelnya. berikut scriptnya :
<html> <head> <title>tabel zebra IT Programmer</title> </head> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <body> <table id="zebra" align="center"> <tr> <th>Judul Tabel Disini</th> </tr> <tr> <td><p align="center">Baris 1</p></td> </tr> <tr> <td><p align="center">Baris 2</p></td> </tr> <tr> <td><p align="center">Baris 3</p></td> </tr> <tr> <td><p align="center">Baris 4</p></td> </tr> </table> </body> </html>Simpan dengan nama index.php. Namun script di atas masih murni HTML, coba bayangkan jika kita membuat tabel dengan 1000 baris, tentunya akan sangat melelahkan bukan?? Untuk mengatasinya kalian bisa menggunakan perulangan "for" dengan PHP. Berikut scriptnya :
<html>
<head>
<title>tabel zebra IT Programmer</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<body>
<table id="zebra" align="center">
<tr> <th>Judul Tabel</th> </tr>
<?php
$i=0;
$jmlh_brs=4;
for($i = 1; $i <= $jmlh_brs; $i++){ ?>
<tr> <td><p align="center">Baris <?php echo $i;?> </p></td> </tr>
<?php }
?>
</table>
</body>
</html>
keterangan:$jmlh_brs=4; adalah jumlah baris yang akan di tampilkan.file css yang telah dibuat tadi di panggil menggunakan script :
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />Untuk melihat hasilnya gunakan browser (Mozilla, Chrome, IE, dll) dan ketikan
http://localhost/namafolder.
Gimana sangat mudah bukan?? Selamat mencoba Semoga bermanfaat :)
"Om Santhi, Santhi, Santhi Om"
nice kk ^^
daripada pake jquery...
mending yang biasa" aja...
hahaha
salam kenal ^^