Jumat, 11 Februari 2011

Membuat Tabel Data/Harga Dengan Fungsi Scrool

Tabel Data Scrool
Membuat Tabel Data/Harga Dengan Fungsi Scrool. Hallo sobat informasi maya selamat pagi! masih ingatkan dengan postingan kang salman dulu "Membuat Tabel Scrool"? Nah pada kesempatan hari ini kang salman akan mengulas sebuah panduan bagaimana membuat tabel data penjualan dengan fungsi scrool. Ide ini muncul setelah banyak yang bertanya kepada saya mengenai trik ini. tabel data scrool ini bisa kita gunakan untuk membuat data penjualan yang rapih dan apik, selain itu dapat kita gunakan sebagai data tugas, dan masih banyak lagi manfaatnya. Oke biar ga panjang Langsung saja anda lihat contoh yang kang salman buat di bawah ini:  


Daftar Harga Produk
Kode BarangNama BarangHarga (Unit)
ADigital Camera1.200.000
BHadycam3.600.000
CMp3 260.000
DFlash Disk 4Gb120.000
EDVD Player460.000
FMemory DDR 2 1 Gb290.000
GHard Disk 120 GB380.000
FModem Aha499.000
HSpeker Simbada Seri X650.000
ILG Monitor 17'720.000
JLG LCD 15'1.200.00
KPower Sumply 500W390.000
LMouse Optik90.000
MPrinter890.000
NStabilizer150.000
OAccesoris90.000
P--
Q--
Lain-lainLain-lainLain-lain

Jika Jumah produk yang kita jual di website / blog kita banyak seperti ini atau lebih banyak dari ini tentu akan menghabiskan ruang di situs kita, oleh karena itu di butuhkan tebal scrool untuk membuat nya menjadi flexsibel dan menghemat ruang.

berikut kode yang kita butuhkan :
Langkah pertama :
  • Masukan ke postingan, kemudian klik edit HTML
  • Masukan kode srool terlebih dahulu : 
<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:460px; height:350px; overflow:auto; color:#FFF;">
<p>
MASUKAN DATA
</p>
</div>

*Kemudian masukkan "data apapun yang ingin diletakkan" diantara <p> dan </p>.

Keterangan  :
-  width:350px; adalah lebar dari scroll yang kita buat, anda bisa mengubahnya sesuai kebutuhan.
-  heaight:250px; adalah ketingian dari scrool itu sendiri

Dan ini adalah kode tabel kang salman buat di atas, kode ini nanti akan kita masukan ke dalam scrool :
<table border="1" style="width: 460px;"><tbody>
<tr><td align="center"><b>Kode Barang</b></td><td align="center"><b>Nama Barang</b></td><td align="center"><b>Harga (Unit)</b></td></tr>
<tr align="center"><td>A</td><td>Digital Camera</td><td>1.200.000</td></tr>
<tr align="center"><td>B</td><td>Hadycam</td><td>3.600.000</td></tr>
<tr align="center"><td>C</td><td>Mp3 </td><td>260.000</td></tr>
<tr align="center"><td>D</td><td>Flash Disk 4Gb</td><td>120.000</td></tr>
<tr align="center"><td>E</td><td>DVD Player</td><td>460.000</td></tr>
<tr align="center"><td>F</td><td>Memory DDR 2 1 Gb</td><td>290.000</td></tr>
<tr align="center"><td>G</td><td>Hard Disk 120 GB</td><td>380.000</td></tr>
<tr align="center"><td>F</td><td>Modem Aha</td><td>499.000</td></tr>
<tr align="center"><td>H</td><td>Speker Simbada Seri X</td><td>650.000</td></tr>
<tr align="center"><td>I</td><td>LG Monitor 17'</td><td>720.000</td></tr>
<tr align="center"><td>J</td><td>LG LCD 15'</td><td>1.200.00</td></tr>
<tr align="center"><td>K</td><td>Power Sumply 500W</td><td>390.000</td></tr>
<tr align="center"><td>L</td><td>Mouse Optik</td><td>90.000</td></tr>
<tr align="center"><td>M</td><td>Printer</td><td>890.000</td></tr>
<tr align="center"><td>N</td><td>Stabilizer</td><td>150.000</td></tr>
<tr align="center"><td>O</td><td>Accesoris</td><td>90.000</td></tr>
<tr align="center"><td>P</td><td>
-</td><td>-</td></tr>
<tr align="center"><td>Q</td><td>-</td><td>-</td></tr>
<tr align="center"><td>Lain-lain</td><td>Lain-lain</td><td>Lain-lain</td></tr>
</tbody></table>
Keterangan :
perhatikan angka 460 yang saya beri warna hijau di atas..., itu adalah lebar tabel dari ujung ke ujung. anda bisa mengubahnya sesuai keperluan dan kebutuhan.


