Cara Membuat Tabel Di Blog

Tips and Trik | Tutorial Blogger | Information | Sharing for All



Cara Membuat Tabel Di Blog

Cara Membuat Tabel Di Blog

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas tentang Cara Membuat Tabel Di Blog. Perlu kita ketahui Tabel Berfungsi sebagai Alat Pembantu untuk memudahkan Pengaturan dan Pemisahan barang - barang seperti Nama, Kode, Harga atau Jika sekolahan digunakan untuk mengatur murid , kelas, nomer absen, dll... Tapi apakah ada Fungsi Tabel Untuk Blog ? Ya jelas ada dong, salah satunya kita gunakan untuk membuat Daftar HP/Gadget, Membuat List Tabel Daftar Blog Dofollow dan Daftar Social Bookmark, dll.... Nah, yang mungkin ini yang anda tanyakan untuk membuat itu semua memerlukan Tabel, Jadi, Bagaimana Membuat Tabel Di Blog Dengan CSS dan Mudah ? Saya akan menjawabnya , simak paragraf dibawah ini.

Cara Membuat Tabel Dengan CSS Di Blog :

Seperti yang saya ketahui untuk membuat Tabel kita harus mengerti dasar - dasarnya seperti :
  1. <TR>
  2. <TD>
  3. <TH>

dan ada juga Kode HTML Pembantu seperti :
  1. Border
  2. Cellpadding
  3. Cellspacing
  4. Width
  5. Dan Lain - Lain..

Tingkat 1 :
Contoh Paling Dasar adalah Membuat Tabel Secara Utuh atau Tanpa Garis :
Kode :

<table>

<tr>
     <td>Top Blog</td>
     <td>URL Blog</td>
     <td>Nice Article</td>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Tingkat 2 :
Oke lanjut ke tingkat kedua, Kita kan Membuat Tabel Dengan Garis :
Kode :

<table border="1">
<tr>
     <td>Top Blog</td>
     <td>URL Blog</td>
     <td>Nice Article</td>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog

Tingkat 3 :
Mungkin menurut anda contoh tabel atas terlalu kecil, oke kita akan bermain dengan Width :
Kode :

<table border="1" width="500">
<tr>
     <td>Top Blog</td>
     <td>URL Blog</td>
     <td>Nice Article</td>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Tingkat 4 :
Selanjutnya ViperGoy akan kasih Tutorial Membuat Tabel Dengan Judul Tabel atau Tabel Headers dengan :
Kode :

<table border="1">
<tr>
     <th>Top Blog</th>
     <th>URL Blog</th>
     <th>Nice Article</th>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>

<tr>
      <td>Blogger Buzz</td>
      <td>buzz.blogger.com</td>
      <td>Blogger Bringing Comment Google+ in Blogger</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Blogger Buzz buzz.blogger.com Blogger Bringing Comment Google+ in Blogger
Tingkat 5 :
Lanjut ke tingkat kelima. Kali ini membuat Tabel dengan CellSpacing dan CellPadding :

CellPadding :
Kode :

<table border="1" cellpadding="10" >
<tr>
     <th>Top Blog</th>
     <th>URL Blog</th>
     <th>Nice Article</th>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>

<tr>
      <td>Blogger Buzz</td>
      <td>buzz.blogger.com</td>
      <td>Blogger Bringing Comment Google+ in Blogger</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Blogger Buzz buzz.blogger.com Blogger Bringing Comment Google+ in Blogger

CellSpacing :
Kode :

<table border="1" cellspacing="10" >
<tr>
     <th>Top Blog</th>
     <th>URL Blog</th>
     <th>Nice Article</th>
</tr> 
<tr>
      <td>ViperGoy Blog</td>
      <td>www.vipergoy.com</td>
      <td>Cara Membuat Tabel Di Blog</td>
</tr>

<tr>
      <td>Blogger Buzz</td>
      <td>buzz.blogger.com</td>
      <td>Blogger Bringing Comment Google+ in Blogger</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Blogger Buzz buzz.blogger.com Blogger Bringing Comment Google+ in Blogger

