Assalamualaikum Wr. Wb... teman teman saya Cahyu datang lagi dengan tema yang berbeda yaitu, cara membuat table pada HTML. Semoga apa yang saya jelas kan bermanfaat bagi teman teman semua. Dalam pembuatan table disini kita masih menggunakan tag pembuka dan tag penutup HTML. Masih ingat kan tag pembuka dan tag penutup nya, jika sudah lupa disini saya akan memberitahu kembali:
* Tag pembuka diantara lain yaitu: <html>
<head>
<title></title>
<body>
* Dan untuk Tag penutup diantara nya yaitu: </body>
</head>
</html>
1. Membuat Table Sederhana
Baik lah sekarang saat nya belajar bagaimana memebuat table pada HTML. Kita mulai dulu dengan table yang sederhana dulu sehingga menuju table yang lebih rumit dan ruwet nanti nya. Sebelum saya teruskan, saya menyarankan untuk membuat table hanya untuk tabel. Jangan gunakan table sebagai layout web.
Ada 3 kompenen utama dalam pembuatan table yaitu :
1. Penenda Table <table>
2. Penenda Baris <tr>
3. Penanda Kolom <td>
Membuat table dengan tag HTML maka diperlukan beberapa tag untuk membentuknya seperti dibawah ini yang selalu di gunakan jika membuat table menggunakan HTML.
*Tag <table> </table> digunakan untuk membuka dan menutup table,
*Tag <tr> </tr> dugunakan untuk membentuk baris dalam sebuah table,
*Tag <td> </td> fungsi nya untuk membentuk kolom dalam table.
Dan ini adalah serangkaian contoh membuat table sederhana dengan 3 kolom dan 2 baris:
<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 1 baris kedua</td>
<td>kolom 2 baris kedua</td>
<td>kolom 3 baris kedua</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan menjadi seperti di bawah ini :
 | |||||||||||
| gambar 1.1 |
Bagaimana mudah bukan cara membuat nya,,,
2. Membuat Table Secara Kompleks
Dan selanjutnya kita akan mempelajari cara membuat table secara kompleks. Kompleks disini adalah sebuah tabel yang akan menggabungkan beberapa cell sesuai kebutuhanCELL yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Contohnya seperti ini:
Rumus rumus untuk membuat kode rumit diatas adalah seperti ini:
1. Buat dulu tag table
<table>
</table>
2. Ditengah nya kita masukkan beberapa baris table yang inggin kita buat. Misalnya kita membuat 3 baris
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
3. Sekarang kita membuat kolom nya. Dibaris pertama, kolom pertama, kolomnya
turun hingga baris ke-2 . Berarti ada dua baris yang digabungkan . Maka
atributnya ROWSPAN="2" .Sehingga jadi seperti ini.
<table>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
4. Kolom kedua baris pertama mengabungkan 4 kolom. Maka atributnya COLSPAN="4"
Sehingga jadi nya seperti ini.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
5. Berikut nya langsung saja ke kolom ke dua ke tiga ke empat dan ke lima.
Jadinya seperti ini:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>
Lihat kan? Saya cuma menambahkan 4 kolom saja di baris 2 karena kolom 1 kan sudah diambil oleh baris pertama sehingga kita hanya perlu menambah kekurangannya saja.
6. Baris ketiga karna tidak diambil alih, berarti tetap 5 kolom yang kita pasang.
Jadinya:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
7. Sekarang tinggal mengisi saja kolom kolom nya dengan text sesuka hati anda.
Dan ini lah hasil akhir nya.
<html>
<head>
<title>Table Arisan</title>
</style>
</head>
<body>
<p>ini table arisan pengajian ibu'-ibu' di dendang</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>Muharom</td>
<td>safar</td>
<td>robiul awal</td>
<td>robiul akhir</td>
</tr>
<tr>
<td>Cahyu</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>sari</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>
Maka kode kode di atas hasilnya akan menjadi seperti di bawah ini:
 |
