Penggunaan TABEL dalam HTML
A. TABEL
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom
menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan
kelompok data dalam satu kesatuan.
Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk
informasi dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header,
setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau
penjelasan dari fungsi tag.
Elemen-elemen
Elemen Penjelasan
<TABLE> ... </TABLE> Mendefenisikan sebuah tabel dalam HTML jika atribut border
dituliskan, maka browser akan menampilkan tabel dengan border.
<CAPTION> ...
</CAPTION>
Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul
ada lah ditengah pada bagian pa ling atas tabe l. Atr ibut
align=”bottom” dapat digunakan untuk menempatkan judul pada
bagian bawah tabel.
Catatan: judul dapat diberi tag apa saja
<TR> ... </TR> Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat
mendefinisikan atribut untuk seluruh baris: align(left, center, right)
dan/atau valign (top,middle,bottom).
<TH> ... </TH> Mendefiniskan sel header tabel. Secara default teks dalam sel ini
ditebalkan dan ditampilkan di tengah.
<TD> ... </TD> Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel
ini ditampilkan rata kiri, dan ditengah secara vertikal. Sel data table
dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan
isinya.
Atribut Tabel
Catatan: atribut yang didefinisikan dalam <TH> ... </TH> atau <TD> ... </TD> akan menggantikan
alignment default yang didefinisikan dalam <TR> ... </TR>.
Elemen Penjelasan
Align={ left|center|right} Alignment horizontal untuk sel
Valign={top|middle|bottom} Definisi alignment vertical dalam sel
Colspan=n Jumlah n kolom sel diperlebar
Rowspan=n Jumlah n baris sel diperbesar
Nowrap Matikan wrapping dalam sel
2
Contoh membuat tabel dalam HTML :
<HTML>
<BODY>
<P>Setiap tabel dimulai dengan sebuah tag TABLE.<BR>
Setiap baris dimulai dengan sebuah tag TR.<BR>
Setiap data dimulai dengan sebuah tag TD.</P>
<H4>Satu Kolom:</H4>
<TABLE BORDER=1> <TR>
<TD>Kolom 1</TD>
</TR>
</TABLE>
<H4>Satu Baris dan Tiga Kolom:<H4>
<TABLE BORDER=1>
<TR>
<TD>Kolom 1 </TD>
<TD>Kolom 2 </TD>
<TD>Kolom 3 </TD>
</TR>
</TABLE>
<H4>Dua Baris Tiga Kolom:</H4>
<TABLE BORDER=1>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Tanpa Border:</H4> <TABLE
BORDER=0>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Catatan:
Jumlah baris tabel ditentukan dengan banyaknya <TR>..</TR> yang dituliskan dalam elemen tabel,
dari <TABLE> ... </TABLE>
Jumlah kolom dalam tabel ditentukan dengan banyaknya <TD> ... </TD> di dalam setiap definisi baris,
dari <TR> ... </TR>
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
3
Contoh tabel dengan Caption dan Header
<HTML>
<BODY>
<H4>This tabel has a caption, and a thick border</H4> <TABLE BORDER=4>
<CAPTION>This is a Caption</CAPTION> <TABLE BORDER=6>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Header:</H4> <TABLE
BORDER=1>
<TR>
<TH>Nama</TH>
<TH>Alamat</TH>
<TH>Telepon</TH>
</TR>
<TR>
<TD>Jon Keboy</TD> <TD>Jl.
Angker Indah</TD>
<TD>7878787</TD>
</TR>
<TR>
<TD>Frank de Pengky</TD>
<TD>Jl. Ongol-ongol</TD>
<TD>7779988</TD>
</TR>
</TABLE>
</BODY>
</HTML>
4
Contoh Penggunaan Colspan, Rowspan dan empty cell
<HTML>
<BODY>
<H4>Cell that spans two columns:</H4>
<TABLE BORDER=1>
<TR>
<TH>Name</TH>
<TH COLSPAN=2>Telephone</TH>
</TR>
<TR>
<TD>Bill Gates</TD>
<TD>555 77 854</TD>
<TD>555 77 855</TD>
</TR>
</TABLE>
<H4>Cell that spans two
rows:</H4>
<TABLE BORDER=1>
<TR>
<TH>Name:</TH>
<TD>Bill Gates</TD> </TR>
<TR>
<TH
ROWSPAN=2>Telephone</TH> <TD>555 77
854</TD> </TR>
<TR>
<TD>555 77 855</TD> </TR>
</TABLE>
<H4>Empty Cell</H4> <TABLE
BORDER=1>
<TR>
<TD>Ini Text</TD> <TD>Ini
Text</TD> </TR>
<TR>
<TD> </TD>
<TD> </TD> </TR>
</TABLE>
<P>As you can see, one of the
cells has no border. <BR>
That because it is empty. Try
to insert a space in the
cell.<BR> Still it has no
border.</P>
<P>The trick is to insert a nonbreaking space in the cell.<BR> Nobreaking space
is a character entity. </P>
</BODY>
</HTML>
5
Tag dalam suatuTabel:
<HTML>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>
<P>This is first paragraph</P>
<P>This is second paragraph</P>
</TD>
<TD>This Cell cotanins a Table:
<TABLE BORDER=1>
<TR>
<TD>A</TD>
<TD>B</TD> </TR>
<TR>
<TD>C</TD>
<TD>D</TD> </TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>This Cell contains a list:
<UL>
<LI>Apel</LI>
<LI>Pisang</LI>
<LI>Nanas</LI>
</UL>
</TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
6
Cellpading: membuat spasi lebih, antara sel dan bordernya Cellspacing: menambah jarak antar sel.
Contoh:
<HTML>
<BODY>
<H4>Without cellpadding:</H4>
<TABLE BORDER=1>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
<H4>With Cellpadding:</H4>
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
<H4>With Cellspacing:</H4>
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>First</TD>
<TD>Row</TD>
</TR>
<TR>
<TD>Second</TD>
<TD>Row</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7
Mengatur warna dan align isi sel
Contoh:
<HTML>
<BODY>
<TABLE WIDTH=400 BORDER=1>
<TR BGCOLOR="yellow">
<TH AlIGN="left">Money Spent on ... </TH>
<TH ALIGN="right">January</TH>
<TH ALIGN="right">FEBRUARY</TH>
</TR>
<TR>
<TD ALIGN="left">Clothes</TD>
<TD ALIGN="right">$241.10</TD>
<TD ALIGN="right">$50.20</TD>
</TR>
<TR>
<TD ALIGN="left">Make-Up</TD>
<TD ALIGN="right">$30.00</TD>
<TD ALIGN="right">$44.45</TD>
</TR>
<TR>
<TD ALIGN="left">Food</TD>
<TD ALIGN="right">$730.40</TD>
<TD ALIGN="right">$650.00</TD>
</TR>
<TR>
<TH ALIGN="left">Sum</TH>
<TH ALIGN="right">$1001.50</TH>
<TH ALIGN="right">$744.65</TH>
</TR>
</TABLE>
</BODY>
</HTML>
8
B. FORM & INPUT HTML
Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat
memasukkan input melalui halaman-halaman HTML.
Elemen/TAG ini digunakan untuk membatasi input. Dalam satu form dapat terdiri atas beberapa form,
akan tetapi hanya satu form yang dapat dikirimkan ke server dalam satu saat.
Form tidak dapat berbentuk nested.
Sintaks:
<FORM ACTION=”__url_” METHOD=”get|post” ENCTYPE=” ”> ...</FORM>
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input
form.
URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form.
Method: atribut yang digunakan untuk menyatakan bagaimana masukan-masukan berasal dari form
dikirmkan kepada program CGI.Jenis Masukan dalam Form:
Jenis masukan dalam satu formulir dibedakan menjadi:
- Text, digunakan untuk memasukkan suatu nilai untuk dikirmkan kepada server. Nilai yang
dimasukkan dapat berupa angka ataupun teks.
- Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bias dipilih.
- Check Box, menyediakan beberapa pilihan, biasanya lebih dari satu pilihan yang dipilih.
- List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
- Button, digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.
Ada bermacam-macam button:
o Submit: digunakan untuk memanggil URL, setelah input selesai
dimasukkan o Reset: digunakan untuk menginisialisasi setiap elemen form.
o Button: digunakan untuk membuat form lebih interaktif, untuk memanggil script yang
ada dalam dokumen HTML.
- Image, digunakan sebagai pengganti button, berupa button yang berbentuk
gambar. - Text Area, digunakan untuk memasukkan data dalam bentuk teks
berupa memo.
Tag Text
<INPUT TYPE=”text” NAME=”var1” SIZE=# MAXLENGTH=#>
Value pada atribut size menunjukkan besar text box.
Value pada atribut maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.
Tag Radio
<INPUT TYPE=”radio”>Pilihan 1
9
<INPUT TYPE=”radio”>Pilihan 2
<INPUT TYPE=”radio”>Pilihan 3
Tag Check Box
<INPUT TYPE=”checkbox”>Pilihan 1
<INPUT TYPE=”checkbox”>Pilihan 2
<INPUT TYPE=”checkbox”>Pilihan 3
Tag Select
<SELECT SIZE=2>
<OPTION>Pilihan 1
<OPTION>Pilihan 2
<OPTION>Pilihan 3
</SELECT>
Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah
satu pilihan, secara otomatis maka list berupa list box, yang dapat berlaku seperti drop down list box.
Tag Button
<INPUT TYPE=”submit”>
<INPUT TYPE=”reset”>
Tag Image
<INPUT TYPE=”image” SRC=”url_image”>
Text Area
<TEXTARE COLS=55 ROWS=5 </TEXTAREA>
Pada setiap elemen dapat diberikan nama, dengan memberikan atribut NAME, dengan value berupa
string yang mendefinisikan nama elemen, dalam pemrograman sering disebut sebagai nama variable.
Nama variable sebaiknya mencerminkan fungsi dari variable tersebut.
Contoh:
<HTML>
<BODY>
<FORM ACTION=”html_form_cation.asp” METHOD=”get”>
<FIELDSET>
<LEGEND>Biodata</LEGEND>
<P>Input Text<BR>
Nama Depan: <INPUT TYPE="text" NAME="firstname"><BR>
Nama Keluarga: <INPUT TYPE="text" NAME=lastname">
</P>
<P>Saya Suka Buah:<BR>
<INPUT TYPE="checkbox" name="tomat">Tomat <BR>
10
<INPUT TYPE="checkbox" name="apel">Apel
</P>
<P>
Jenis Kelamin:<BR>
<INPUT TYPE="radio" CHECKED NAME="sex">Laki-laki<BR>
<INPUT TYPE="radio" NAME="sex">Perempuan<BR>
Usia:<BR>
<INPUT TYPE="radio" CHECKED NAME="usia">Dewasa<BR>
<INPUT TYPE="radio" NAME="usia">Anak-anak<BR>
</P>
</FIELDSET>
<P>Merk Mobil yang anda suka:<BR>
<SELECT NAME="cars">
<OPTION value="volvo">Volvo
<OPTION value="Suzuki">Suzuki
<OPTION value="bmw">BMW
<OPTION value="mercedes">Mercedes
</SELECT>
<P>Text area ini digunakan untuk memasukkan data berupa komentar atau pun<BR>
catatan lainnya, bersifat mirip artikel.<BR>
<TEXTAREA ROWS=5 COLS=30>This is a sample text area!</TEXTAREA>
</P>
<P>
<INPUT TYPE="button" value="OK Boo">
<INPUT TYPE="reset" value="Ressset">
<INPUT TYPE="submit" value="ssSubmit">
</P>
<BODY>
</HTML>
11
Referensi:
Betha Sidik, Ir. ,Husni I. Pohan, HTML dan XML, Informatika Bandung, Bandung, 2002.
Comments
Post a Comment
thanks