Nah…sekarang kita akan membuat GRAFIK YANG BERBASIS TABEL….
Kita belajar mulai dari awal ya…!!! ^_^
• Tabel
Pada umumnya, table digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Perpotongan baris dan kolom di dalam table disebut sebagai sel.
Menciptakan Tabel
Pada prinsipnya, pembuatan table sangat sederhana sekali, hanya masalah pengorganisasia. Semua tabel harus diawali dengan tag
| atau table heading yang berfungsi mendefinisikan header.
o Tag |
|---|
| atau table data yang berfungsi mendefinisikan sel
Pemformatan Tabel Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel. Tiga atribut pertama yang sering digunakan adalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk mengatur spasi antara border sel dengan isinya) Desain Tabel Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan) Sekarang kita coba ya source code ini…!!!!!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Grafik Berbasis tabel</title> </head> <body> <blink><font color="Blue" face="arial" size="5">Membuat grafik berbasis tabel 1</font></blink> <table width="561" height="241"> <tr> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td> </tr> <tr > <!-- --> <td width="172" >Angin Reebot Ltd </td> <td width="27"></td> <td width="31"></td> <td width="25"></td> <td width="33"></td> <td width="16"></td> <td width="13"></td> <td colspan="6" bgcolor="#FF0000"></td> <td width="17">+150%</td> </tr> <tr> <td>Command Prompt, Inc </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td colspan="4" bgcolor="purple"></td> <td width="16">+55%</td> <td width="16"></td> <td></td> </tr> <tr> <td>Hibernate Ltd </td> <td></td> <td></td> <td></td> <td>-23%</td> <td colspan="2" bgcolor="#006600"></td> <td width="34"></td> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Shutdown Ltd </td> <td></td> <td>-75%</td> <td colspan="4" bgcolor="#FFFF00"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="14" style="border-top:#000000 solid"></td> </tr> </table> <a href="Link2.html">Klik di sini</a> Untuk mengakses desain tabel perbandingan item berikutnya <hr color="black"></hr> <marquee><font color="Green" face="time new roman" size="2">Oleh:Amanda Rehana Ayudha Tirtani</marquee></font> </body> </html> Simpan dengan judul “Link1.html” Maka tampilannya akan seperti ini : 
Nah…kalo sudah buat yang di atas tadi, sekarang kita buat lagi y…!!! hmmh…ini lebih ke pembuatan tabelnya,,,, dan hasil HTML yang tadi bisa di link kan ke HTML yang akan kita buat sekarang.. Nah..kita coba source code ini y…!!! ^_^ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Grafik Berbasis tabel 2</title> </head> <body> <marquee><font color="Blue" face="Bradley Hand ITC" size="5">Membuat grafik berbasis tabel 2</font></marquee> <table width="470" height="401" border="0"> <tr> <td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4">PERBANDINGAN FITUR</font></td> </tr> <tr> <td width="31"align="center">No</td> <td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td> <td width="208" align="center">Fitur</td> <td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"> </td> <td width="92" align="center">Enterprise</td> <td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td> <td width="0"align="center">Pro</td> <td width="0"align="center">Free</td> </tr> <tr> <td colspan="8" style="border-top:#000000 solid thin;"></td> </tr> <tr> <td align="center">1</td> <td>Garansi seumur hidup </td> <td align="center">X</td> <td align="center">-</td> <td align="center">-</td> </tr> <tr> <td align="center">2</td> <td>Multiuser</td> <td align="center">X</td> <td align="center">-</td> <td align="center">-</td> </tr> <tr> <td align="center">3</td> <td>Update otomatis </td> <td align="center">X</td> <td align="center">X</td> <td align="center">-</td> </tr> <tr> <td align="center">4</td> <td>Cetak Laporan </td> <td align="center">X</td> <td align="center">X</td> <td align="center">-</td> </tr> <tr> <td align="center">5</td> <td>Notifikasi error </td> <td align="center">X</td> <td align="center">X</td> <td align="center">X</td> </tr> <tr> <td colspan="8" style="border-top:#000000 solid thin;"></td> </tr> <tr> <td align="center">6</td> <td>Ubah tema </td> <td align="center">X</td> <td align="center">X</td> <td align="center">X</td> </tr> <tr> <td align="center">7</td> <td>Try ikon</td> <td align="center">X</td> <td align="center">X</td> <td align="center">X</td> </tr> <tr> <td colspan="8" style="border-top:#000000 solid thin;"></td> </tr> </table> <BLINK><font color="#FF0000" face="Calibri" size="3">Oleh:Amanda Rehana Ayudha Tirtani</font></BLINK> <BR><a href="Link1.html">Back</a> kembali ke halaman utama </body> </html> Simpan dengan judul “Link2.html” Maka hasilnya akan seperti ini : 
Ok…kalo sudah, mari kita review....!!! Di source code yang pertama, kita lihat ada code seperti ini : <a href="Link2.html">Klik di sini</a> Untuk mengakses desain tabel perbandingan item berikutnya Tulisan yang berwarna merah, dapat diartikan bahwa bila kita mengklik kata “Klik di sini”, kita akan terhubung dengan “Link2.html” OK………………????????????????? P.S : - warna, tulisan, dan settingan yang lain bisa di utak –atik sendiri y…!!! - Bila ada kesulitan hubungi di my contact SELAMAT MENCOBA….!!!!^_^ 
Langganan:
Posting Komentar (Atom)
|
Tidak ada komentar:
Posting Komentar