Cara Membuat Tabel Keren & Responsive di Blogspot

Siapa di sini yang lagi mencari tutorial bagaimana cara membuat dan menampilkan tabel keren dan responsive di dalam artikel blog? Kalau kalian masuk ke artikel ini, kalian berada di jalan yang tepat 😎

Beberapa saat yang lalu, saya Googling cukup lama untuk mencari cara memodifikasi tampilan tabel di dalam artikel blog yang sudah terpasang di dalam template blogger ini.

Dan akhirnya saya menemukannya!! 😎

Thanks berattt untuk om ipung yang sudah berbagi tutorialnya dan izin untuk diposting ulang di dalam blog ini. Sumber artikelnya akan dicantumkan di bagian bawah postingan ini.

Cara Membuat Tabel Keren & Responsive di Blogspot

1. Untuk langkah pertama, silakan salin (copy) kode di bawah ini, untuk selanjutnya ditempelkan (paste) di atas kode ]]></b:skin> atau </style>

/* tabel modifikasi */ table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline} table{border-collapse:collapse;border-spacing:0}.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top}.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}.post-body table th {background:#747d8c}.post-body table tr th:hover{background:#57606f}.post-body table.tr-caption-container {border:1px solid #f6f8f9}.post-body table caption{border:none;font-style:italic}.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px}.post-body table tr:nth-child(even) > td {background-color:#ecf0f1}.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9}.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}.post-body td a:hover {color:#7f9bdf;border-color:#adbce0}.post-body td a[target="_blank"]:after {margin-left:5px}.post-body table.tr-caption-container td {border:none;padding:8px}.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto}.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important}table {max-width:100%;width:100%;margin:0 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:33.33%} table.columns-4 td.columns-cell{width:25%} 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 table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e}table tr:nth-child(odd):hover td {background:#b0b1b4}

2. Selanjutnya yang kalian butuhkan adalah kode HTML pembuatan tabel untuk ditampilkan di dalam postingan blog.

3. Buat postingan blog seperti biasa, lalu beralih ke mode tulis HTML dan salin (copy) kode di bawah ini:

         <table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody><tr><th>Jari Tangan Kanan:</th><th>Menekan Tombol:</th> </tr>
<tr><td>Jempol (Ibu Jari)</td><td>Spasi</td></tr>
 <tr><td>Telunjuk</td><td>U, J, dan M (dan: Y, H, dan N)</td></tr>
   <tr><td>Tengah</td><td>I, K, dan , (dibaca: koma)</td></tr>
  <tr><td>Manis</td><td>O, L, dan . (dibaca: titik)</td></tr>
<tr><td>Kelingking</td><td>P, : (dibaca: titik dua), dan ?(dibaca: tanda tanya)</td></tr>
</tbody> </table>

4. Selanjutnya coba publikasikan sebuah artikel sesuai dengan tutorial di atas.

Bagaimana kalau mau ditambahkan langsung di dalam artikel, tanpa menambahkan kode CSS di dalam template blogger?

Silakan gunakan kode di bawah ini untuk membungkus kode CSS yang ada di atas:

<style> posisi kode CSS </style>

Bagian untuk membungkus kode HTML, gunakan kode berikut:

<div class="table"> posisi kode HTML </div>

Selanjutnya cukup ditempelkan (paste) di dalam artikel blog, tepatnya di bagian mode tulis HTML View.

Referensi:
https://www.ipung.net/2019/12/cara-membuat-tabel-keren-responsif-di-dalam-postingan-blog.html

Labels: Blogger,

Kalian baru saja membaca artikel Cara Membuat Tabel Keren & Responsive di Blogspot. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.