Tabel Data Scrool |
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 :
<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>Keterangan :
<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>
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;">Dari percobaan di atas dapat kita lihat hasilnya seperti ini :
<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>
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...
Lihat Juga :
Jangan asal copy paste, baca aturanya
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