Oke selanjutnya untuk membuat tebel data ini memiliki fungsi scrool silakan anda gabungkan kode sroool yang merah di atas dengan kode tabel. caranya..... dengan menaruh kode tabel di antara selah-selah kode merah dia atas... <p>kode tabel / data produk</p>

Maka hasilnya ... : 
<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;">
<p>
<table border="1" style="width: 550px;"><tbody>
<tr><td align="center"><b>Kode Barang</b></td><td align="center"><b>Nama Barang</b></td><td align="center"><b>Harga (Unit)</b></td></tr>
<tr align="center"><td>A</td><td>Digital Camera</td><td>1.200.000</td></tr>
<tr align="center"><td>B</td><td>Hadycam</td><td>3.600.000</td></tr>
<tr align="center"><td>C</td><td>Mp3 </td><td>260.000</td></tr>
<tr align="center"><td>D</td><td>Flash Disk 4Gb</td><td>120.000</td></tr>
<tr align="center"><td>E</td><td>DVD Player</td><td>460.000</td></tr>
<tr align="center"><td>F</td><td>Memory DDR 2 1 Gb</td><td>290.000</td></tr>
<tr align="center"><td>G</td><td>Hard Disk 120 GB</td><td>380.000</td></tr>
<tr align="center"><td>F</td><td>Modem Aha</td><td>499.000</td></tr>
<tr align="center"><td>H</td><td>Speker Simbada Seri X</td><td>650.000</td></tr>
<tr align="center"><td>I</td><td>LG Monitor 17'</td><td>720.000</td></tr>
<tr align="center"><td>J</td><td>LG LCD 15'</td><td>1.200.00</td></tr>
<tr align="center"><td>K</td><td>Power Sumply 500W</td><td>390.000</td></tr>
<tr align="center"><td>Lain-lain</td><td>Lain-lain</td><td>Lain-lain</td></tr>
</tbody></table>
</p>
</div>
 Dari percobaan di atas dapat kita lihat hasilnya seperti ini :

Kode BarangNama BarangHarga (Unit)
ADigital Camera1.200.000
BHadycam3.600.000
CMp3 260.000
DFlash Disk 4Gb120.000
EDVD Player460.000
FMemory DDR 2 1 Gb290.000
GHard Disk 120 GB380.000
FModem Aha499.000
HSpeker Simbada Seri X650.000
ILG Monitor 17'720.000
JLG LCD 15'1.200.00
KPower Sumply 500W390.000
LMouse Optik90.000
MPrinter890.000
NStabilizer150.000
OAccesoris90.000
P--
Q--
Lain-lainLain-lainLain-lain

Nah bagaimaa? mudah bukan?Kode tabel ini masih dasar..
jika anda tertarik untuk mendalaminya silakan contact us Insya Allah saya bantu.
Oke kang salman cukupkan sekian dulu ya mudah. mudahan tips ini bermanfaat
Assalamualaikum...

Lihat Juga :

Jangan asal copy paste, baca aturanya di sini !
Post By Kang Salman
http://asksalman19.blogspot.com


Ingin mendapat penghasilan tambahan dari blog? Bergabung dan jadikan blog anda sebagai ladang uang bagi dompet anda setiap bulan. Cukup pasang banner saja! Daftar =>  Klik Disini <= klik!  untuk memanen uang $ seperti saya. Gratis!!
Dapatkan update artikel  terbaru kami langsung ke email anda.  

0 komentar:

Posting Komentar

give your comment here, please do not spam

 
My Big Dream powered by XXZ