TUTORIAL MENCIPTA JADUAL

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.

Jadual Asas.

Jadual dibina dengan sepasang tag <TABLE> </TABLE> Tag-tag ini meliputi tag-tag JADUAL BARIS (<TR> </TR>), yang kemudiannya merangkumi pula tag-tag JADUAL DATA (<TD> </TD>). Kod yang mudah bagi sesebuah Jadualmengandungi 2 baris dan tiga lajur akan kelihatan seperti ini:

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

MelakaKelantanKedah
PerakSelangorLain-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:

 
MelakaKelantanKedah
PerakSelangorLain-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:

MelakaKelantanKedah
PerakSelangorLain-lain
Ketebalan keseluruhan Jadual boleh ditentukan dengan meletakkan nilai dengan ukuranpixels atau peratus di dalam tag TABLE(<TABLE BORDER=4 WIDTH=60%>). Sekarang lihat::

MelakaKelantanKedah
PerakSelangorLain-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:

MelakaKelantan Kedah
PerakSelangorLain-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:

MelakaKelantanKedah
PerakSelangorLain-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:

MelakaKelantanKedah
SelangorLain-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:

MelakaKedah
PerakSelangorLain-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 BersejarahKelantan, Serambi MekahKedah
PerakSelangorLain-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.

Jadual Negeri-Negeri
MelakaKelantanKedah
PerakSelangorLain-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