multimedia: Membuat Table Pada HTML

1.Membuat Table Sederhana

Baik teman-teman kali ini kita akan belajar bagaimana cara membuat Table pada HTML. Cara membuat Table pada HTML diperlukan tida tag dasar yaitu:

-penanda table<table>

-penanda baris <tr>

-penanda kolom<td>

Tag <table> untuk menandai sebuah Table,<tr> untuk membentuk garis,dan <td> untuk membentuk kolom. secara default nilai border =0, jadi table akan tampil pada browser tanpa bingkai. Untuk dapat menampilkan bingkai,maka nilai border harus diberi nilai minimal=1.
Jangan lupa jika sudah anda masukkan kode awalan maka anda juga harus memakai kode penutupnya juga.

</td>
</tr>
</table>

Contoh dibawah ini adalah serangkaian kode HTML untuk membuat 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 hasilnya browser akan menampilkanya seperti ini.

Gambar 1.1

Bagaimana apakah anda sudah paham bukan ??

2.Membuat Table Kompleks

Kali ini kita akan bahas bagaimana cara membut table yang kompleks . Kompleks disini adalah sebuah table yang akan menggabungkan beberapa cell sesuai kebutuhan contohnya seperti ini.

Gambar 1.2

Bagaimana cara membuatnya??

Rumus sederhana untuk membuat kode rumit diatas adalah seperti ini:

1.Buat dulu tag table

<html>
<head>
<title>Table Arisan</title>
</style>
</head>
<body>
<p>ini table arisan pengajian ibu-ibu didendang</p>
<table>
</table>

2.Ditengahnya table kita masukkan berapa baris table yang ingin kita buat. Misal contoh diatas kita buat sampai ada 3 baris

<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

3.Sekarang kita buat kolomnya. Dibaris pertama, kolom pertama, kolomnya turun hingga baris ke-2.Berarti ada 2 baris yang digabungkan, maka atributnya ROWSPAN="2" Sehingga jandinya seperti ini.

<table>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

4.Kolom ke-2 dibaris pertama menggabungkan 4 kolom. maka atributnya COLSPAN="4" sehingga jadinya seperti ini.

<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

5. Berikutnya baris kedua. Karena kolom pertama sudah diambil alih oleh kolom pertama baris pertama, maka sudah tidak perlu kita urus lagi. Jadi, langsung aja ke kolom kedua, ketiga, keempat dan kelima. 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 karena tidak ada yang 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-kolomnya dengan text sesuka hati. Dan inilah hasil akhir untuk tampilan diatas:

