Membina Jadual dan Borang

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. Contohnya Indeks untuk dokumen ini adalah dalam bentuk Jadual yang mengandungi satu siri lis yang tidak tersusun. Namun Jadual mempunyai kegunaan yang kedua penting (malah lebih utama). Ia adalah alat HTML yang utama untuk mengawal susunatur halaman. Ini dilakukan dengan memaparkan jadual (garisannya diperlihatkan) dilembaran Home Page anda dan kemudian meletakkan teks dan grafik di pelbagai sel jadual sebagai satu cara untuk menentukan kawasan-kawasan tertentu di halaman anda. Bahagian ini akan hanya membincangkan bagaimana membina Jadual.

Jadual Asas.

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

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>). Sekarang Jadual 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 ini dengan tag-tag CENTER, seperti ini:

Hmmm. Lajur mempunyai kelebaran yang berbeza. Oleh itu kita tentukan kelebarannya dengan meletakkan segugusan kenyataan WIDTH= kenyataan untuk satu JADUAL DATA untuk setiap lajur. Saya rasa mari kita lihat keseluruhan kod Jadual supaya tiada 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>

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:

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 pertama telah diabaikan untuk memberi ruang yang lebih kepada baris dibawahnya, jadual tersebut kelihatan begini:

Jika kita telah menambah COLSPAN=2 dan bukan ROWSPAN=2, dan mengabaikan sel di sebelah kanan dan bukan sel dibawah seperti contoh tadi, jadual itu akan berubah dan kelihatan begini:

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>

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.

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 anda kelihatan janggal.

Mencipta & Menggunakan BORANG (FORMS).

Bahagian ini agak panjang. Mungkin akan hendak merokok sebentar, Silakan...

Untuk permulaan, kita lihat satu BORANG yang menggunakan kebanyakan ciri-ciri sesuatu Borang, dengan kod yang yang dilaksanakan oleh setiap ciri yang ditunjukkan secara huruf tebal di bawah nya.

Pertamanya, BORANG akan dimulai dengan tag FORM . Untuk penerangan berkenaan METHOD dan ACTION, lihat bahagian akhir bab ini.

<FORM METHOD="POST" ACTION="mailto:nobody@nowhere.net">

TATACARA(METHOD) DAN TINDAKAN(ACTION)

Terdapat dua kemungkinan ACTIONs untuk borang-borang, tetapi hanya satu yang ada untuk para pengguna.

ACTION="nama fail" akan menjanakan penghantaran borang kepada satu fail .exe atau skrip yang terdapat pada server, yang akan memproses penghantaran serta akan melakukan sesuatu dengan keputusan itu, lazimnya menuliskan semula ke atas skrin dalam bentuk HTML. Contohnya apabila anda melakukan Carian InfoSeek, anda memasukkan input di dalam satu borang . Ia akan di berikan kepada satu program pengkalan data, yang melaksanakan carian data-data dan kemudian memaparkannya ke atas skrin apakah hasil cariannya. tetapi kebanyakan server tidak mengizinkan kita menggunakan cara ini atas sebab-sebab kerahsiaan maklumat.

Pilihan kedua ialah ACTION="mailto:alamat email". Yang ini boleh didapati untuk sesiapapun. Dalam kes ini, penghantaran borang oleh penjawab akan diemelkan kepada alamat yang tertera. Jadi apakah itu "Penghantaran borang"? Saya telah memasukkan borang contoh di atas dan menghantarkan ke alamat emel saya sendiri. Begini hasilnya:

name=ZULKIFLI+MOHAMED&Komen=Ini+dimasukkan+di+dalam+TEXT+AREA.%0D%0A &sistem operasi=win3.1&wordprocessor=on&database=on&Umur=25-50&Hubung=Email &Hubung=Fax

Apa tu? Ya, ia tidak jelas. Tukar + kepada satu jarak, gantikan setiap & dengan tekan butang ENTER, dan tafsirkan kesetiap % dengan nilai ASCII sepadan, dan itulah hasilnya!
Sekarang ini terdapat satu program yang boleh menterjemahkan setiap kandungan isi mailto dengan mudah. Mailto: Formatter ialah program yang dimaksudkan.Terima kasih kepada penciptanya kerana menjadikan tugas kita bertambah mudah. Sila tekannya untuk mendapatkan sekarang, jika mahu!