Kamis, April 30, 2009

Belajar Bikin Tabel





kolom 1 dari baris 1

Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag yang menandai sebuah tabel, tag yang membentuk baris dan tag sampai . Sorot (blok) dari tag hingga lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag lalu Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya:

yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.
Untuk lebih jelasnya berikut contohnya :

Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1.
Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.





kolom 1 dari baris 1


Semain besar nilai BORDER ( Bingkai ) yang di masukkan otomatis semakin besar juga Bingkai tabel yang di tampilkan seperti contoh berikut :





kolom 1 dari baris 1


Nah Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Seperti contoh berikut:






kolom 1 dari baris 1kolom 2 dari baris 1


Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag









kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2


Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2


Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2


Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2


Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya:










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2



Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom.










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2


Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:










kolom 1 dari baris 1kolom 2 dari baris 1
kolom 1 dari baris 2kolom 2 dari baris 2

Tidak ada komentar: