Rabu, 19 Juni 2013

Cara Membuat Tabel di Blog


Cara Membuat Tabel di Blog – Mendengar kata tabel, pasti Anda akan teringat dengan aplikasi pengolah spreadsheet semacam Microsoft Excel. Kali ini Tips SEO + Blog – PC 123 akan membagikan tips bagaimana cara membuat tabel di blog. Tabel disini dibuat dengan kode HTML, dan umumnya diawali dengan kode <table>...</table>. Nah, didalam tabel kita dapat menambahkan beberapa parameter, seperti :

bgcolor : Berfungsi menentukan warna background tabel. Penggunaannya : bgcolor=’kode warna

align : Berfungsi menentukan perataan tulisan (alignment) dalam tabel. Penggunaanya : align=’left’, dimana variabel yang dapat digunakan adalah left (rata kiri), center (rata tengah), right (rata kanan).

cellpadding : Berfungsi mengatur jarak antara garis tabel dengan isi tabel. Penggunaannya : cellpadding=’(angka)’.

border : Berfungsi mengatur ketebalan garis tabel. Penggunaannya : border=’(angka)’. 
 
cellspacing: Berfungsi mengatur jarak antar sel. Penggunaannya : cellspacing=’(angka)’ . 
 
width : Berfungsi untuk mengatur lebar tabel. Penggunaannya : width=’(angka)’. 
 
height : Berfungsi mengatur lebal tabel. Penggunaanya : height=’(angka)’.

Parameter diatas dapat dipasangkan dalam semua atribut pendukung <table>. Contohnya :
<table width=’200’ height=’100’ color=’#ffff’ border=’2’>...</table>
<tr align=’center’ bgcolor=’#0000’>...</tr>
<td bgcolor=’#fff>...</td>
<th align=’left’ cellpadding=’2’ bgcolor=’#ffff’>...</th>
Dalam elemen <table>, terdapat beberapa elemen pendukung. Diantaranya <th> (Table Header), <td> (Table Data), serta <tr> (Table Row). Elemen Table Header berfungsi untuk membuat header (bagian atas) dari sebuah tabel. Table Data berfungsi untuk membuat kolom. Sedangkan Table Row berfungsi untuk membuat baris.

Masih bingung sampai sejauh ini? Oke. Untuk memperjelas penjelasan mengenai tabel ini, silahkan praktekkan beberapa contoh dibawah ini:
Contoh 1: Membuat Tabel dengan 1 Kolom dan 1 Baris.
<table width=‘500’ border=‘3’>
<tr>
<td>
Cara Membuat Tabel di Blog
</td>
</tr>
<table>
Previewnya kurang lebih akan terlihat seperti ini :

Cara Membuat Tabel di Blog

Contoh diatas menggunakan garis dengan tebal kurang lebih 1. Jika Anda ingin membuat tabel dengan garis yang lebih tebal lagi, masukkan angka dengan nilai lebih besar setelah border=.
Contoh 2: Membuat Tabel dengan 2 Kolom dan 1 Baris.
<table width=‘500’ border=‘7’>
<tr>
<td align=‘left’>
Cara Membuat Tabel di Blog
</td>
<td align=‘right’>
Pilih Wordpress atau Blogger?
</td>
</tr>
</table>
Previewnya akan terlihat seperti dibawah ini :

Cara Membuat Tabel di Blog Pilih Wordpress atau Blogger?

Contoh 3: Membuat Tabel dengan 2 Kolom, 2 Baris dan dengan Warna Berbeda
<table width=’500’ border=’1’>
<tr bgcolor=#FF0000>
<td align=‘left’>
Cara Membuat Tabel di Blog
</td>

<td align=‘right’>
Pilih Wordpress atau Blogger?
</td>

</tr>
<tr bgcolor=#F5E50A>
<td align=‘left’>
Cara Membuat Blog
</td>
<td align=‘right’>
Cara Mudah Mencari Backlink
</td>
</tr>
</table>
Previewnya kurang lebih akan terlihat seperti ini:
Cara Membuat Tabel di Blog Pilih Wordpress atau Blogger?
Cara Membuat Blog Cara Mudah Mencari Backlink

Selamat mencoba membuat tabel, dan salam blogger! Jangan lupa untuk mengklik tombol Google + 1 dibawah ya! Thanks!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

9 komentar:

  1. bagus ne tipsnya, buat pasang iklan bersebelahan di model pakai tabel kan jg bisa.. :D

    BalasHapus
  2. @Website Development : Bisa juga kok gan... Trims atas komentar dan kunjungannya... :)

    BalasHapus
  3. ane coba dulu gan..
    thanks.. :)

    BalasHapus
  4. gan punya ane ga kluar tabelnya...
    tp klo pas nulis kluar tabelnya, tp klo uda dipublikasikan g kluar tabelnya,,
    mohon koreksi novaibnu.blogspot.com

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. keren gan, makasih ilmunya. ijin share tapi saya edit tampilannya
    salam
    http://kyubhil.blogspot.com/

    BalasHapus
  7. sangat membantu gan, thanks a lot
    From www.hanibi.com

    BalasHapus
  8. mas, ada cara yg lebih mudah ngak, yg ngak pakai kode-kode an tp copi paste...

    BalasHapus
  9. @IC Creem : Bisa tolong berikan url postingnya, agar saya dapat melakukan pengecekan? Mungkin ada kode HTML yang salah ketik. Trims atas kunjungan dan komentarnya!
    @Tofik Hidayat : Oke gan, tapi jangan lupa untuk menyertakan link sumbernya. Trims!
    @Kemenag Karimun : Coba masuk ke sini. Trims atas kunjungan dan komentarnya! :)

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!