Assalamu’alaikum Wr.Wb........
Di pembahasan kali ini saya akan berbagi info
seputar “cara membuat tabel dan membuat formulir sederhana di HTML”.......ohhh
iya hapir lupa, ada tambahan Link nya juga ya sobat..
Langkah-langkah :
1. Buka
phpDesigner 8 nya....(disini saya memakai aplikasi tersebut)
2. Pilih
HTML
3. Buat
kode HTML nya, saya akan membuat sebuah tabel dan formulir beserta link nya
juga ya sobb... sebelumnya ada sedikit penjelasan tentang elemen tabel diantaranya:
<table> untuk mengawali dalam
pembuatan tabel
<th> atau table heading
berfungsi untuk mendefinisikan header
<tr> atau table row berfungsi
untuk mendefinisikan baris
<td> atau table data
berfungsi untuk mendefinisikan sel
Align : untuk mengatur posisi
Cellspacing : untuk mengatur antar
sel
Cellpadding : untuk menentukan
lebar tabel atau sel
Widht : untuk menentukan lebar
tabel
Height : untuk menentukan tinggi
tabel
Rowspan : untuk menggabungkan baris
Colspan : untuk menggabungkan kolom
Langkah yang Pertama: Membuat tabel
<!DOCTYPE HTML>
<html>
<head>
<title> Data Kuliah </title>
</head>
<body>
<table border=2 align="center"
cellspacing=0 cellpadding=5>
<tr>
<th
rowspan="2">NIM</th>
<th rowspan="2">
Nama</th>
<th rowspan="2">
Kelas</th>
<th
colspan="2">KETERANGAN</th>
</tr>
<tr>
<th>LULUS</th>
<th>TIDAK LULUS</th>
</tr>
<tr align="center">
<td>109533423204</td>
<td>Aisyah</td>
<td rowspan=4> MI-10</td>
<td
rowspan="2">V</td>
<td
rowspan="2">-</td>
</tr>
<tr align="center">
<td>109533423205</td>
<td>Budi</td>
</tr>
<tr align="center">
<td>109533423206</td>
<td>Dewi</td>
<td
rowspan="3">-</td>
<td
rowspan="3">V</td>
</tr>
<tr align="center">
<td>109533423207</td>
<td>Edi</td>
</tr>
<tr align="center">
<td>109533423208</td>
<td>Furi</td>
<td>MI-1</td>
</tr>
</table>
<br><br><br><br>
Hasil
:
Dan untuk menghubungkan antara
Tabel Dan Formulir saya menggunakan Link Seperti yang saya cantumkan di bawah
ini
<center><a
href="formulirku.htm"
target="_top"><button>Formulir</button></a></center>
</body>
</html>
Dan
ini hasil nya :
Langkah yang Kedua : Membuat
Formulir
<!DOCTYPE HTML>
<html>
<head>
<title>
Formulir </title>
</head>
<body>
<table
style="font-family: calibri" border=0 align="center"
cellspacing=0 cellpadding=0>
<tr>
<td colspan="4"
align="center" height="60" width="650"
bgcolor="33CCFF"> <b> PROVINSI JAWA TIMUR
<br> KOTA SURABAYA
</b></td>
</tr>
<!--baris data pertama-->
<tr>
<td>NIK</td>
<td><b>:
35081021103900003</b></td>
<td></td>
<td></td>
</tr>
<!--baris data kedua-->
<tr>
<td>Nama</td>
<td><b>: Gubernur
Suryo</b></td>
<td></td>
<td rowspan="5"
bgcolor="#D9D9D9" width="20%"
align="center"><b>Foto</b></td>
</tr>
<!--baris data ketiga-->
<tr>
<td>Tempat/Tgl Lahir</td>
<td><b>: Surabaya,11 Maret
1990</b></td>
<td></td>
<td
rowspan="6"></td>
</tr>
<!--baris data keempat-->
<tr>
<td>Jenis kelamin</td>
<td><b>:
Laki-Laki</b></td>
<td>Gol Darah :<b>
B</b></td>
</tr>
<!--baris data kelima-->
<tr>
<td>Alamat</td>
<td><b>: Jl. Pemuda
101</b></td>
<td></td>
</tr>
<!--baris data keenam-->
<tr>
<td>RT/RW</td>
<td><b>: 002 /
025</b></td>
<td></td>
</tr>
<!--baris data ketujuh-->
<tr>
<td>Desa/Kel</td>
<td><b>:
Rungkut</b></td>
<td></td>
</tr>
<!--baris data kedelapan-->
<tr>
<td>Kecamatan</td>
<td><b>:
Rungkut</b></td>
<td></td>
</tr>
<!--baris data kesembilan-->
<tr>
<td>Agama</td>
<td><b>:
Islam</b></td>
<td>Status :</td>
</tr>
<!--baris data kesepuluh-->
<tr>
<td>Pekerjaan</td>
<td><b>: Pelajar /
Mahasiswa </b></td>
<td></td>
</tr>
<!--baris data kesebelas-->
<tr>
<td>Berlaku hingga</td>
<td><b>: 11 Maret
2014</b></td>
<td></td>
</tr>
<!--baris data keduabelas-->
<tr>
<td>Kewarganegaraan</td>
<td><b>:
WNI</b></td>
<td></td>
</tr>
<!--baris data ketigabelas-->
<tr>
<td colspan="4"
align="left" height="120"
bgcolor="66FF99"> Syarat Pengambilan e-KTP :
<br />
<ol type="1">
<li>Membawa pas foto ukuran
3x4 berwarna </li>
<li>Membawa KTP lama
</li>
<li>Membawa Kartu Keluarga
</li>
</ol>
</td>
</tr>
</table>
<br><br>
Hasil
:
Beri Link lagi pada bagian
Formulir, Caranya seperti kaya yang bagian Tabel diatas ya sobb....
<center><a href="Data kuliah.htm"
target="_top"><button>Table</button></a></center>
</body>
</html>
Hasil Akhir :
Sekian info dari saya...sekali lagi
maaf yaaa kalau masih banyak kekurangan dan Selamat Mencoba.... :) :)
Wassalamu'alaikum Wr. Wb
0 komentar:
Posting Komentar