Select Language



Followers

IT Programmer. Powered by Blogger.

16 February 2012

Cara Membuat Tabel Zebra dengan PHP dan CSS

"Om Swastyastu"

tabel zebra
Tabel zebra mungkin agak asing terdengar di telinga kalian. tabel zebra berfungsi untuk mempercantik tampilan tabel kalian jika memprogram menggunakan PHP atau HTML, seperti namanya tabel zebra ini akan menampilkan warna seperti zebra (belang) tapi tidak hanya hitam putih seperti zebra pada umumnya. Kalian juga bisa menggunakan warna sesuai keinginan kalian, merah putih mungkin atau pola yang lebih cantik sesuai imajinasi.

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"



Comments:

Ada 1
Unknown said...
pada hari 

nice kk ^^
daripada pake jquery...
mending yang biasa" aja...
hahaha
salam kenal ^^

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!