<html>
<head>
<title>Table Arisan</title>
<style type="text/CSS">
table, td,tr {
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>Muharom</td>
<td>safar</td>
<td>robiul awal</td>
<td>robiul akhir</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>
<tr>
<td>sari</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
<td>50.000</td>
</tr>
</table>
</body>
</html>

Selamat mencoba !!!

3.Membuat Table Dengan Heading

Kali ini kita akan mencoba membuat table dengan menggunakan heading.
Contohnya seperti ini.

Gambar 1.3

ini lah langkah-langkahnya:

1.Buka dulu kode pembuka HTML dan kodeTable

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>

2.Ditengahnya table kita masukkan penanda baris table pertama dan juga penanda heading yang ingin kita buat,sehingga jadinya seperti ini:

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>
<tr>
<th> nomor induk siswa</th>
<th> nama siswa</th>
</tr>

3.Lalu kita masukkan lagi penanda kode baris kedua dan kode kolom.

<html>
<head>
<title>table Heading</title>
</head>
<body>
<h2>ini table yang telah menggunakan heading</h2>
<table>
<tr>
<th> nomor induk siswa</th>
<th> nama siswa</th>
</tr>
<tr>
<td>9977974653 </td>
<td>Tri Nuryani</td>
</tr>
</table>
</body>
</html>

Mudah,,bukan?? selamat mencoba !!!!

4.Membuat Table Formulir Isian

Setelah selesai membuat table menggunakan heading kita akan melanjutkan membuat table formulir isian contohnya seperti ini:

Gambar 1.4

Langkah pertama adalah:
1. Buka kode pembuka HTML

<html>
<head>
<title>INPUT DATA</title>
</head>
<body>

2.Masukkan kode form dan kode 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.Lalu masukkan kode penanda baris kedua beserta penanda kolom , pada penanda kolom masukkan kata "NIM" kemudian di penanda kolom ke 2 baris 2 masukkan kode input type"text" 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>

4.Langkah selanjutnya masukkan penanda baris ke-3 beserta penanda kolomnya. pada kolom pertama baris ke-3 isikan kata "Nama",lalu kolom ke-2 baris ketiga masukkan "kode input type text" 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>

5.Jika sudah sampai pada penanda baris ke-3 maka kita akan lanjut ke penanda baris ke-4. pada penanda baris ke-4 masukkan juga penanda baris kolom. kolom pertama baris ke-4 isikan "Jenis Kelamin" sedangkan pada penanda kolom ke-2 baris ke-4 masukkan kode "input type radio" 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>

6.Maka langkah selanjutnya kita akan membuat penanda baris yang selanjutnya beserta penanda kolomnya. pada penanda kolom yang pertama ketikkan kalimat "Hoby" dan pada kolom selanjutnya berilah kode Input type="checkbox" seperti contoh 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>

7.Dan selanjutnya kita akan buat penanada baris yang ke-6 beserta penanda kolom nya. Pada penanda kolom yang pertama ketikkan kalimat "fakultas" kemudian pada penanda kolom selanjutnya masukkan kode select dan size nya=1. Kemudian pada optionya ketikkan nama-nama fakultasnya "Fakultas ilmu komputer,Fakultas Keguruan & Pendidikan,Fakultas kehutanan,Fakultas ekonomi dan yang terakhir adalah fakultas hukum." maka ini lah hasilnya.

<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>

8.Pada penanda baris selanjutnya dan juga kolom selanjutnya,pada kolom pertama kita akan mengisikan teks"motto" dan pada penanda baris selanjutnya kita akan membuat kode "textarea " dengan rows="3" dan cols="25" jangan lupa kasih juga tag penutup textarea</textare>
Inilah hasilnya:

<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>

9.Nah pada penanda baris yang terakhir ni kita akan memberi perataan tengah yaitu"align="center" kemudian pada penanda kolom kita sisipkan kode colspan="2" lalu kita juga akan menyisipkan kode input type"reset, dan button.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>
<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>

10.Jika sudah sampai seperti contoh diatas kita tinggal memberi kode penutupnya yaitu:

</table>
</form>
</body>
</html>

Maka inilah hasil akhirnya

<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>

Itulah kode-kode table formulir isian yang sudah saya contohkan. meskipun lumayan sulit jangan takut untuk mencobanya ,,,!!dan selamat mencoba!!

5.Membuat Table Warna
Baiklah kita akan melanjutkan pelajaran yang selanjutnya yaitu"Membuat Table Warna".
Kolom pada HTML table juga bisa diberi warna. untuk memberi warna pada kolom table diperlukan kode bgcolor="#" yang ditaruh pada tag yang akan diberi warna.
Tulis kode warna #33FF33 (ini kode untuk warna Hijau) dan sisipkan pada bgcolor yang ada dalam tag seperti diatas menjadi <td bgcolor=”#33FF33″>
Pilihan warna dengan kode seperti diatas cukup banyak dan bisa dilihat Html Color Codes.
Nah,sekarang kita buka dulu link HTML Color Codes. Pilih salah satu kode warna, misalnya #FF9900. (Jangan lupa taruh # didepan kode warna!)
Supaya lebih jelasnya saya akan memberikan contoh pembuatan table warna yang sudah pernah 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 luncurkan maka inilah hasilnya:

Gambar 1.5

Nah,,,Dengan berakhirnya pembahasan kita tentang membuat table warna maka berakhir pula rangkaian pelajaran tentang membuat table, Insyaallah kita akan melanjutkanya pada postingan selanjutnya.

multimedia

Minggu, 29 Maret 2015

Membuat Table Pada HTML

Tidak ada komentar:

Posting Komentar

Arsip Blog

blog teman