.jpg)
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
Aalign : 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
Ggcolor : 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
|
|||
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"> </td>
<td
width="92" bgcolor="#9966FF"> </td>
</tr>
<tr>
<td
bgcolor="#FFFF00">UDIN</td>
<td align="center"
bgcolor="#FFFF00">Jl. Rencong</td>
<td
bgcolor="#FFFF00">23232</td>
<td
bgcolor="#FFFF00"> </td>
<td
bgcolor="#FFFF00"> </td>
</tr>
</table>
MemangAgak sedikit
sulit tapi memang kadang kala kita akan memerlukan susunan tabel seperti itu.
Contoh
sederhana tabel html
one
|
two
|
three
|
<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
|
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
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
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
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>four</td><td>five</td></tr>
</table>
one
two three
four five
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
colspan=2 align=center>four</td></tr>
</table>
one
two three
four
one
|
|
two
|
three
|
four
|
five
|
<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
one
|
|
two
|
three
|
four
|
|
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
bermanfaatuntuk temen2 semua..:)
.jpg "Cara membuat Tabel Penggajian/Arisan Menggunakan Microsoft Exel 2007")
.jpg "Cara Memasang Burung Twitter Di Blog")
.jpg "Perintah Dasar Membuat Table HTML")
.jpg "SEJARAH INTERNET")
