Mengungkap cara membuat eBook dan Cover 3 Dimensi hanya dalam 1 menit atau kurang

- Software Untuk Membuat E-Book PDF

- Software Untuk Membuat Cover 3 Dimensi Otomatis

- Software Untuk Membuat Logo Profesional

- Bonus 40 lebih software pendukung bisnis internet.

SEMUA ADA DALAM PAKET TOKOTOP 3 DIMENSI - INFO LENGKAP KLIK DISINI

 


 HOME  |  TUTORIAL:   Web Page  |  Tabel  |  Form  |  Frame  |  SULAPMAGIC.COM TOKOTOP.COM 

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>
 
 
PANDUAN
Vivi Yuli Lusi


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>
 
 
PANDUAN
Vivi Yuli Lusi


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>
 
 
PANDUAN
Vivi Yuli Lusi


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>
 
 
PANDUAN Wawan
Yuli Lusi


 
TELL ME MORE - Percakapan Bahasa Inggris Dengan Komputer Anda..!
Tutorial Membuat Website: What do you want to learn today?
Membuat Web Page 1 2 3 4 5 6 7 8 9
Membuat Tabel 1 2 3 4 5 6
Membuat Form 1 2 3 4 5
Membuat Frame 1 2 3 4 5 6
Dapatkan DVD Tutorial Membuat Website - Klik di sini!


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