Ticker

6/recent/ticker-posts

Membuat Tabel Pada 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 


2 Cara Membuat TABEL valid HTML5 perinsipnya sama, tinggal terserah mau pilih menggunakan cara yang mana.

Cara 1 :
Konversi Spreadsheet ke HTML menggunakan tool Tabliezer
cara buatnya :
  1. Buat dokumen di excel, => block data yang akan dikonversi => copy
  2. Untuk mengkonversi silahkan gunakan tool TABLIEZER  (http://tableizer.journalistopia.com)
  3. Paste kan hasil copy data dari excel tadi dikotak yang tersedia,
  4. Atur "Font Size", "Header Collor" dan "Font" sesuai selera,
  5. klik tombol "Tableizer it", akan muncul kode HTML, bukn COMPOSE
  6. Copy dan pastekan hasil konversi pada postingan sohib pada mode HTML
  7. Lihat deh hasilnya...kerenkan?!
ProdukHarga (Rp.) Vol.Total Harga
Ubi "madu" Cilembu (MENTAH)+Ongkos kirim   9000/kg  100 kg      900.000,-
Kompor dan Gas Elpizi 3kg    350.000,-      1 bh      350.000,-
Oven kue   400.000,-      1 bh`      400.000,-
Alat Pendukung      200.000,-
TOTAL   1.850.000,-

konversi Speadsheet ke HTML menggunakan"Tableizer(Konversi HTML)"  lumayan menarik-kan?

Cara 2 :
Konversi Spreadsheet ke HTML menggunakan tool Table generator
Cara membuatnya :
  • Buat dokumen di excel, => block data yang akan dikonversi => copy
  • Untuk mengkonversi gunakan tool TABLE GENERATOR (http://www.tablesgenerator.com)
  • Paste kan hasil copy data dari excel tadi dikotak yang tersedia,
  • Atur "Font Size", "Header Collor" dan "Font" sesuai selera,
  • klik tombol "Tableizer it", akan muncul kode HTML, bukn COMPOSE
  • Copy dan pastekan hasil konversi pada postingan sohib pada mode HTML
  • SELESAI

Posting Komentar

0 Komentar