MEMBUAT TABELSetiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuahtabel, tag <TR> yang membentukbarisdan tag <TD> yang membentukkolom. 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 darisatu barisdansatu kolomyang diisi dengan tulisan:kolom 1 dari baris 1. kolom 1 dari baris 1Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secaradefault, 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:kolom 1 dari baris 1Silakan 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 1kolom 2 dari baris 1Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag <TR>hingga </TR> laluCopy(Ctrl+C). Tempatkan kursor di bawah tag </TR> laluPaste(Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintahPaste). 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 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel danCELLPADDING 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:kolom 1 dari baris 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Sekarang 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:kolom 1 dari baris 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Sedangkan 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:kolom 1 dari baris 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secaradefault, 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% ?kolom 1 dari baris 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Kesimpulannya, 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 samasaja, 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?kolom 1 dari baris 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Bagaimana 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 1kolom 2 dari baris 1kolom 1 dari baris 2kolom 2 dari baris 2Sekarang kita akan berbicara lagi masalah perataan (alignment) tulisan. Lihat contoh tabel di atas! Tampak bahwa secaradefault, 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 ataskanan tengahkanan bawahtengah tengahPembicaraan tentang tabel ini, belum selesai. Akan kita lanjutkan pada halaman berikutnya. [Tutorial Html] [Wap Master][HOME] [PREV] [NEXT] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]by ndies 2008Copy Left & PasteSome Rights Reserved A1
KembaliBerikutnya
