TUTORIAL UNTUK PEMULA DN MASTER.
OK, sebelum belajar siapkan sesajennya biar gak pusing = kopi atau susu dingi atau panas boleh dan makanan ringan.
SELAMAT BELAJAR.
|
Tau nggak, |
ini namanya apa ? |
|
Kasian deh elo, |
kalau nggak tau namanya. |
|
Ini namanya tabel lagi ! :p |
|
Hah yang kayak begitu
dibilang tabel ?!? Hayoo pengen komplain ya ... :)
Itu memang tabel, cuman mungkin anda tidak merasakannya. Jawabannya karena satu
hal, batas tiap kotak/sel (atau disebut border) enggak ditampilin. Mangkanya
banyak hompej-hompej keren yang sebenarnya layoutnya 'cuman' pake tabel, tapi
karena bordernya nggak ditampilin, yang ngeliat nggak ngerasa kalau itu pake
tabel deh - seperti tabel di atas.
Nah tabel yang persis kayak di atas tadi, kalau ditampilin pakai border akan
jadi kayak begini.
|
Tau nggak, |
ini namanya apa ? |
|
Kasian deh elo, |
kalau nggak tau namanya. |
|
Ini namanya tabel lagi ! :p |
|
Untuk membuat tabel, tag yang digunakan minimal ada tiga, <TABLE>, <TR> dan <TD>. OK, saya contohkan tabel yang paling sederhana, yang hanya terdiri dari satu sel (satu kotak). Perhatikan contoh berikut:
<TABLE>
<TR>
<TD>Isi Tabel</TD>
</TR>
</TABLE>
Tabel di atas akan memberikan hasil seperti ini
.
|
Isi Tabel |
Masih belum seperti tabel ya ... tapi percayalah itu adalah tabel. Trust me, I know what I'm doing. Keterangan perintah di atas kira-kira seperti ini:
- <TABLE>: Tag ini menyuruh membuat tabel.
- <TR>: Nah kalau tag yang ini nyuruh bikin baris.
- <TD>: Terakhir tag yang ini, nyuruh bikin kolom.
Jadi urutannya seperti di atas bikin tabel, terus bikin baris, dan terakhir bikin kolom. Kita dapat menambah isi tabel tersebut, misalnya menjadi 2 baris dan 3 kolom dengan perintah berikut:
<TABLE>
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Hasil tabel di atas akan terlihat seperti ini.
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Oops saya lupa. Di atas memang kita sudah berhasil membuat tabel 2 baris 3 kolom. Tapi tanpa adanya border rasanya tabel di atas agak sulit dicerna. Berikut ini tabel di atas saya modifikasi dengan perintah border (Dari tabel di atas kita dapat menarik kesimpulan bahwa default adalah BORDER="0", artinya jika tidak ditulis harga tersebutlah yang berlaku).
<TABLE BORDER="1">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Hasilnya akan menjadi seperti ini:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Kita dapat mengubah ukuran border dengan bebas. Sebagai contoh jika menggunakan BORDER="5", maka hasilnya akan menjadi:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Dan jika menggunakan BORDER="20" hasilnya akan seperti ini:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Selain border, ada 4 atribut lainnya pada tag <TABLE> yang sering digunakan, yaitu CELLSPACING, CELLPADDING, WIDTH dan HEIGHT. Kita bahas satu-persatu.
CELLSPACING mengatur jarak antar sel. Sebagai contoh, tabel di atas kita modifikasi menggunakan CELLSPACING="10" sebagai berikut. Sebagai informasi, default untuk CELLSPACING adalah CELLSPACING="2".
<TABLE BORDER="1" CELLSPACING="10">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Maka hasilnya adalah sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Dan jika menggunakan CELLSPACING="20", maka jarak antar sel akan semakin besar, seperti pada tabel berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Sedang CELLPADDING akan menentukan jarak antara isi sel dengan bordernya. Sebagai contoh jika tabel dengan BORDER="1" menggunakan CELLPADDING="10" seperti kode berikut ini. O, ya default nilai CELLPADDING adalah CELLPADDING="1".
<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Maka akan diperoleh hasil sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Menambah harga CELLPADDING menjadi CELLPADDING="20" akan makin memperbesar ukuran sel (menambah jarak dari sel ke border) seperti pada tabel di bawah ini:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Atribut terakhir pada tag <TABLE> yang akan kita bahas adalah WIDTH. Atribut ini akan menentukan lebar tabel. Sebagai contoh pada tabel di bawah, kita set harga WIDTH="400":
<TABLE BORDER="1" WIDTH="400">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Maka hasilnya adalah sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Jika juga dapat mengubah harga WIDTH menjadi WIDTH="500" yang tentu akan memperlebar ukuran tabel, seperti contoh berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Lebar tabel tidak hanya didefinisikan dengan harga yang fix seperti di atas, tetapi bisa juga didefinisikan dengan persentasi dari lebar window. Sebagai contoh, jika digunakan WIDTH="75%" akan diperoleh tabel sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Dan jika digunakan WIDTH="100%" akan kita peroleh tabel berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Apabila anda memperkecil ukuran window anda, maka akan anda lihat lebar tabel akan berubah jika kita mendefinisikan dalam persen. Namun lebar tabel akan tetap jika didefinisikan dalam harga mutlak.
Atribut HEIGHT mirip dengan WIDTH, hanya HEIGHT mendefinisikan tinggi tabel. Sebagai contoh tinggi tabel di atas kita ubah menjadi HEIGHT="100". Maka kode kita menjadi:
<TABLE BORDER="1" HEIGHT="100">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
<TD>Baris 2 Kolom 3</TD>
</TR>
</TABLE>
Hasilnya adalah sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
Kini kita akan membicarakan atribut dalam tag <TR> dan <TD>. Atribut yang pertama kita bicarakan adalah ALIGN dan VALIGN. Atribut ALIGN mempunyai tiga harga, "left", "center" dan "right", yang berarti rata kiri, di tengah, dan rata kanan. Sedang VALIGN juga mempunyai tiga harga, "top", "middle" dan "bottom", yang berarti di atas, di tengah dan di bawah. Sebagai contoh adalah tabel berikut ini. Anda dapat melihat bahwa tiap sel memiliki harga ALIGN dan VALIGN yang berbeda-beda, sehingga posisinya akan berbeda-beda juga. Pada baris pertama dan baris kedua, harga ALIGN dan VALIGN diset untuk setiap sel (pada tag <TD>), sedang pada baris ketiga dan keempat harga ALIGN dan VALIGN diset untuk setiap baris (pada tag <TR>).
Sebagai catatan, atribut ALIGN dan VALIGN tidak dapat digunakan bersamaan dengan atribut CELLPADDING. Karena penggunaan atribut CELLPADDING otomatis akan menyebabkan isi sel berada di tengah. Default untuk ALIGN dan VALIGN adalah ALIGN="left" dan VALIGN="middle"
<TABLE BORDER="5"
WIDTH="500" HEIGHT="200">
<TR>
<TD ALIGN="left"
VALIGN="top">Baris 1 Kolom 1</TD>
<TD ALIGN="center"
VALIGN="middle">Baris 1 Kolom 2</TD>
<TD ALIGN="right"
VALIGN="bottom">Baris 1 Kolom 3</TD>
</TR>
<TR>
<TD ALIGN="left"
VALIGN="bottom">Baris 2 Kolom 1</TD>
<TD ALIGN="center"
VALIGN="top">Baris 2 Kolom 2</TD>
<TD ALIGN="right"
VALIGN="middle">Baris 2 Kolom 3</TD>
</TR>
<TR ALIGN="left"
VALIGN="top">
<TD>Baris 3 Kolom 1</TD>
<TD>Baris 3 Kolom 2</TD>
<TD>Baris 3 Kolom 3</TD>
</TR>
<TR ALIGN="right"
VALIGN="bottom">
<TD>Baris 4 Kolom 1</TD>
<TD>Baris 4 Kolom 2</TD>
<TD>Baris 4 Kolom 3</TD>
</TR>
</TABLE>
Hasilnya adalah sebagai berikut:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Baris 2 Kolom 3 |
|
Baris 3 Kolom 1 |
Baris 3 Kolom 2 |
Baris 3 Kolom 3 |
|
Baris 4 Kolom 1 |
Baris 4 Kolom 2 |
Baris 4 Kolom 3 |
Kini kita akan membicarakan beberapa atribut pada tag <TD>, yaitu COLSPAN dan ROWSPAN. Kita mulai dari COLSPAN. Atribut COLSPAN ini digunakan untuk menggabung beberapa kolom. Harga yang diisi adalah jumlah kolom yang bergabung. Sebagai contoh anda dapat melihat kode HTML berikut:
<TABLE BORDER="5">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD>Baris 1 Kolom 3</TD>
<TD>Baris 1 Kolom 4</TD>
<TD>Baris 1 Kolom 5</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD COLSPAN="3">Kolom 2, 3 dan 4
bergabung</TD>
<TD>Baris 2 Kolom 5</TD>
</TR>
</TABLE>
Hasil dari kode di atas adalah:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 Kolom 3 |
Baris 1 Kolom 4 |
Baris 1 Kolom 5 |
|
Baris 2 Kolom 1 |
Kolom 2, 3 dan 4 bergabung |
Baris 2 Kolom 3 |
||
Atribut ROWSPAN mirip dengan atribut COLSPAN, hanya di sini yang bergabung adalah baris. Contoh penerapannya adalah sebagai berikut:
<TABLE BORDER="5">
<TR>
<TD>Baris 1 Kolom 1</TD>
<TD>Baris 1 Kolom 2</TD>
<TD ROWSPAN="2">Baris 1 dan 2
bergabung.</TD>
</TR>
<TR>
<TD>Baris 2 Kolom 1</TD>
<TD>Baris 2 Kolom 2</TD>
</TR>
</TABLE>
Hasil dari kode di atas adalah:
|
Baris 1 Kolom 1 |
Baris 1 Kolom 2 |
Baris 1 dan 2 bergabung. |
|
Baris 2 Kolom 1 |
Baris 2 Kolom 2 |
Demikian beberapa hal penting dalam pembuatan tabel. Namun karena perintah tabel ternyata masih banyak, tutorial berikutnya masih akan membicarakan tentang tabel sekali lagi.
ita langsung masuk ke pembahasan tabel berikutnya, OK ?
Kini kita akan membahas tentang WIDTH sekali lagi, hanya kali ini kita gunakan untuk tag <TD>. Tanpa menggunakan atribut ini, lebar kolom biasanya akan menyesuaikan diri sesuai dengan isi kolom. Sebagai contoh perhatikan kode HTML berikut:
<TABLE border="5">
<TR>
<TD>Pensil</TD>
<TD>Komputer IBM Thinkpad</TD>
<TD>Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Kita lihat kode HTML di atas secara otomatis akan menghasilkan kolom yang lebar untuk sel yang isinya panjang, seperti terlihat pada tabel di bawah.
|
Pensil |
Komputer IBM Thinkpad |
Penghapus |
|
Buku |
Penggaris |
Buku Panduan Macromedia Flash MX |
Namun kita dapat mengatur lebar kolom sesuai keinginan dengan menggunakan atribut WIDTH di dalam tag <TD>. Contohnya adalah sebagai berikut:
<TABLE border="5">
<TR>
<TD WIDTH="200">Pensil</TD>
<TD WIDTH="100">Komputer IBM
Thinkpad</TD>
<TD WIDTH="150">Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya akan terlihat sebagai berikut:
|
Pensil |
Komputer IBM Thinkpad |
Penghapus |
|
Buku |
Penggaris |
Buku Panduan Macromedia Flash MX |
Kita juga dapat memberikan nilai WIDTH berupa persentase, seperti contoh berikut:
<TABLE border="5" WIDTH="600">
<TR>
<TD WIDTH="40%">Pensil</TD>
<TD WIDTH="35%">Komputer IBM
Thinkpad</TD>
<TD WIDTH="25%">Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya akan terlihat sebagai berikut:
|
Pensil |
Komputer IBM Thinkpad |
Penghapus |
|
Buku |
Penggaris |
Buku Panduan Macromedia Flash MX |
Sebagai catatan, jika menginginkan lebar tabel tetap walaupun window diperkecil hingga lebih kecil daripada lebar tabel, maka perlu menggunakan atribut WIDTH="angka (bukan persen)" di dalam tag <TABLE> bukan di dalam tag <TD>.
Sekarang kita akan bermain warna. Untuk memberi warna pada latar kita menggunakan atribut BGCOLOR yang dapat diletakkan pada tag <TABLE>, tag <TR> maupun tag <TD>. Kode warna yang digunakan sama dengan yang telah kita pelajari pada Tutorial HTML 1. Sebagai contoh, saya akan membuat sebuah tabel dengan latar belakang berwarna kuning. Maka kode yang saya gunakan adalah. O ya untuk mengubah warna tulisan tentu saja seperti biasa anda dapat mempergunakan tag <FONT> di dalam <TD>. Sebagai contoh tulisan komputer akan saya buat berwarna merah.
<TABLE border="5" BGCOLOR=#FFCC00>
<TR>
<TD>Pensil</TD>
<TD><font
color="red"> Komputer IBM Thinkpad</font></TD>
<TD>Penghapus</TD>
</TR>
<TR>
<TD>Buku</TD>
<TD>Penggaris</TD>
<TD>Buku Panduan Macromedia Flash MX</TD>
</TR>
</TABLE>
Lihat saya telah membuat latar berwarna kuning.
|
Pensil |
Komputer IBM Thinkpad |
Penghapus |
|
Buku |
Penggaris |
Buku Panduan Macromedia Flash MX |
Kode berikut ini akan membuat warna latar tiap sel berbeda:
<TABLE border="5">
<TR>
<TD BGCOLOR=#FFCC00>Pensil</TD>
<TD BGCOLOR=#00CCFF>Komputer IBM
Thinkpad</TD>
<TD BGCOLOR=#FF00CC>Penghapus</TD>
</TR>
<TR>
<TD BGCOLOR=#00FFCC>Buku</TD>
<TD BGCOLOR=#CC00FF>Penggaris</TD>
<TD BGCOLOR=#CCFF00>Buku Panduan
Macromedia Flash MX</TD>
</TR>
</TABLE>
Hasilnya adalah sebagai berikut:
|
Pensil |
Komputer IBM Thinkpad |
Penghapus |
|
Buku |
Penggaris |
Buku Panduan Macromedia Flash MX |
mudah kok asal mau belajar.
Posting Komentar