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.
Contoh 1: Membuat Tabel dengan 1 Kolom dan 1 Baris.
<table width=‘500’ border=‘3’>Previewnya kurang lebih akan terlihat seperti ini :
<tr>
<td>
Cara Membuat Tabel di Blog
</td>
</tr>
<table>
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 :
Contoh 3: Membuat Tabel dengan 2 Kolom, 2 Baris dan dengan Warna Berbeda
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!
bagus ne tipsnya, buat pasang iklan bersebelahan di model pakai tabel kan jg bisa.. :D
BalasHapus@Website Development : Bisa juga kok gan... Trims atas komentar dan kunjungannya... :)
BalasHapusane coba dulu gan..
BalasHapusthanks.. :)
gan punya ane ga kluar tabelnya...
BalasHapustp klo pas nulis kluar tabelnya, tp klo uda dipublikasikan g kluar tabelnya,,
mohon koreksi novaibnu.blogspot.com
Komentar ini telah dihapus oleh pengarang.
BalasHapuskeren gan, makasih ilmunya. ijin share tapi saya edit tampilannya
BalasHapussalam
http://kyubhil.blogspot.com/
sangat membantu gan, thanks a lot
BalasHapusFrom www.hanibi.com
mas, ada cara yg lebih mudah ngak, yg ngak pakai kode-kode an tp copi paste...
BalasHapus@IC Creem : Bisa tolong berikan url postingnya, agar saya dapat melakukan pengecekan? Mungkin ada kode HTML yang salah ketik. Trims atas kunjungan dan komentarnya!
BalasHapus@Tofik Hidayat : Oke gan, tapi jangan lupa untuk menyertakan link sumbernya. Trims!
@Kemenag Karimun : Coba masuk ke sini. Trims atas kunjungan dan komentarnya! :)