Membuat Tabel di Posting Blog

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. Kalau Anda tertarik mempelajari HTML lebih dalam silakan kunjungi HTMLisEasy.com untuk bahasa Inggris atau klik Di sini untuk yang berbahasa Indonesia. Selamat belajar!

Cara Lebih Mudah Posting Tabel Di blog

Untuk yang masih bingung dengan cara HTML saya di atas, mungkin Anda sangat tertarik (saya sangat yakin yang lebih mudah akan lebih menarik… :)) ada cara yang lebih mudah. Ikuti saja link berikut ini…  silakan di klik biar situsnya kelihatan…🙂

4 Tanggapan to “Membuat Tabel di Posting Blog”

  1. ohara Says:

    Bgmn agar garis yang tengah dapat digeser-geser juga?

  2. kickymaulana Says:

    ne yang aku cari.makasi mas

  3. Membuat tabel diposting Blog « Andy Rachmat's Blog Says:

    […] 28 Oktober 2009 andirachmat69 Tinggalkan komentar Go to comments Untuk membuat tabel diposting Categories: 26523851 Komentar (0) Lacak Balik (0) Tinggalkan komentar Lacak […]

  4. joe Says:

    nice kang
    mau tanya juga ni
    kok tombol lihat blog sama pratinjau beda ya??gimana caranya biar blog jadi kayak yang di pratinjau???
    tlg d jwb ya kang,lwt email aja marbledevil@yahoo.com
    makasihh


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: