1. Membuat Table Sederhana
Saya akan menjelaskan bagaimana cara membuat table sederhana, sangat mudah bagi yang sudah mengerti. membuat table HTML di perlukan ada 3 dasar, diantaranya yaitu :
- Penanda table <table>
- Penanda baris <tr>
- Penanda kolom <td>
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web terbagi pada beberapa kolom atau baris.
Selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Syarat Dalam membuat tabel di HTML harus memiliki elemen atau kode tertentu akan tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu.
Jangan lupa jika sudah anda masukkan kode awalan maka anda juga harus memakai kode penutupnya juga.
- </td>
- </tr>
- </table>
Di bawah ini adalah salah satu contoh intuk pembuatan table sederhana :
<html>
<Head>
<Title>Tabel saya</title>
</head>
<body>
<p>Ini<strong>tabel saya</strong>yang sudah jadi</p>
<table>
<tr>
<td>kolom pertama baris ke 1</td>
<td>kolom kedua baris ke 1</td>
<td>kolom ketiga baris ke 1</td>
</tr>
<tr>
<td>kolom ke 1 baris kedua</td>
<td>kolom ke 2 baris kedua</td>
<td>kolom ke 3 baris kedua</td>
</tr>
</table>
</body>
</html>
Maka hasil browser akan jadi seperti ini :
2. Membuat Table Kompleks
Baik lah langkah selanjutnya saya akan menjelaskan apa itu table kompleks.
Kompleks disini adalah sebuah table yang akan menggabungkan beberapa cell sesuai kebutuhan. dan ini Cara pembuatannya adalah sebagai berikut :
<html>
<head>
<title>tabel arisan</title>
<style type="text/CSS">
table {
Border:1px solid #C6C6C6;
}
</style>
</head>
<body>
<p>ini table arisan pengajian ibu-ibu didendang</p>
<table>
<tr>
<td rowspan="2" style="text-align:center; vertical-align:middle;">Nama ibu-ibu</td>
<td colspan="4" style="text-align:center; vertical-align:middle;">Bulan</td>
</tr>
<tr>
<td>Muharam</td>
<td>Safar</td>
<td>Rabiul awal</td>
<td>Rabiul akhir</td>
</tr>
<tr>
<td>Sharie</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>Yani</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
<tr>
<td>Cahyu</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>
Dan hasilnya akan menjadi seperti ini :
3. Membuat Table Dengan Heading
Kali ini kita membuat table heading,, bagaimana caranya,, berikut saya jelaskan sedikit tentang table heading.Tag heading adalah sebuah tag/code HTML untuk memperbesar sebuah tulisan. Biasanya
heading tag digunakan dalam membuat judul sebuah document atau artikel. Heading
tag sendiri memiliki 6 tingkatan yang dimulai dari 1 sampai 6.Heading 1 atau <h1> merupakan tingkatan paling besar, sementara heading 6 atau <h6> merupakan tingkatan paling kecil. Heading tag juga berguna untuk Pengoptimalkan SEO secara onpage.
<html>
<head>
<title> MEMBUAT DOKUMEN HTML DENGAN TAG HEADING</title>
</head>
<body>
<h1>Heading dengan ukuran 1</h1>
<h2>Heading dengan ukuran 2</h2>
<h3>Heading dengan ukuran 3</h3>
<h4>Heading dengan ukuran 4</h4>
<h5>Heading dengan ukuran 5</h5>
<h6>Heading dengan ukuran6</h6>
</body>
</html>
<head>
<title> MEMBUAT DOKUMEN HTML DENGAN TAG HEADING</title>
</head>
<body>
<h1>Heading dengan ukuran 1</h1>
<h2>Heading dengan ukuran 2</h2>
<h3>Heading dengan ukuran 3</h3>
<h4>Heading dengan ukuran 4</h4>
<h5>Heading dengan ukuran 5</h5>
<h6>Heading dengan ukuran6</h6>
</body>
</html>
Tapi dalam pembuatan ini kita memakai <h2> heading dengan ukuran 2</h2> , berikut langkah membuat heading :
<html>
<head>
<title>tabel kompleks</title>
</head>
<body>
<h2>ini tabel yang telah menggunakan heading</h2>
<table>
<tr>
<th>Nomor induk siswa</th>
<th>Nama siswa</th>
</tr>
<tr>
<td>249/9971084890</td>
<td>Siti syarifah</td>
</tr>
</table>
</body>
</html>
<head>
<title>tabel kompleks</title>
</head>
<body>
<h2>ini tabel yang telah menggunakan heading</h2>
<table>
<tr>
<th>Nomor induk siswa</th>
<th>Nama siswa</th>
</tr>
<tr>
<td>249/9971084890</td>
<td>Siti syarifah</td>
</tr>
</table>
</body>
</html>
Hasilnya akan menjadi seperti ini :
Kalian sudah paham kan apa itu table menggunakan heading
4. Membuat Table Formulir
Sekarang kita akan belajar bagaimana membuat formulir isian di HTML. Ada macam-macam modul input datanya dan insya Allah akan kita bahas semua. Kita mulai dengan membuat format sebuah formulir. Untuk membangun formulir, anda harus mengawali dan menutupnya dengan tag. contohnya seperti ini :
- <Form action="" method="post">
- <!-- Isi formulir disini -->
- </form>
Tag form memiliki setidaknya 2 atribut. Pertama yaitu
Atribut berikutnya adalah
Method POST dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, threat forum, input artikel baru atau apa ajalah. Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Nantinya, semua input data harus diletakkan diantara tag
* Ini Cara membuat Formulir Isian :
<html>
<head><title>INPUT DATA</title></head>
<body>
<form>
<table width="55%" height="60%" border="1" align="center">
<tr align ="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>
</table>
</form>
</body>
</html>
4. Membuat Table Formulir
Sekarang kita akan belajar bagaimana membuat formulir isian di HTML. Ada macam-macam modul input datanya dan insya Allah akan kita bahas semua. Kita mulai dengan membuat format sebuah formulir. Untuk membangun formulir, anda harus mengawali dan menutupnya dengan tag. contohnya seperti ini :
- <Form action="" method="post">
- <!-- Isi formulir disini -->
- </form>
Tag form memiliki setidaknya 2 atribut. Pertama yaitu
action
yang menunjukkan file untuk memproses formulir. Biasanya sebuah file
php. Insya Allah nanti kita bahas di bagian PHP juga. Jadi sementara
kita kosongi dulu. Mengkosongi atribut action juga berarti mengirimkan
data ke file yang sama. Dan karena file ini tidak ada fungsi untuk
memproses data, maka ya tidak akan terjadi apa-apa. Atribut berikutnya adalah
method. Ada 2 macam method yaitu POST dan GET.Method POST dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, threat forum, input artikel baru atau apa ajalah. Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Nantinya, semua input data harus diletakkan diantara tag
<form action="" method="post"> dan </form>. Jika anda meletakkan diluar tag tersebut, maka data itu tidak akan dikirimkan ke file pemroses.* Ini Cara membuat Formulir Isian :
<html>
<head><title>INPUT DATA</title></head>
<body>
<form>
<table width="55%" height="60%" border="1" align="center">
<tr align ="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>
</table>
</form>
</body>
</html>
Dan hasilnya akan menjadi seperti ini :
5. Mewarnai Table
Dan selanjutnya saya akan menjelaskan bagaimana cara mewarnai table. Jika kita ingin mewarnai tabel sesuai yang kita inginkan, seperti ini.
.
- Untuk mewarnai seluruh tabel <table></table>, kodenya seperti ini.
<table border="1px"; bgcolor="warna" > isi </table>
- Untuk mewarnai kepala tabel <th></th>, kodenya seperti ini.
<th bgcolor="warna" > isi </th>
- Untuk mewarnai kolom tabel <td></td>, kodenya seperti ini.
<td bgcolor="warna" > isi </td>
Jika anda sudah jelas tentang cara mewarnai di setiap element tabel tadi, sekarang ini adalah contoh kode keseluruhan tabel yang berwarna warni.
<html>
<head>
<title>Tabel dengan warna</title>
<body>
<Table width="500" Border="1" CellSpacing="0" Cellpadding="3">
<tr>
<th Width="53" rowspan="3" bgcolor="#00CCCC"> rowspan 3</th>
<th width="74" height="41" bgcolor="#00CCCC" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">colspan 2 </th>
</tr>
<tr>
<td bgcolor="#66CCFF">Siti syarifah</td>
<td align="center" bgcolor="#99CC66">Parit 13</td>
<td bgcolor="#9966FF">085269837667</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan seperti ini :
Cukup sampai di sini dulu ea saya menjelaskan tentang pelajaran yang selama ini saya dapat, besok saya sambung lagi.. Semoga apa yang saya jelaskan tadi dapat bermanfaat bagi kalian semua , Dan anda bisa mengerti dan memahami isinya...
Tidak ada komentar:
Posting Komentar