Membuat Tabel Keren Posting Blogger

Mungkin dari sobat blogger semua ada yang kebingungan untuk membuat sebuah tabel dalam postingan blogger, nah hal ini juga saya alami saat ingin membuat tabel pada blog saya yang lain, ada salah satu posting yang mengharuskan saya membuat tabel agar mempermudah pembaca memahami list yang saya tawarkan. Dan setelah walking sana sini akhirnya ketemu sama mainbom.com yang disalah satunya ada post cara membuat tabel kerena posting blogger.

Cara membuat tabel dalam posting blogger

Sebelum mencoba tabel yang saya maksudkan alangkah baiknya sobat liat dulu previewnya yang sudah saya sertakan dibawah ini. Kalo sebelum melihat sudah sobat pasang takutnya nanti ngga sesuai apa yang sobat inginkan. Dan setelah melihat previewnya sobat putuskan sendiri saja, mau ikut memasang atau tidak usah dipasang, karena saya tidak memaksa sobat harus pakai tabel ini,, hehe.

Lihat previewnya baik baik sob, kira kira sudah cocok ngga dengan keinginan sobat, kalau cocok silahkan comot dech, ngga bayar..

Header 1	Header 2	Header 3
kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3
kolom 1 baris 4	kolom 2 baris 4	kolom 3 baris 4

 

Langkah langkah pasang tabel

Kalau sudah cocok lihat previewnya lalu siapkan diri untuk mencoba pasang tabel pada blog sobat. Langsung saja dech ngga usah banyak oceh lagi,, yuk mari

• Pertama yang harus sobat lakukan adalah login akun blogger dan cari kode ]]></b:skin> pada edit html blog sobat, lalu pasang kode CSS berikut tepat diatasnya.

<!-- Nice Table Mainbom.com--> table th { padding-top: 7px; text-align: left; } .nice-table { border-collapse: collapse; border-spacing: 0; } .nice-table tr:first-child th { border-top: 0 none; } .nice-table th:first-child { border-left: 0 none; } .nice-table tr:first-child th:last-child { border-right-color: #5C6785; } .nice-table th { background-color: #5C6785; color: white; font-weight: bold; } .nice-table th, .nice-table td { border: 1px solid #EBEBEB; padding: 3px 10px; } .nice-table td { background-color: #E6E6E6; border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5; color: #444444; } .nice-table td:last-child { border-right-color: #E5E5E5; } .nice-table tr:nth-of-type(2n) td { background-color: #FFFFFF; border-right-color: #E5E5E5; } .nice-table.spaced-table td, .nice-table.spaced-table th { padding: 10px; } .nice-table.wide { width: 95%; } .nice-table.narrow { width: 75%; } .nice-table.narrower { width: 50%; } .nice-table.narrowest { width: 35%; } <!-- Nice Table Mainbom.com-->

• Setelah terpasang lalu simpan saja sob, keluar dan coba bikin posting dengan menyertakan kode berikut dalam postingan sobat. Pasang kodenya dalam kondisi penulisan HTML ya sob umumnya kan langsung Compose, nah untuk yang ini pakai yang HTML dulu.

<table class="nice-table" width="100%" ><tbody> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr> <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr> <tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr> <tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr> </tbody> </table>

• Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
• Disetiap kolom akan ada kode <td> dan </td>
• Disetiap baris akan ada kode <tr> dan </tr>
• "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel

Nah sekarang sobat bisa memakai tabel dalam posting jika nantinya ada postingan sobat yang mengharuskan disertakan tabel didalamnya. Silahkan dicoba membuat tabel keren posting blogger bagi yang minat, dan bagi yang ngga minat juga ngga apa apa kalau ngga mau nyoba. hehe.