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

Membuat tulisan berjalan dengan HTML

Dalam perintah HTML sudah tersedia perintah untuk menggerakkan objek berupa tulisan atau gambar dengan perintah <marquee>TEXT</marque>.
Dengan perintah tersebut objek yang berada diantaranya secara otomatis akan bergerak dari kanan kekiri secara horizontal. Untuk beberapa keperluan kita bisa tambahkan beberapa atribut bawaan yang bisa disesuaikan. Atribut adalah opsi pilihan yang bisa kita tempelkan pada perintah utama marquee. Beberapa atribut tersebut yaitu :

1. direction : digunakan untuk mengubah arah pergerakan. Atribut ini bisa diberi nilai : up (bawah ke atas), down (atas ke bawah), left (dari kanan ke kiri), dan right (dari kiri ke kanan).
2. scrollamount : digunakan untuk mengatur lompatan karakter pada tiap gerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar nilainya berarti akan semakin besar jarak lompatan karakternya sehingga akan cepat sampai ke titik akhir.
3. scrolldelay : digunakan untuk mengatur cepatnya pergerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar berarti semakin cepat pergerakanya.

Perubahan kombinasi nilai scrollamount dan scrolldelay akan sangat berpengaruh terhadap keceatan dan halus tidaknya pergerakan objek. Jadi harus diatur agar dilihat bagus.
Berikut saya contohkan penggunaan :

<marquee scrollDelay="10" scrollamount="3" direction="right

">Selamat datang di website saya</marquee>

Hasil tampilan kode diatas :
Selamat datang di website saya  Kita bisa juga tambahkan opsi agar pergerakan objek bisa dikontrol oleh mouse, sehingga jika korsur mouse digerakkan diatasnya maka objek berhenti bergerak, dan jika dipindah maka bergerak kembali. Berikut contoh kodenya :

<marquee onmouseover='this.stop()' onmouseout='this.start

()' direction="right" scrollDelay="10" scrollamount="3">

Selamat datang di website saya</marquee>

Hasil dari kode diatas :
Selamat datang di website saya

Bedakan kode dan hasilnya dari kode sebelumnya, ada tambahan onmouseover='this.stop()' onmouseout='this.start()' yang mempengaruhi pergerakan jalan dan berhenti objek.
Kode HTML diatas bisa anda gunakan untuk menambah animasi pada halaman blog/website anda. Caranya copy kode diatas dan sisipkan dalam blok body halaman web anda.

Semoga bermanfaat