 |
Cara Mudah
Membuat Tabel |
Pelajaran 4
Mari kita lupakan dulu CELLPADDING dan CELLSPACING
dan kita kembali ke tabel kecil kita yang sederhana.
<TABLE BORDER=3>
<TR>
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
Salah satu ciri browser saat ini adalah kemampuannya
untuk mengubah warna latar belakang sel, baris, atau seluruh tabel. Anda
gunakan BGCOLOR seperti yang anda pakai dalam tag <BODY>.
<TABLE BORDER=3 BGCOLOR="#FFCC66">
<TR>
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
<TABLE BORDER=3>
<TR BGCOLOR="#FF9999">
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR BGCOLOR="#99CCCC">
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
<TABLE BORDER=3>
<TR BGCOLOR="#FFCCFF">
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD BGCOLOR="#FF0000">Vivi</TD>
<TD>Yuli</TD>
<TD BGCOLOR="#3366FF">Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
Panduan ini saya pakai
untuk memilih warna latar belakang.
Ada beberapa hal yang harus anda ketahui tentang warna latar belakang
tabel ini.... <TD> bgcolor akan mengalahkan perintah <TR>
bgcolor, dan <TR> bgcolor akan mengalahkan perintah <TABLE>
bgcolor. Untuk lebih memperjelas, anda lihat contoh berikut ini:
<TABLE BORDER=3 BGCOLOR="#FF6633">
<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
Sekarang kita akan bermain-main dengan COLSPAN dan ROWSPAN.
Misalkan PANDUAN melakukan invasi dan menyebabkan Wawan terlempar keluar dari
tabel. Dengan terjadinya hal itu, inilah yang kita dapat.
<TABLE BORDER=3>
<TR>
<TD>PANDUAN</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Agung |
| Vivi |
Yuli |
Lusi |
Keluarnya Wawan menyebabkan selnya kosong dan Agung bergeser mengisi kekosongan
tersebut.
Kalau kita
ingin menggambarkan invasi tersebut di mana PANDUAN mengambil sel milik Wawan,
kita harus menggunakan atribut COLSPAN untuk itu.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>PANDUAN</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Agung |
| Vivi |
Yuli |
Lusi |
Bagaimana jika Wawan kembali
lagi setelah PANDUAN telanjur menempati dua kolom? Browser akan mencoba memberikan
solusi terbaiknya.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
Dari contoh tadi kita lihat bahwa 1) Browser sangat toleran terhadap perintah
yang diberikan kepadanya dan selalu mencoba memberikan solusi terbaiknya.
2) Perhatikan hal-hal yang penting dan pastikan bahwa semuanya sesuai atau
anda akan mendapat beberapa kejutan. Dan 3) tidak ada sesuatu pun yang
anda lakukan dengan html akan akan menyebabkan macetnya browser, bagaimana
jeleknya pun perintah anda, jadi jangan kawatir. (Sayangnya hal yang sama
tidak berlaku untuk pemrograman JAVA atau animasi gif.)
OK... sekarang Wawan kita keluarkan
lagi.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2>PANDUAN</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Agung |
| Vivi |
Yuli |
Lusi |
Agung melakukan protes dan pergi.
PANDUAN lalu mengambil alih sel milik Agung juga dan kemudian ia berdiam di
tengah-tengah sel.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>PANDUAN</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
Perintah-perintah html yang lain
dapat juga dipakai di dalam tabel. Sebagai contoh kita akan membuat PANDUAN
<STRONG>.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>PANDUAN</STRONG></TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
Kita akan jadikan PANDUAN sebagai
link ke homepage yang saya buat.
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://www.tokotop.com">PANDUAN</A></TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
Sekarang kita tinggalkan hal-hal
tadi, kembalikan Wawan dan Agung ke tempatnya dan kita akan belajar tentang
<ROWSPAN>.
<TABLE BORDER=3>
<TR>
<TD>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Vivi</TD>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Vivi |
Yuli |
Lusi |
Seperti yang
mungkin sudah anda duga, <ROWSPAN> mirip seperti <COLSPAN>
kecuali dia berkaitan dengan baris. Gampang kan?
Jika kita singkirkan Vivi dan berikan selnya kepada PANDUAN, inilah yang
kita dapatkan.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>PANDUAN</TD>
<TD>Wawan</TD>
<TD>Agung</TD>
</TR>
<TR>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
| PANDUAN |
Wawan |
Agung |
| Yuli |
Lusi |
Dan tentu saja kedua tag ini bisa
dipakai secara bersamaan.
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>PANDUAN</TD>
<TD COLSPAN=2>Wawan</TD>
</TR>
<TR>
<TD>Yuli</TD>
<TD>Lusi</TD>
</TR>
</TABLE>
Terapi Gelombang Otak - Meningkatkan Konsentrasi, Kecerdasan, dan Daya Ingat
TUTORIAL MEMBUAT WEBSITE | CARA MEMBUAT WEBSITE
Belajar Sulap Bonus Cewek Seksi..! Bagaimana bisa? Tanya saja >>> webmaster
|