Tingkat 6 :
Mungkin ini tutorial Tabel yang terakhir dari ViperGoy Blog deh. Cara Membuat Tabel Dengan Warna ini membuat tabel kita indah dan menarik langsung dicoba :
Kode :

<table border="1">
<tr>
     <th bgcolor="#aaaaaa">Top Blog</th>
     <th bgcolor="#aaaaaa">URL Blog</th>
     <th bgcolor="#aaaaaa">Nice Article</th>
</tr> 
<tr>
      <td bgcolor="#dddddd">ViperGoy Blog</td>
      <td bgcolor="#dddddd">www.vipergoy.com</td>
      <td bgcolor="#dddddd">Cara Membuat Tabel Di Blog</td>
</tr>
<tr>
      <td bgcolor="#dddddd">Blogger Buzz</td>
      <td bgcolor="#dddddd">buzz.blogger.com</td>
      <td bgcolor="#dddddd">Blogger Bringing Comment Google+ in Blogger</td>
</tr>
</table>

Hasil :

Top Blog URL Blog Nice Article
ViperGoy Blog www.vipergoy.com Cara Membuat Tabel Di Blog
Blogger Buzz buzz.blogger.com Blogger Bringing Comment Google+ in Blogger

Perlu Diingat !
Semuanya bisa anda jadikan satu dan mendapatkan Hasil yang menarik sekali. Jadi apakah anda ingin menyatukan Kode Pembantunya agar lebih baik dari ini ?

Sangat mudah sekali bukan ? Mari kita belajar dengan Paman ViperGoy lagi lain waktu hahaha...
Judul: Cara Membuat Tabel Di Blog
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Felix

Terima Kasih Atas Kunjungan Anda...
ViperShare :


12 comments:

  1. wah mantab banget nih trik

    come back http://googlepintar.blogspot.com/2013/06/cari-uang-lewat-ekioskucom.html

    ReplyDelete
  2. Nice post ndan, komentar juga disini ya http://tentangkita-indraka.blogspot.com/ thanks

    ReplyDelete
  3. paling males bikin tabel, ribet...hehehe

    ReplyDelete
  4. keren gan, ini bisa membuat widget rapi juga kan :)

    ReplyDelete
  5. thanks infonya gan
    comment back ya http://www.seeker-peace.blogspot.com/

    ReplyDelete
  6. terimakasih buat tutorialnya gan..
    baru ketemu ni tutorial disini.. :)
    kemaren pengen cari tapi belum sempet"
    salam dari saya blog Racara

    ReplyDelete
  7. terimakasih buat tutorialnya gan..
    baru ketemu ni tutorial disini.. :)
    kemaren pengen cari tapi belum sempet"
    salam dari saya blog KITASHARE.com

    ReplyDelete
  8. Wah bisa dicoba nih, ini yg saya cari"...TQ

    ReplyDelete
  9. terimakasih atas artikelnya; jelas, mendetail dan bermanfaat, i love..
    ngopi dulu gan,,
    http://pesankopiarabikaonline.blogspot.com/

    ReplyDelete
  10. sip bgt tipsnya
    boleh dicoba d http://tr.im/595rf ada iphone gratis perminggu

    ReplyDelete
  11. maaf juragan numpang link. terimakasih sebelumnya,


    http://detexsi.com/2014/12/resep-cara-membuat-cilok.html

    http://detexsi.com/2015/02/manfaat-vitamin-e-untuk-kesehatan.html

    http://www.detexsi.com/2015/02/bahaya-rokok-elektrik-bagi-elektrik.html

    http://www.detexsi.com/2015/02/sunnah-rasulullah-dalam-kehidupan.html

    http://detexsi.com/2014/03/cara-membuat-singkong-tela-tela-berbumbu_16.html

    ReplyDelete

 
Facebook Twitter Felix TM Group

2024 Copyright © ViperGoy Blog | Template Name's : Viper Black White | Template By: Felix Tirtamulia