Cara Membuat Tabel di Blog dengan Mudah & Responsive - Kali ini saya akan bagikan sedikit tips bagi anda tentang Cara Membuat Tabel di Blog dengan Mudah & Responsive. Membuat Table di Blog mungkin menurut saya sangat dibutuhkan bagi Blogger yang bertemakan Template Blog. Untuk membuat keterangan dari sebuah artikel di blog, terkadang kita membutuhkan tabel. Tabel tersebut biasanya di gunakan untuk membuat keterangan suatu artikel, agar tabel tersebut bisa memperjelas maksud artikel tersebut.
Cara ini Saya dapatkan dari Blognya TUTORIALUMUM, menurut saya di blognya Tutorial Umum isinya sangat lengkap apalagi tentang Tutorial Blogger. Fungsi Tabel keterangan ini biasanya memudahkan pengunjung blog anda agar bisa melihat fitur-fitur apa saja yang terdapat pada postingan kita, ada beberapa contoh yang digunakan orang dalam membuat sebuat tabel keterangan ini : Cara Membuat Responsive Table di Blogger dan keterangannya dan banyak lagi lainnya.
OKE kita Langsung saja ke Tahap Caranya :
Cara Menambahkan Skrip Kode CSS Tabel
- Langkah pertama masuk ke akun Blogger kalian.
- Pilih menu Tema, kemudian pilih Edit HTML.
- Cari skrip kode </style> atau ]]></b:skin>, kemudian masukan skrip kode ini tepat di atasnya.
/* Tabel MR IVANCHAN */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}
- Lalu pilih Simpan tema.
Cara Memasang Tabel di Artikel Blog
- Langkah pertama pilih menu POS, kemudian pilih Entri baru.
- Jika kalian ingin memasukan tabelnya tepat di tengah artikel, copy kalimat terakhir di dalam paragraf tersebut.
- Kemudian masuk ke tab HTML.
- Tekan CTRL + F kemudian cari kalimat yang sudah di copy tadi di tab HTML.
- Setelah kalimat tadi di temukan, cari kode </div>, kemudian beri jarak pada paragraf sesudahnya seperti ini.
- Kemudian masukan skrip kode ini tepat di tengah-tengah jarak antar paragraf tadi.
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Judul Tabel 1</th> <th>Judul Tabel 2</th> </tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
</tbody></table>
- Ganti tulisannya sesuai keinginan kalian.
Demikian tutorial dari saya tentang Cara Membuat Tabel di Blog dengan Mudah & Responsive. Bila ada kata-kata yang kurang berkenaan saya mohon maaf. Untuk mendapatkan Tutorial-Tutorial lainnya bisa anda subscribe feedburner saya via Email. Terima kasih sudah berkunjung di blog saya ini, jika ada pertanyaan mengenai cara membuat tabel ini, silahkan masukan di kolom komentar atau lewat Laman Contact Us.
Regards,
Mr Ivanchan
Regards,
Mr Ivanchan
Share This :
0 komentar
*Berkomentarlah dengan bijak dan sopan, mari kita budayakan bertutur kata yang baik dan saling menghormati. Mohon maaf bila komentar Anda yang tidak memenuhi kriteria tersebut akan saya hapus. Bila Anda ingin memberikan saran, kritik, masukan yang membangun, dan memberikan tambahan materi bila ada kekurangan pada artikel yang sedang dibahas dengan senang hati saya persilakan, terima kasih...