Bagi para webmaster yang sudah melanglangbuana sekian lama di dunia per-website-an dan per-blog-an pasti sudah pernah merasakan memposting sebuah tabel di website/blog. Ada yang sudah sangat mahir sehingga dengan lincah dan cepatnya mengetikkan kode-kode html untuk membuat tabel dengan berbagai kreasi. Tapi mungkin bagi yang baru belajar masih sedikit bingung. Seperti saya, yang sudah agak lupa bagaimana kode-kode html untuk membuat tabel.
Membuat tabel sederhana
Ini adalah contoh kode html untuk tabel dengan 2 kolom dan 1 baris dengan tebal border 1 pixel.
<table border=”1″>
<tr>
<td></td> <td></td>
</tr>
</table>
Untuk membuat baris baru, kita tinggal menuliskan kode <tr></tr>. Kalau sudah, di dalam baris tersebut kita isi tabel data yang kodenya <td></td>, maka akan jadi satu kolom, untuk menambah kolom kedua tinggal ditulis kode <td></td> lagi masih di dalam kode <tr></tr> tadi. Kalau sudah, tampilan kode2 di atas pada browser kurang lebih akan seperti ini :
Terlihat lucu bukan? tabel itu harus berisi teks, kalau tidak maka tampilannya ya seperti itu.
Kita lihat tampilannya setelah diisi teks :
<table border=”1″>
<tr>
<td>kolom pertama</td> <td>kolom kedua</td>
</tr>
</table>
kalau kode2 ini dibaca akan tampil :
| kolom pertama | kolom kedua |
Lebar kolom pada tabel itu akan menyesuaikan dengan panjang tulisannya. Untuk supaya tabel terlihat rapi, kita perlu mengatur lebar kolom(column width)
kode tadi kita tambahkan :
<table border=”1″ width=”100%”>
<tr>
<td width=”30%”>kolom pertama</td> <td>kolom kedua</td>
</tr>
</table>
maka kurang lebih hasilnya akan seperti ini ,
| kolom pertama | kolom kedua |
Untuk membuat beberapa baris lagi di bawahnya, tinggal tambahkan kode <tr></tr> tadi setelah kode </tr> terakhir sehingga baris yang baru akan berada di bawahnya. Seperti ini,
<table border=”1″ width=”100%”>
<tr>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
<tr>
<td width=”30%”>kolom pertama</td>
<td>kolom kedua</td>
</tr>
</table>
hasilnya,
| kolom pertama | kolom kedua |
| kolom pertama | kolom kedua |
Sebenarnya masih banyak kostumisasi tabel supaya tabel bisa tampil lebih menarik seperti membuat background, menyisipkan gambar, membuat bingkai, dll. Tapi ini baru dasarnya saja.
met blajarrr............