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 Barang	Nama Barang	Harga (Unit)
A	Digital Camera	1.200.000
B	Hadycam	3.600.000
C	Mp3	260.000
D	Flash Disk 4Gb	120.000
E	DVD Player	460.000
F	Memory DDR 2 1 Gb	290.000
G	Hard Disk 120 GB	380.000
F	Modem Aha	499.000
H	Speker Simbada Seri X	650.000
I	LG Monitor 17'	720.000
J	LG LCD 15'	1.200.00
K	Power Sumply 500W	390.000
L	Mouse Optik	90.000
M	Printer	890.000
N	Stabilizer	150.000
O	Accesoris	90.000
P	-	-
Q	-	-
Lain-lain	Lain-lain	Lain-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 Barang	Nama Barang	Harga (Unit)
A	Digital Camera	1.200.000
B	Hadycam	3.600.000
C	Mp3	260.000
D	Flash Disk 4Gb	120.000
E	DVD Player	460.000
F	Memory DDR 2 1 Gb	290.000
G	Hard Disk 120 GB	380.000
F	Modem Aha	499.000
H	Speker Simbada Seri X	650.000
I	LG Monitor 17'	720.000
J	LG LCD 15'	1.200.00
K	Power Sumply 500W	390.000
L	Mouse Optik	90.000
M	Printer	890.000
N	Stabilizer	150.000
O	Accesoris	90.000
P	-	-
Q	-	-
Lain-lain	Lain-lain	Lain-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...

Cara Membuat Tabel Data Scrool

Lihat Juga :

• Membuat Tabel Scrool

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.