| gambar 1.1 |
3. Membuat Table Dengan Heading
Sering kali dalam membuat table, kita gunakan sebagai judul kolom. Dan baris baris dibawah nya.Dan biasa nya baris pertama tabel ini secara visual di bedakan dengan baris dibawahnya agar tampak lebih menarik. Untuk keperluan ini tag HTML memiliki tag khusus yang bisa di gunakan, yaitu tag th singkatan dari table head.
Contoh penggunaan tag th pada html:
<html>
<head>
<title>tabel kompleks</title>
</head>
<body>
<h2>ini tabel yang telah menggunakan heading</h2>
<table>
<tr>
<th>nomer induk siswa</th>
<th>nama siswa</th>
</tr>
<tr>
<td>9977973950</td>
<td>cahyu astuti</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan menjadi seperti di bawah ini:
 |
| gambar 1.1 |
4. Membuat Table Formulir Isian
Selanjutnya kita akan membuat table formulir isian pada html. Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web kalian untuk berbagai macam keperluan, Misalnya untuk buku tamu,login ,regitrasi, dan lain sebagai nya. Dibandingkan skill pelajaran html lain nya seperti membuat paragraf, atau memasukkan gambar. Membuat formulir isian lebih sulit
Dibawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input:
 |
| gambar 1.1 |
Diatas adalah contoh dari form isian yang akan kalian pelajari disini, sekarang siap kan bahan bahan nya yaitu <form> <input> <option> dan <select>. Sekarang kalian perhatiakan di atas tiap baris mempunyai jenis input yang berbeda beda. Apa itu input? input adalah sesuatu yang dimaksudkan oleh pembaca halaman web kalian misalnya
*Text
*Password
*checkbox
*Radio
*Select
*Textarea
Langkah untuk membuat formullir isian:
1. Buka tag pembuka html
<html>
<head>
<title>INPUT DATA</title>
</head>
<body>
2. Kemudian masukkan kode form dan penanda baris pertama
<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>
3. Selanjutnya masukkan kode penanda baris kedua beserta penanda kolom, penanda kolom disini kita masukkan kata "NIM" .Penanda baris ketiga beserta penanda kolom nya, pada kolom pertama baris ketiga kita isikan dengan kta "Nama" , selanjutnya kolom ke dua baris ke tiga kita masukkan input type text. Kemudian kita masukkan input type text untuk baris kedua kolom kedua:
<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>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
4. Setelah itu,kita akan lanjutkan kepenanda baris ke empat, pada penanda baris ke empat masukkan juga penanda kolom. Kolom pertama baris ke empat isikan dengan "Jenis Kelamin". Sedangkan untuk penanda kolom pertama, baris ke empat masuk kode "input type radio", input type radio berguna untuk memilh salah satu pilihan yang tersedia. Contoh nya seperti dibawah ini:
<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>NIM</td>
<td><input type="text" size="20"></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>
5. Dan selanjutnya kepenanda baris ke lima, pada penanda baris ke lima kolom pertama isikan dengan kata
" Hobby" sedangklan untuk penanda kolom peretama baris kelima masukkan kode "input type checkbox", guna nya untuk memilih lebih dari satu. Contoh nya seperti dibawah ini:
<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>NIM</td>
<td><input type="text" size="20"></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>
6.Selanjutnya kita akan membuat penanda kolom dan baris berikutnya. Pada penanda kolom pertama kita isikan dengan kata"Fakultas". Dan pada penanda kolom pertama baris ke enam kita menggunakan kode option banyak data. Contoh nya seperti di bawah ini:
<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>NIM</td>
<td><input type="text" size="20"></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>
7. Maka pada penanda kolom dan penanda baris selanjut nya,pada penanda kolom pertama kita isikan dengan kata "Motto" dan pada penanda baris nya kita isikan dengan menggunaka kode textarea dengan rows=3 dan cols=25. Dan jangan lupa untuk memberi tag pembuka dan tag penutup textarea.
Contoh nya seperti dibawah ini:
<td>NIM</td>
<td><input type="text" size="20"></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>
8. Dan untuk tahap akhir kita akan menggunakan rata tengah denga kode "align=center" dan diberi colspan=2 untuk penanda kolom nya, setelah itu kita akan memberi kode input type= button, reset,
Maka hasil akhir nya akan menjadi seperti ini:
<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>NIM</td>
<td><input type="text" size="20"></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>
Gimana walau pun lumayan sulit, semoga kalian semua bisa mencobanya...!!
5. Mewarnai Table Pada HTML
Selanjut nya dalam pembuatan table terakihir disini kita akan mempelajari tentang mewarnai table.
Warna merupakan sesuatu yang sangat penting dalam kehidupan sehari hari tidak dapat dibayangkan jika tidak ada warna di dunia ini. Begitu juga dengan pembuatan table juga membutuhkan warna, supaya table yang kita buat agar terlihat lebih cantik dan menarik.Dalam pemilihan warna kita dapat melihat di HTML COLOR CODES
Dan ini lah langkah langkah untuk membuat table:
1. Buat tag pembuka html
<html>
<head>
<title>table dengan warna</title>
<body>
2. Selanjut nya, kita akan membuat ukuran table dan ukuran border nya dengan menggunakan kode seperti di bawah ini:
<html>
<head>
<title>table dengan warna</title>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="3">
3. Disini kita akan menggunakan heading (th) . Pada kolom pertama baris pertama kita isi kan dengan kata rowspan 3. Dan kita dapat menyisipkan warna dalam kolom pertama dengan menggunakan "bgcolor" warna dapat sesuakan dengan kemauan. Kode nya seperti dibawah ini:
<html>
<head>
<title>table dengan warna</title>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">rowspan 3</th>
4.Untuk baris pertama kita isi kan dengan Nama, Alamat, Telepon, dan Clospan 2. Namun disini kita menggunakan rumus rumus yang berbeda. Pada Nama, Alamat, dan Telepon kita menggunakan width untuk ukuran kolom nya, disini kita juga dapat menyisipkan warna pada table nya. Dan untuk clospan 2 kita tidak menggunaka width, namun menggunakan clospan="2" . Dan jangan lupa untuk memberi tag pembuka th dan tag penutup th. Ooh ya satu lagi pada Nama, Alamat, Telepon, dan Clospan 2 kita menggunakan kolom yang berbeda beda. Kode nya dapat dilihat dibawah ini:
<html>
<head>
<title>table 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 widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
5. Dan selanjut nya baris kedua kita. Dibaris kedua ini kita tinggal mengisikan Nama, Alamat, Telepon kita . Pada colspan 2 nya kita memberi width dan nbsp. Jika dibaris pertama kita menggunakan th atau heading, namun dibaris ini kita menggunkan td atau penanda kolom: Dan kode dapat dilihat dibawah ini:
<html>
<head>
<title>table 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 widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Cahyu</td>
<td align="center" bgcolor="#99CC66">Sidomukti</td>
<td bgcolor="#9966FF">082280718268</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
6. Dan untuk tahap akhir kita tinggal memberi kode penutup nya:
</table>
</body>
</html>
Maka ini lah hasil akhir nya yang sudah saya buat:
<html>
<head>
<title>table 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 widht="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telepon</th>
<th colspan="2" bgcolor="#FF9900">clospan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">Cahyu</td>
<td align="center" bgcolor="#99CC66">Sidomukti</td>
<td bgcolor="#9966FF">082280718268</td>
<td width="92" bgcolor="#9966FF"> </td>
<td width="92" bgcolor="#9966FF"> </td>
</tr>
</table>
</body>
</html>
Jika kita luncur kan maka hasil nya akan menjadi seperti di bawah ini:
 |
| gambar 1.1 |
Nahh,,,,!! Berakhir sudah penjelasan kita dalam pembuatan table saat ini, semoga apa yang saya jelaskan dapat bermanfaat bagi teman teman semua. Dan selamat mencoba,,,,!!!!
Tidak ada komentar:
Posting Komentar