Troubleshooting Windows

[Windows][bsummary]

SEO

[SEO][twocolumns]

Tips & Trick

[Tips and Trick][bigposts]

Cara membuat tabel cantik warna warni dan efek hover

Untuk membuat tabel warna warni dan efek hover itu sangat mudah. Efek ini akan membuat tampilan halaman laporan anda sangat indah dan cantik. Langkah pertama buatlah database seperti dibawah ini:
kdbarang : varchar (15) primary key
nmbarang : varchar (35)
jnbarang : varchar (35)
tglmasuk : date
suplier : varchar (35)

struktur database seperti gambar dibawah ini:

Setelah itu buat file php untuk menampilkan data diatas, copy paste kode dibawah ini lalu simpan dengan nama tampilData.php lalu simpan di localhost:

<center>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
th.judul {
width:auto;
}
td.data {
width:auto;
}
tr.data:hover {
background:#FF3
}
</style>
<title>Sistem Informasi Gudang</title>
</head>
<body>
<h1><b>Sistem Informasi Gudang</b></h1>
<table border="1" cellspacing="1" class="judul" class="data" bordercolor="#000000">
<th>No</th>
<th class="judul">Kode Barang</th>
<th class="judul">Nama Barang</th>
<th class="judul">jenis Barang</th>
<th class="judul">Tgl Masuk</th>
<th class="judul">Suplier</th>
<?
//koneksi ke dataase
$koneksi = mysql_connect("localhost","root","") or die ("Jaringan ke server putus");

//memilih database
mysql_select_db("dbgudang", $koneksi);

//query dari isi tabel
$isitabel = mysql_query("select * from tbgudang");

 $warna1 = "#FFFFFF"; // baris genap berwarna putih
          $warna2 = "#CCFFFF"; // baris ganjil berwarna cyan muda 
          $warna  = $warna1; // warna default 
 $no = 1;
//menampilkan data ke browser
  while ($cetak=mysql_fetch_array($isitabel)){ 
  
   if($warna == $warna1){ 
            $warna = $warna2; 
            } 
            else { 
            $warna = $warna1; 
}
            echo "<tr bgcolor='$warna' class='data'>
     <td>$no</td>
                  <td class='data'>$cetak[kdbarang]</td> 
                  <td class='data'>$cetak[nmbarang]</td> 
                  <td class='data'>$cetak[jnbarang]</td> 
 <td class='data'>$cetak[tglmasuk]</td> 
                  <td class='data'>$cetak[suplier]</td> 
                  </tr>"; 
        $no++;
          }
?>
</table>
</body>
</html>
</center>

Dan hasilnya seperti gambar dibawah ini:




No comments:

Post a Comment