Home � Sitenblog � TUTORIAL HTML 4

TUTORIAL HTML 4

Posted by Abol Ezz Sitenblog 10:05 PM

Membuat Hompej Yang Rapi: Pakailah Tabel

Huaahh, anda masih semangat ? Jika anda merasa bosan, tarik nafas sejenak. Praktekkan apa yang telah anda pelajari, sebagai selingan. Mulailah membuat hompej sendiri, karena peralatan dasarnya telah anda miliki. Kalau boleh memberi saran, daftarlah ke HYPERLINK "http://www.geocities.com" \t "_blank" Geocities dan tampilkan kreativitas anda. Yup, satu tahu geocities tidak ideal. Anda tidak dapat bermain-main server-side script, (oops binatang apa itu ? dalam tutorial yang lain anda akan mengetahuinya), dll. Namun kelebihan Geocities adalah reliable (jarang down) dan yang terpenting gratis. :D OK, cukup becandanya. Sekarang kita akan mulai membuat tabel. Anda pasti pernah melihat tabel dalam sebuah situs. Jika belum baiklah, kini saya perkenalkan.

Perhatikan baik-baik tabel di bawah ini.

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).

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
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.

<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>

Sebagai informasi, default untuk CELLSPACING adalah CELLSPACING="2".
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.

<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>

O, ya default nilai CELLPADDING adalah CELLPADDING="1".

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.

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 3Kolom 1	Baris 3 Kolom 2	Baris 3 Kolom 3
Baris 4 Kolom 1	Baris 4 Kolom 2	Baris 4 Kolom 3

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 ), sedang pada baris ketiga dan keempat harga ALIGN dan VALIGN diset untuk setiap baris (pada tag
). 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"
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
Hasilnya adalah sebagai berikut:
Baris 1 Kolom 1Baris 1 Kolom 2Baris 1 Kolom 3Baris 2 Kolom 1Baris 2 Kolom 2Baris 2 Kolom 3Baris 3 Kolom 1Baris 3 Kolom 2Baris 3 Kolom 3Baris 4 Kolom 1Baris 4 Kolom 2Baris 4 Kolom 3

Kini kita akan membicarakan beberapa atribut pada tag
, 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:
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 5

Hasil dari kode di atas adalah: Baris 1 Kolom 1Baris 1 Kolom 2Baris 1 Kolom 3Baris 1 Kolom 4Baris 1 Kolom 5Baris 2 Kolom 1Kolom 2, 3 dan 4 bergabungBaris 2 Kolom 3

Atribut ROWSPAN mirip dengan atribut COLSPAN, hanya di sini yang bergabung adalah baris. Contoh penerapannya adalah sebagai berikut:
Baris 1 Kolom 1 Baris 1 Kolom 2 Baris 1 dan 2 bergabung.
Baris 2 Kolom 1 Baris 2 Kolom 2
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.

Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com