Cara Membuat Tabel Di Dalam Postingan Blog

Cara Membuat Tabel Di Dalam Postingan Blog - Pada postingan kali ini saya akan membahas tentang Blog, yaitu Bagaimana Cara membuat tabel di dalam postingan blog. Tabel memang sangat di butuhkan dalam dunia Blogging, karena tabel biasanya di gunakan didalam postingan yang di bahas. Misalnya : Jadwal Moto Gp, Jadwal Pertandingan sepak Bola. Tapi, apakah kalian tahu bagaimana cara membuat nya ??. Jangan Menyerah dulu, disini ada jawabannya kok.
Membuat Tabel itu susah-susah gampang, apalagi kalau buatnya langsung di Blog. Membutuhkan keterampilan dalam HTML atau semacamnya. Tapi, kalau ingin lebih mudah kalian bisa buat tabelnya di Microsft Word lalu copy dan pastekan di postingan kalian.
Tapi, kali ini kita akan membahas membuat Tabel dengan HTML langsung di blog.

 

Baca Juga : Cara mengatasi Template Blog yang Error

1. Tabel Pertama

Copy Script di Bawah lalu pastekan di Postingan Kalian.


<table width="200" border="1">
  <tr>
<div style="text-align: center;">
</div>
<table border="2" style="border-color: #0000ff; width: 100%;">
<tbody>
<tr style="background-color: blue; border-color: #0000ff; height: 20px;">
<td colspan="2" style="text-align: center; width: 50%;"><a href="http://www.febry24.com/2016/03/spesiskasi-dan-harga-hp-lenovo-a319.html" target="_blank"><span style="color: white; font-family: &quot;andale mono&quot; , &quot;times&quot;; font-size: 12pt;"><b>Spesifikasi HP Lenovo A319</b></span></a></td>
</tr>
<tr style="border-color: #0000ff; height: 20px;">
<td style="width: 50%;"><ul>
<li>Jaringan 2G GSMGPRS,EDGE</li>
<li>Jaringan 3G, HSPDA 21Mbps,HSUPA 5.76Mbps</li>
<li>Dual-SIM(microSIM) dual-stand by</li>
</ul>
</td>
<td style="width: 50%;"><ul>
<li>Kamera 5MP 2592 x 1944 pixels,Fixed-focus</li>
<li>Kamera depan 2MP,Fixed-focus</li>
<li>Video perekam ada</li>
</ul>
</td>
</tr>
<tr style="border-color: #0000ff; height: 20px;">
<td style="width: 50%;"><ul>
<li>Layar 4” TFT Capacitive Touchsreen, 16 juta warna</li>
<li>Resolusi 480 x 800 pixels(~233ppi pixels, density)</li>
</ul>
</td>
<td style="width: 50%;"><ul>
<li>Memory internal 4 GB, 512MB RAM</li>
<li>Memory eksternal microSD, up to 32GB</li>
</ul>
</td>
</tr>
</tbody></table>
  </tr>
</table>
Baca Juga : Cara Agar Blog Berada Di Halaman Pertama Google

Ganti Teks Yang Berwarna Merah Sesuai dengan keinginan kalian masing-masing. Dari Script diatas maka akan Menampilkan Bentuk Tabel Seperti ini :

Spesifikasi HP Lenovo A319
  • Jaringan 2G GSMGPRS,EDGE
  • Jaringan 3G, HSPDA 21Mbps,HSUPA 5.76Mbps
  • Dual-SIM(microSIM) dual-stand by
  • Kamera 5MP 2592 x 1944 pixels,Fixed-focus
  • Kamera depan 2MP,Fixed-focus
  • Video perekam ada
  • Layar 4” TFT Capacitive Touchsreen, 16 juta warna
  • Resolusi 480 x 800 pixels(~233ppi pixels, density)
  • Memory internal 4 GB, 512MB RAM
  • Memory eksternal microSD, up to 32GB


2. Tabel Kedua

Tabel Kedua ini hampir mirip dengan Tabel di atas, tapi sedikit lebih kecil dan bisa di edit seperti jadwal pertandingan atau jadwal moto Gp.

    <h4 style="text-align: center;">
    <span style="font-family: &quot;andale mono&quot; , &quot;times&quot;;">Harga Lenovo A319</span></h4>
    <table border="2" style="border-color: #9400d3; border-width: 2px; width: 100%;">
    <tbody>
    <tr style="background-color: darkviolet; height: 20px;">
    <td style="text-align: center; width: 33%;"><span style="color: white;"><b>Bulan/Tahun</b></span></td>
    <td style="text-align: center;"><span style="color: white;"><b>Baru</b></span></td>
    <td style="text-align: center; width: 33%;"><span style="color: white;"><b>Second</b></span></td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;">Desember 2015</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 900.000</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 700.000</td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;">Januari 2016</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 850.000</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 600.000</td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;">Februari 2016</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 850.000</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 600.000</td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;">Maret 2016</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 850.000</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 600.000</td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;">April 2016</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 85.000</td>
    <td style="border: 1px solid #9370d8; text-align: center;">Rp 550.000</td>
    </tr>
    <tr style="height: 20px;">
    <td style="border: 1px solid #9370d8; text-align: center;"></td>
    <td style="border: 1px solid #9370d8; text-align: center;"></td>
    <td style="border: 1px solid #9370d8; text-align: center;"></td>
    </tr>
    </tbody></table>
Jangan Lupa Ganti Text yang berwarna merah. Dan jika kalian ingin mengubah ukuran tabelnya kalian bisa mengganti <table border="2" style="border-color: #9400d3; border-width: 2px; width: 100%;">
<tbody>
<tr style="background-color: darkviolet; height: 20px;"> sesuai dengan ukuran yang kalian inginkan.
Dari HTML di atas maka tampilan tabelnya akan jadi seperti di bawah ini.

Harga Lenovo A319

Bulan/Tahun Baru Second
Desember 2015 Rp 900.000 Rp 700.000
Januari 2016 Rp 850.000 Rp 600.000
Februari 2016 Rp 850.000 Rp 600.000
Maret 2016 Rp 850.000 Rp 600.000
April 2016 Rp 85.000 Rp 550.000


Sekian Dari saya mungkin itu saja yang bisa saya sampaikan. Sebenarnya membuat tabel itu tidak se sulit yang kalian pikirkan, hanya kalian harus mempelajari tentang HTML. Jika kalian masih binggung atau masih pengin tahu lebih jelas lagi. Kalian bisa berkomentar dengan mengisi kolom komentar yang tersedia di bawah atau bisa berkontak langsung dengan saya...Terimakasih

Labels: ,