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

Referensi warna bisa dilihat pada posting saya Referensi Warna untuk HTML maupun CSS

Memang ada beberapa atribut yang tidak umum (bukan standard) seperti bordercolor, title dan beberapa lainya tapi saya pikir ini tidak perlu.

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.

Contoh sederhana tabel html

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td>one</td></tr>
<tr><td>two</td></tr>
<tr><td>three</td></tr>
</table>
one
two
three

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
</table>
one two
three four

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td>one</td><td rowspan=2>two</td></tr>
<tr><td>three</td></tr>
</table>
one two
three

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td rowspan=2>one</td><td>two</td></tr>
<tr><td>three</td></tr>
</table>
one two
three

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
<tr><td>five</td><td>six</td></tr>
</table>
one two
three four
five six

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td colspan=2 align=center>one</td></tr>
<tr><td>two</td><td>three</td></tr>
<tr><td>four</td><td>five</td></tr>
</table>
one
two three
four five

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td colspan=2 align=center>one</td></tr>
<tr><td>two</td><td>three</td></tr>
<tr><td colspan=2 align=center>four</td></tr>
</table>
one
two three
four

<table border="1" width="50%" cellspacing="5" cellpadding="0" bgcolor="#cccccc">
<tr><td colspan=2>one</td><td rowspan=2>three</td></tr>
<tr><td rowspan=2>four</td><td>five</td></tr>
<tr><td>six</td><td>seven</td></tr>
</table>
one three
four five
six seven

Saya pikir contoh diatas sudah cukup mewakili banyak model tabel yang mungkin saja suatu saat anda perlukan.

Kesimpulanya

Untuk menyusun sebuah tabel, kita harus mendeklarasikan awal dengan <table> dan diakhir dengan </table>
Setiap baris, harus dideklarasikan <tr> dan diakhiri dengan </tr>
Setiap kolom, harus menggunakan <th> dan </th> jika sebagai header, <td> dan </td> jika sebagai data.

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Karakter dan simbol khusus dalam html
    Umumnya html digunakan hanya untuk menampilkan informasi yang dapat dibaca yang ditampilkan dalam bentuk gambar, tulisan, atau tabel. Sehingga simbol ataupun karakter yang sering digunakan untuk keperluan menuliskan rumus biasanya akan ditampilkan dalam bentuk gambar, padahal sebenarnya html sudah menyediakan karakter/simbol tersebut dengan pengkodean khusus. Simbol dan karakter apa saja yang bisa kita gunakan dalam html? Simak artikel berikut.
  • Contoh penggunaan HTML5
    Pada tulisan sebelumnya, saya sudah mengenalkan sedikit tentang HTML5 yang meluputi fitur-fitur terbaru serta unggulan yang sudah disediakan dan bisa digunakan asalkan browsernya sudah mendukung. Berikut ini saya akan membuatkan beberapa contoh tag cara penulisan dan penggunaan HTML5.
  • Cara memasukkan gambar dalam halaman web
    Panduan cara memasukkan gambar dalam halaman web/blog dengan kode html, lengkap dengan tips optimalisasinya. Untuk memasukkan gambar dalam web sekarang memang sudah dimudahkan dengan bantuan editor visual yang langsung membuat kode otomatis HTML secara instan, tapi tidak ada salahnya anda mengetahui cara teknis menyisipkanya.
  • Membuat tulisan berjalan dengan HTML
    Panduan lengkap dan mudah cara membuat animasi tulisan berjalan dengan HTML
  • Game Online dengan HTML5
    Teknologi HTML5 memang menjadi bahan perbincangan bagi para pengembang web, karena teknologi yang dihadirkan pada versi HTML5 ini memang luar biasa. Bahkan sekarang sudah banyak game/permainan online dibuat dengan HTML5 sehingga bisa dimainkan dengan cukup ringan dan tanpa perlu aplikasi bantu lainya selain browser.

Kiriman terbaru