Monday, April 15, 2013

Membuat Tabel Dengan HTML


Tabel adalah salah satu objek terpenting yang bisa kita gunakan untuk banyak keperluan. Tabel bisa digunakan untuk membuat laporan dengan HTML, bisa digunakan untuk menyusun objek lain seperti gambar atau tulisan, bahkan tabel juga bisa digunakan untuk menata layout tampilan web. Bagi anda yang sedang belajar bahasa pemrograman web seperti PHP atau yang lainya, tabel ini juga bagian terpenting yang harus anda ketahui karena bentuk laporan dari database tentunya akan disajikan dalam bentuk tabel. Bagaimana cara membuat tabel yang benar? dan bagaimana contohnya?
Pertama kita akan mengenal perintah-perintah yang berhubungan dengan membuat tabel.

Perintah Dasar Membuat Table HTML

Perintah dasar adalah perintah yang harus ada dalam sebuah susunan tabel, yaitu :
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
  </tr>
  <tr>
    <td>Johan</td>
    <td>Pulau Seribu</td>
  </tr>
</table>
Jika dilihat dari contoh kode membuat tabel html diatas maka sebuah tabel terdiri dari :
 <table>..</table> : digunakan sebagai tanda awal tabel
<tr>..<tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Dalam beberapa kasus, mungkin akan ditemui juga penggunaan perintah thead, tbody dan tfoot :
<table border="1" cellpadding=5 cellspacing="0">
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Tanggal</th>
      <th>Jumlah</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan</td>
      <td>01/01/2012</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Peb</td>
      <td>02/02/2012</td>
      <td>111</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan=2 align=left>Total</th>
      <th>211</th>
    </tr>
  </tfoot>
</table>
<thead>..</thead> : digunakan untuk mengelompokkan bagian header tabel
<tbody>..</tbody> : digunakan untuk mengelompokkan bagian data/isi tabel
<tfoot>..</tfoot> : digunakan untuk mengelompokkan bagian footer tabel

Secara tampilan, 3 perintah diatas tidak berpengaruh, hanya digunakan untuk pengembangan dengan css

Atribut Table HTML

Atribut adalah perintah tambahan yang ditempelkan pada perintah utama/dasar, atribut bersifat tidak pasti hanya digunakan jika diperlukan. Atribut meliputi :
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom


Berikut ini contoh lengkap dengan atribut :

Rowspan 3 Nama Alamat Telp. Colspan 2
ALI Jl. Ijo 11211
UDIN Jl. Rencong 23232
Susunan kodenya :
<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">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>
Agak sedikit rumit tapi memang kadangkala kita akan memerlukan susunan tabel seperti itu.

No comments :

Post a Comment

Kebahagiaan sejati bukanlah pada saat kita berhasil meraih apa yg kita perjuangkan, melainkan bagaimana kesuksesan kita itu memberi arti atau membahagiakan orang lain.

Follower

Google+ Followers

Translator

English French German Japanese Korean Chinese Russian Spanish
India Saudi Arabia Netherland Portugal Italian Philippines Ukraina Norwegia
Powered by
Widget translator