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
<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
<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
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"> </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>
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.
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
- See more at:
http://www.zainalhakim.web.id/posting/membuat-tabel-dengan-html.html#sthash.lQZw9OhL.dpuf
Tidak ada komentar:
Posting Komentar