TUTORIAL MENCIPTA JADUAL
Sebelum saya menerangkan bagaimana untuk meletakkan jadual di dalam dokumen, saya akan menjelaskan dahulu beberapa perkara.Jadual ini mempunyai kegunaan yang nyata di dalam menyampaikan maklumat yang tersusun di dalam dokumen HTML. Jadual mempunyai kegunaan yang penting. Ia adalah alat HTML yang utama untuk mengawal susunatur halaman. Ini dilakukandengan memaparkan jadual (garisannya diperlihatkan) dilembaran Home Page andadan kemudian meletakkan teks dan grafik di pelbagai sel jadual sebagai satu carauntuk menentukan kawasan-kawasan tertentu di halaman anda. Bahagian ini akan hanyamembincangkan bagaimana membina Jadual.
<TABLE>
<TR>
<TD>Melaka </TD>
<TD>Kelantan </TD>
<TD>Kedah </TD>
</TR>
<TR>
<TD>Perak </TD>
<TD>Selangor </TD>
<TD>Lain-lain </TD>
</TR>
</TABLE>Jadual berkenaan akan kelihatan begini:| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Tiada garis! Okay. Garis-garis hendaklah dimasukkan dengan menentukan ketebalan border(dalam ukuran pixels) selepas membuka tag TABLE .
<TABLE BORDER=4>
contohnya:- <TABLE BORDER=4> <TR> <TD>Melaka </TD> <TD>Kelantan </TD> <TD>Kedah </TD> </TR> <TR> <TD>Perak </TD> <TD>Selangor </TD> <TD>Lain-lain </TD> </TR> </TABLE>
SekarangJadual kita akan kelihatan seperti berikut:
| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Sekarang teruskan dan lihat apa lagi yang kita gunakan untuk mengawal jadual kita. Kita boleh menengahkan dengan mengikat keseluruhan kod untuk Jadual inidengan tag-tag CENTER, seperti ini:
| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Hmmm. Lajur mempunyai kelebaran yang berbeza. Oleh itu kita tentukan kelebarannyadengan meletakkan segugusan kenyataan WIDTH= kenyataan untuk satu JADUAL DATAuntuk setiap lajur. Saya rasa mari kita lihat keseluruhan kod Jadual supayatiada sesiapa yang tersasul disini.
<TABLE BORDER=4 WIDTH=60%>
<TR>
<TD WIDTH=33%>Melaka </TD>
<TD WIDTH=33%>Kelantan </TD>
<TD WIDTH=33%>Kedah </TD>
</TR>
<TR>
<TD>Perak </TD>
<TD>Selangor </TD>
<TD>Lain-lain </TD>
</TR>
</TABLE>Perhatikan peratus di sini adalah dalam penentuan kelebaran Jadual, bukannya kelebaran halaman(satu kelebihan menentukan lebar dengan pixels). Ini akan memberi:| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Kita juga patut mengenengahkan isi sel. Hal ini boleh dilakukan dengan meletakkan ALIGN=CENTER (atau RIGHT, atau LEFT) untuk setiap tag JADUAL BARIS (<TR ALIGN=CENTER>). Ketentuan ALIGN spec boleh juga di letakkan pada setiap sel individu, dan akan mengambil alih ketentuan penjajaran baris yang awal.Lihat apa jadi:
| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Terdapat juga ketentuan VALIGN=CENTER (atau TOP, atau BOTTOM) yang digunakan dalam cara yang sama dengan ALIGN untuk mengawal kedudukan membujur (vertical) setiap isi sel.
Setiap sel di dalam Jadual boleh dicantumkan untuk membentuk sel yang lebih besar dengan menyelitkan COLSPAN= atau ROWSPAN= kepada tag-tag JADUAL DATA . Di dalam sel data pertama di dalam baris pertama ditulis <TD WIDTH=33% ROWSPAN=2>Melaka </TD>, dan sel pertamatelah diabaikan untuk memberi ruang yang lebih kepada baris dibawahnya, jadual tersebut kelihatan begini:
| Melaka | Kelantan | Kedah |
| Selangor | Lain-lain |
Jika kita telah menambah COLSPAN=2 dan bukan ROWSPAN=2, dan mengabaikan seldi sebelah kanan dan bukan sel dibawah seperti contoh tadi, jadual itu akan berubah dan kelihatan begini:
| Melaka | Kedah | |
| Perak | Selangor | Lain-lain |
Kodnya begini:
<TABLE BORDER=4 WIDTH=60%> <TR ALIGN=CENTER> <TD WIDTH=33% COLSPAN=2>Melaka </TD> <TD WIDTH=33%>Kelantan </TD> <TD WIDTH=33%>Kedah </TD> </TR> <TR ALIGN=CENTER> <TD>Selangor </TD> <TD>Lain-lain </TD> </TR> </TABLE>Saya perlu tegaskan disini bahawa isi sel akan mengubah saiz sel. Jika kita memasukkan teks yang berlebihan di dalam sel-sel, jadual sebegini akan terjadi:
| Melaka, Bandaraya Bersejarah | Kelantan, Serambi Mekah | Kedah |
| Perak | Selangor | Lain-lain |
Ini boleh di halang dengan meletakkan arahan NOWRAP kepada tag JADUAL DATA. Kelebaran sel akan bertambah untuk memuatkan isi sel, melupuskan kelebaran sel yang ditentukan oleh anda pada awalnya..
Sebelum mengakhiri bab ini, kita boleh meletakkan `caption'(Tajuk kecil) dengan meletakkan sepasang tag <CAPTION> </CAPTION> melingkungi tag TABLE, tetapi bukan dikawasan baris atau sel. `Caption' akan ditengahkan, dan diletakkan sebelah atas. Kedudukannya boleh diubah di bawah dengan meletakkan ALIGN=BOTTOM di pembukaan tag CAPTION.
| Melaka | Kelantan | Kedah |
| Perak | Selangor | Lain-lain |
Perlu disebutkan di sini bahawa sel TABLE HEADER (<TH> </TH>). Ia menyerupai dengan sel JADUAL DATA (TABLE DATA) dalam semua hal kecuali isinya dakan ditebalkan.
Berhati-hati di dalam menuliskan kod-kodnya. Kesilapan yang kecil akan menjadikan Jadual andakelihatan janggal.

| Pel 1 | Pel 2 | Pel 3 | Pel 4 | Pel 5 | Pel 6 | Indeks |
[Tutorial Jadual]
[Tutorial Borang] [Tutorial
Bingkai] [Tutorial Pemetaan Imej]
[Java & Javaskrip]
[Muzik Latarbelakang] [Sumber
Lain]
ZULKIPLY
HARUN'S ONLINE PORTFOLIO