Tabel
Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag
<TABLE> yang menandai sebuah tabel,
tag <TR> yang membentuk baris
dan tag <TD> yang membentuk kolom.
Masing-masing tag tersebut harus memiliki tag penutup.
<TABLE>
<TR>
<TD>kolom 1 dari baris
1</TD>
</TR>
</TABLE>
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.
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.
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris
1</TD>
</TR>
</TABLE>
Sehingga tabelnya tampak sebagai berikut:
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.
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
</TABLE>
Beginilah hasilnya dalam browser:
|
kolom 1 dari baris 1
|
kolom
2 dari baris 1
|
Nah, bila anda ingin menambah sekian baris ke bawah, cukup
menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag
<TR> hingga </TR> lalu Copy
(Ctrl+C). Tempatkan kursor di bawah
tag </TR> 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:
<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris
2</TD>
<TD>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Tampilannya dalam browser menjadi:
|
kolom 1 dari baris 1
 kolom
2 dari baris 1 |
|
|
|
kolom 1 dari baris 2
|
kolom
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:
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris
2</TD>
<TD>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE
berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel.
Beginilah tampilannya dalam browser:
Sekarang mari kita coba bandingkan bila atribut CELLSPACING
tersebut diganti dengan CELLPADDING.
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris
2</TD>
<TD>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Beginilah hasilnya dalam browser:
Sedangkan kalau kedua tag tersebut dipakai bersama-sama
seperti ini:
<TABLE BORDER=1 CELLSPACING=10
CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris
2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>
Akan menghasilkan tabel seperti ini:
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:
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>kolom 1 dari baris
1</TD>
<TD>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris
2</TD>
<TD>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Bagaimana jadinya tabel dengan lebar 100% ?
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.
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris
1</TD>
<TD WIDTH=75%>kolom 2 dari baris
1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris
2</TD>
<TD WIDTH=75%>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Bagaimana jadinya?
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:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150>kolom 1 dari baris
1</TD>
<TD WIDTH=250>kolom 2 dari baris
1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150>kolom 1 dari baris
2</TD>
<TD WIDTH=250>kolom 2 dari baris
2</TD>
</TR>
</TABLE>
Ukuran border tabel kita ubah menjadi 7. Tinggi baris
pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama
adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut
di atas, menghasilkan tampilan tabel dalam browser menjadi:
|
kolom 1 dari baris 1
|
kolom 2
dari baris 1
|
|
|
kolom 1 dari baris 2
|
kolom 2
dari baris 2
|
Sekarang
kita akan berbicara lagi masalah perataan (alignment)
tulisan. Lihat contoh tabel di atas! Tampak bahwa secara default, tabel menempatkan tulisan rata kiri (secara horisontal)
dan di tengah (secara vertikal). Namun demikian, kita bisa mengatur sendiri
perataan ini dengan menggunakan atribut ALIGN untuk perataan horisontal dan
VALIGN untuk perataan vertikal. Perhatikan penggunaannya:
<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150 ALIGN=left
VALIGN=top>kiri atas</TD>
<TD WIDTH=250 ALIGN=right
VALIGN=middle>kanan tengah</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150 ALIGN=right
VALIGN=bottom>kanan bawah</TD> <TD WIDTH=250 ALIGN=center
VALIGN=middle>tengah tengah</TD>
</TR>
</TABLE>
Beginilah hasilnya bila ditampilkan dalam browser:
|
kiri
atas
|
kanan tengah
|
|
|
kanan bawah
|
tengah tengah
|
Tidak ada komentar:
Posting Komentar