Pemrograman Web HTML (4) Table Form Andy Haryoko, ST Upload : indocafein.wordpress.com
catat Tabel diawali dengan tag <table> dan diakhiri dengan tag </table> Cell adalah komponen setiap tabel Setiap cell dibuat dengan tag <td> dan </td> Setiap sell akan disusun secara horizontal Untuk membuat baris baru, gunakan tag <tr> dan diakhiri dengan tag </tr>
<HTML> <HEAD> <TITLE>membuat tabel</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <td> satu </td> dua tiga </TABLE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>membuat tabel</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR> <TD>Sel 1,1</TD> <TD>Sel 1,2</TD> </TR> <TD>Sel 2,1</TD> </TABLE> </BODY> </HTML>
Mengatur lebar tabel dan sell Lebar tabel bisa disesuaikan dengan layar komputer <TABLE BORDER=1 WIDTH="80%"> Lebar sell bisa dissesuaikan dengan lebar tabel. <TD WIDTH="70%">Sel 1,1</TD>
<HTML> <HEAD> <TITLE>contoh13.htm</TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH="80%"> <TR> <TD WIDTH="70%">Sel 1,1</TD> <TD WIDTH="30%">Sel 1,2</TD> </TR> <TD>Sel 2,1</TD> </TABLE> </BODY> </HTML>
Cellspacing dan Cellpading Atribut cellspacing digunakan untuk mengatur jarak atau spasi antar sel dengan sel lainnya dan antar sel dengan batas tabel. Atribut cellpading digunakan untuk mengatur spasi antara batas sel dengan teks di dalam sel.
<HTML> <HEAD> <TITLE>contoh14.htm</TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH="80%" CELLSPACING=10 CELLPADDING=20> <TR> <TD WIDTH="85%">Penggunaan Internet menjadi utama dalam kegiatan perusahaan</TD> <TD WIDTH="15%">-</TD> </TR> <TD>Perusahaan banyak memanfaatkan e-mail sebagai komunikasi mereka.</TD> <TD>-</TD> </TABLE> </BODY> </HTML>
Rowspan dan Colspan Atribut rowspan digunakan untuk menggabungkan beberapa buah baris menjadi satu. Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu. Atribut-atribut ini di pakai berdasarkan tag <TD>
<HTML> <HEAD> <TITLE>contoh15.htm</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR> <TD COLSPAN=2>Sel 1,1</TD> <TD>Sel 1,2</TD> <TD>Sel 1,3</TD> </TR> <TD ROWSPAN=3>Sel 2,1</TD> <TD>Sel 2,1</TD> <TD>Sel 2,2</TD> <TD>Sel 2,3</TD> <TD>Sel 3,1</TD> <TD>Sel 3,2</TD> <TD>Sel 3,3</TD> </TABLE> </BODY> </HTML>
FORM (1) Form digunakan untuk mengumpulkan informasi dari user. Untuk membuat form digunakan tag <FORM>…</FORM>. <BODY> <FORM METHOD=”POST/GET” ACTION=”” NAME=”FORM_1”> </FORM> </BODY> Atribut METHOD berfungsi untuk menentukan cara mengirimkan data yang dimasukkan user ke server. Ada 2 cara yang dapat dipakai yaitu GET dan POST atribut ACTION berisi lokasi ke mana data form tsb akan dikirimkan. Atribut NAME berisi nama form tsb.
FORM (2) TEXTFIELD adalah satu baris tunggal yang digunakan untuk memasukkan data berupa teks maupun angka. <INPUT TYPE=”TEXT” SIZE=25 VALUE=”KETIK NAMA ANDA”>
FORM (3) PASSWORD FIELD Prinsip kerjanya sama dengan TEXTFIELD, hanya saja karakter yang diketikkan diganti dengan karakter *****. <INPUT TYPE=”PASSWORD”>
FORM (4) TEXTAREA Digunakan untuk memasukkan beberapa baris text yang dapat digulung naik atau turun. <TEXTAREA COLS=40 ROWS=5 NAME=”KOMENTAR”>
FORM (5) CHECKBOX Digunakan untuk membuat kotak pilihan <INPUT TYPE=”CHECKBOX” NAME=”PILIHAN1”>SEPAKBOLA RADIO BUTTON Kegunaannya sama dengan checkbox hanya saja bentuknya lingkaran. <INPUT TYPE=”RADIO” NAME=”GROUP1”>BULU TANGKIS
FORM (6) DROP DOWN MENU Digunakan untuk membuat daftar menu. Untuk membuatnya digunakan tag <SELECT> dan daftar pilihan menggunakan <OPTION> <SELECT NAME=”MENU”> <OPTION VALUE=”SEPAKBOLA”>FOOTBALL</OPTION> <OPTION VALUE=”BULU TANGKIS”>BADMINTON</OPTION> <OPTION VALUE=”TENIS”>TENIS</OPTION> </SELECT>
FORM (7) SUBMIT BUTTON Mengirimkan data yang dimasukkan melalui form oleh pembaca ke server. <INPUT TYPE=”TEXT” VALUE=”MASUKKAN NIM ANDA”> <INPUT TYPE=”SUBMIT” VALUE=”KIRIM”> RESET BUTTON Membatalkan data yang telah diketik di form sehinnga form menjadi kosong. <INPUT TYPE=”RESET” VALUE=”CANCEL”>
Next Lebih Lanjut Tentang Form Frame CSS
Tugas Buat tabel menu kalian dalam seminggu