Selasa, 24 Februari 2009

tips HTML: cara membuat tabel

Dalam memposting pada blog, kadang kita membutuhkan tabel untuk meletakkan gambar, membuat daftar atau skema. Berikut tips menulis dalam mode html untuk membuat tabel.

Sebelum Anda mengatur lebar, tinggi atau bentuk aturan lain pada tabel, silahkan tulis kode di bawah ini dalam posting Anda:


<TABEL width="100%" cellpadding="0" cellspacing="0" border="1">
<!-- Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
<TR>
<TD valign="top">Kolom 1</TD>
<TD valign="top">Kolom 2</TD>
<TD valign="top">Kolom 3</TD>
</TR>
<!-- End Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
</TABEL>


hasilnya sementara akan menjadi seperti ini:
Kolom 1Kolom 2Kolom 3


Untuk membuat baris ke-dua, ke-tiga dan seterusnya, Anda hanya tinggal menyalin mulai dari <TR> hingga </TR> dan meletakkan di bawahnya ( sebelum tag penutup </TABLE> )

Lihat Contoh:


<TABEL width="100%" cellpadding="0" cellspacing="0" border="1">
<!-- Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
<TR>
<TD valign="top">Kolom 1</TD>
<TD valign="top">Kolom 2</TD>
<TD valign="top">Kolom 3</TD>
</TR>
<!-- End Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
<!-- Baris ke dua. Tulisan ini tidak akan tercetak/tampil -->
<TR>
<TD valign="top">Kolom 1 baris ke-dua</TD>
<TD valign="top">Kolom 2 baris ke-dua</TD>
<TD valign="top">Kolom 3 baris ke-dua</TD>
</TR>
<!-- End Baris ke dua. Tulisan ini tidak akan tercetak/tampil -->
</TABEL>


Hasil sementara untuk tabel Anda dengan 3 kolom dan 2 baris akan seperti ini:
Kolom 1Kolom 2Kolom 3
Kolom 1 baris ke-duaKolom 2 baris ke-duaKolom 3 baris ke-dua


Mengatur lebar kolom

Sebagai contoh, kolom ke satu akan diisi dengan Nomor. Maka atur pada semua kolom ke satu dengan menambahkan perintah width="10%" sesudah tag <TD

Jika kolom kedua akan diisi dengan Nama, maka tambahkan setelah <TD perintah width="55%" pada semua tag kolom kedua

Untuk kolom ketiga kita beri ukuran sisanya adalah 35%.

Maka seharusnya tag yang Anda tulis seperti ini:


<TABEL width="100%" cellpadding="0" cellspacing="0" border="1">
<!-- Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
<TR>
<TD valign="top" width="10%">Nomor</TD>
<TD valign="top" width="55%">Nama</TD>
<TD valign="top" width="35%">Telpon</TD>
</TR>
<!-- End Baris ke satu. Tulisan ini tidak akan tercetak/tampil -->
<!-- Baris ke dua. Tulisan ini tidak akan tercetak/tampil -->
<TR>
<TD valign="top" width="10%">1</TD>
<TD valign="top" width="55%">W. Purnomosidi</TD>
<TD valign="top" width="35%">0217000xxx</TD>
</TR>
<!-- End Baris ke dua. Tulisan ini tidak akan tercetak/tampil -->
</TABEL>


Mari kita lihat hasil tabel nama Anda:
NomorNamaTelpon
1W. Purnomosidi0217000xxx


Menambahkan Kolom dan Baris

Seperti pada contoh di atas, Anda tinggal menambahkan tag dari TR ke bawah dengan jumlah yang sama untuk menambah baris baru. Sedangkan untuk menambahkan kolom baru, sisipkan tag TD yang baru di setiap barisnya. Setiap baris akan dibuka dengan <TR> dan ditutup dengan </TR>

Mengatur Tampilan tabel
  • cellspacing = mengatur spaci antar cell. beri nilai selain 0 untuk memberi jarak
  • cellpadding = mengatur jarak tepi cell dengan konten/isi.
  • border = Beri nilai 0 jika Anda tidak ingin menampilkan border
  • valign = beri nilai top agar text mengapung di atas, middle untuk mengapung di tengah-tengah cell secara vertikal, bottom meletakkan text di bawah secara vertikal.
  • align = Tambahkan nilai center bila text ingin ditampilkan rata tengah secara horizontal, dan right untuk tampil rata kanan. Bila tidak diisi nilai, secara default akan tampil rata kiri.
  • bgcolor = tambahkan kode warna RGB untuk memberi background pada cell. Sebagai contoh, beri nilai #FF0000 maka warna background akan menjadi merah

Tabel juga dapat dibuat lebih menawan dengan sentuhan CSS (Cascading Style Sheet), sehingga untuk membuat aturan berbeda dan berulang-ulang, maka Anda hanya tinggal mengelompokan bagian dengan class atau id. Untuk CSS, akan dibahas pada artikel lain. Sementara ini Anda sudah bisa membuat tabel dengan HTML untuk menyusun daftar hutang ( .. eh... ) dan menampilkannya di blog Anda. Enjoy it..








8 komentar:

  1. http://www.indonesiateguh.blogspot.com
    bagus mas... terus jalan..kan...
    tambahkan header yang ada pada saya punya diatas.

    http://www.indonesiateguh.blogspot.com

    BalasHapus
  2. Halo Anonim..., kalo mau template yang nyetel ma template kamu, silahkan berkunjung ke www.speedbloggertemplate.co.cc

    ^_^

    BalasHapus
  3. infonya sangat bermanfa'at mas untuk aku yg bru blajar trim's

    BalasHapus
  4. gimana kalau tabelnya gk bisa soalnya udah dicoba tolong dong

    BalasHapus
  5. wooo ini to blogmu dulu mas, cool........
    aku nitip link ya mas, walopun nofollow sapa tau isoh nge-link, gapapa ya, yaaa..
    Tips-tricks blogger terbaru:
    Tips-Tricks Blogger

    BalasHapus
  6. nice tips, saya suka dengan HTML :P btw blognya tak openi wae piye mas Wid? ^_^

    BalasHapus
  7. numpang promo ah gan....
    http://outthisgenk.blogspot.com

    BalasHapus