Cara Membuat Table di Postingan Blogger

Beberapa hari yang lalu saya ingin menambahkan table di artikel saya tetapi saya sangat bingung bagaimana caranya menambahkan table pada postingan di blogger karena menu untuk menambahkan table tidaklah ada dan setelah mencari sana sini akhirnya saya berhasil membuat table di postingan blogger. Jadi pada artikel kali ini saya ingin membagikan sedikit ilmu cara membuat table di postingan blogger.

Table sangatlah di perlukan jika Anda ingin menampilkan seperti speksifikasi produk, Review produk dan beberapa pembahasan tentang versus konten tertentu. Dalam kasus saya, saya ingin membuat table untuk menambahkan link download agar mudah dilihat dan enak dipandang.

Langkah Cara Membuat Table Sederhana di Postingan Blogger

Disini kita akan membuat table sederhana yang hanya dihias dengan border sebagai pembatasnya, Tetapi jika Anda mengingikan yang lebih bagus dan menarik Anda harus membacanya sampai bawah.

Untuk membuat table sederhana Anda hanya perlu mempaste script berikut ini ke dalam artikel Anda menggunakan mode HTML. Kode dibawah ini untuk 3 baris 3 kolom.

<table border="1" cellpadding="2" cellspacing="0" style="width: 400px;"><tbody>
<tr>
      <td>harry</td>      <td>garry</td>
    <td>tary</td>
    </tr>
<tr>
      <td>cintu</td>
      <td>mintu</td>
<td>dintu</td>
    </tr>
<tr>
      <td>re</td>
<td>be</td>
<td>ne</td>
</tr>
</tbody></table>

Jika ingin menggunakan 2 baris 2 kolom gunakan kode dibawah ini:

<table border="1" cellpadding="2" cellspacing="0" style="width: 400px;"><tbody>
<tr>
      <td>rony</td>
      <td>shony</td>
    </tr>
<tr>
      <td>pony</td>
      <td>tony</td>
    </tr>
</tbody></table>

Anda bisa mengganti nama yang ada dengan data yang Anda punya.

Langkah Cara Membuat Table Keren dan Menarik di Postingan Blogger

Pertama yang harus Anda lakukan adalah menambahkan beberapa css untuk mempercantik tampilan table kita nanti. Tapi terkadang ada beberapa template yang sudah menyediakan css khusus untuk mempercantik table.

Baca Juga : Cara Membuat Create With Love Pada Blogger 

1. Buka blogger.com pilih blog Anda setelah itu klik Template atau Tema jika menggunakan bahasa indonesia.

2. Setelah itu pilih Costumize atau Sesuaikan, Pilih Lanjutan Scrool sampai ke bawah sampai Anda ketemu dengan Add Css.

3. Lalu pastekan code atau script berikut ke kolom Add Css.

table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}
td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}
th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}
td {
background:#FAFAFA;
}
tr:nth-child(even) td {
background:#F1F1F1;
}
tr:nth-child(odd) td {
background:#E1DDDD;
}
tr td:hover {
background:#666;
color:#FFF
}

 4. Setelah itu klik simpan.

Terkadang Ada beberapa template yang tidak bisa di customize, Jadi caranya Anda perlu untuk meletakkan kode Css diatas, Tepat diatas tag </style> atau ]]></b:skin>

Nah setelah Anda menambahkan CSS di template Anda, Sekarang Anda bisa menambahkan script table pada artikel Anda.

Baca Juga : Cara Mengatasi Artikel Blog Masuk ke Hasil yang Diabakan Google

Pastikan pemasangan script berikut pada mode html tidak pada dalam mode compose.

     <table>
    <tbody>
    <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    </tr>
    <tr>
    <td>Table A</td>
    <td>Table B</td>
    <td>Table C</td>
    </tr>
    <tr>
    <td>Blogger</td>
    <td>Wordpress</td>
    <td>Joomla</td>
    </tr>
    <tr>
    <td>CSS3</td>
    <td>HTML5</td>
    <td>Javascript</td>
    </tr>
    <tr>
    <td>Sylesheet</td>
    <td>Script</td>
    <td>Coding</td>
    </tr>
    </tbody>
    </table>

Setelah Anda mengikuti tutorial Cara membuat table di postingan blogger dengan benar seharusnya Anda sudah dapat membuat table sendiri pada artikel Anda. Semoga Bermanfaat