Cara Membuat Tabel Keren Responsive di Blogger

Banyak yang bingung bagaimana cara membuat tabel di artikel blog. Tapi kalau sudah tahu, pasti ngomong "oohhh mudah banget nih!"

Sebenarnya gak mudah juga ya. Rumit dikit 😁

Coba lihat gambar tabel di atas. Berkesan, elegan, dan mewah banget. Kalau discroll, warnanya berubah2 tuh! Nah tabel di atas yang mau kita buatkan tutorialnya.

1. Masuk ke template blog > Edit HTML

2. Copas kode di bawah ini, 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}

3. Simpan perubahan template blogger.

Setelah template disimpan, selanjutnya kita beralih ke pembuatan postingan blog.

Di tahap ini kita membutuhkan kode HTML untuk pembuatan tabel di dalam artikel blog. Contoh kodenya seperti ini:

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody><tr><th>Nama Malaikat</th><th>Tugas Malaikat</th> </tr>
<tr><td>Jibril</td><td>Bertugas menyampaikan wahyu Allah kepada para nabi dan rasul.</td></tr>
<tr><td>Mikail</td><td>Bertugas mengatur rezeki, seperti menurunkan hujan, menumbuhkan tanaman, dan mengatur keseimbangan alam.</td></tr>
<tr><td>Israfil</td><td>Bertugas meniup sangkakala pada hari kiamat.</td></tr>
<tr><td>Izrail</td><td>Bertugas mencabut nyawa seluruh makhluk hidup.</td></tr>
<tr><td>Munkar</td><td>Bertugas menanyai orang yang sudah meninggal di alam kubur.</td></tr>
<tr><td>Nakir</td><td>Bertugas menanyai orang yang sudah meninggal di alam kubur (bersama Malaikat Munkar).</td></tr>
<tr><td>Raqib</td><td>Bertugas mencatat amal baik manusia.</td></tr>
<tr><td>Atid</td><td>Bertugas mencatat amal buruk manusia.</td></tr>
<tr><td>Malik</td><td>Bertugas menjaga pintu neraka.</td></tr>
<tr><td>Ridwan</td><td>Bertugas menjaga pintu surga.</td></tr>
</tbody> </table>

Silakan copas -- copy dan paste -- kode di atas ke pembuatan postingan blog, gaya tulis HTML (bukan compose). Dicoba saja dan lihat hasilnya 😎

Kode tabel HTML di atas bisa dikreasikan sendiri, ya!

Cara tanpa Mengedit Template Blog (Langsung)

Cara kedua yakni dengan tidak menambahkan kode CSS (tahap No. 2) ke dalam template blog. Artinya, kode CSS tersebut langsung dimasukkan dan digabung dengan kode tabel. Biar gak ribet 😁

Kode yang dibutuhkan yakni:

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

Penerapannya seperti berikut -- menggunakan kode CSS dan kode tabel HTML di atas, ditambahkan langsung ke artikel, mode tulis HTML dan publikasikan!

<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}</style>
<div class="table"><table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody><tr><th>Nama Malaikat</th><th>Tugas Malaikat</th> </tr>
<tr><td>Jibril</td><td>Bertugas menyampaikan wahyu Allah kepada para nabi dan rasul.</td></tr>
<tr><td>Mikail</td><td>Bertugas mengatur rezeki, seperti menurunkan hujan, menumbuhkan tanaman, dan mengatur keseimbangan alam.</td></tr>
<tr><td>Israfil</td><td>Bertugas meniup sangkakala pada hari kiamat.</td></tr>
<tr><td>Izrail</td><td>Bertugas mencabut nyawa seluruh makhluk hidup.</td></tr>
<tr><td>Munkar</td><td>Bertugas menanyai orang yang sudah meninggal di alam kubur.</td></tr>
<tr><td>Nakir</td><td>Bertugas menanyai orang yang sudah meninggal di alam kubur (bersama Malaikat Munkar).</td></tr>
<tr><td>Raqib</td><td>Bertugas mencatat amal baik manusia.</td></tr>
<tr><td>Atid</td><td>Bertugas mencatat amal buruk manusia.</td></tr>
<tr><td>Malik</td><td>Bertugas menjaga pintu neraka.</td></tr>
<tr><td>Ridwan</td><td>Bertugas menjaga pintu surga.</td></tr>
</tbody> </table></div>

Hasilnya seperti ini:

Nama Malaikat	Tugas Malaikat
Jibril	Bertugas menyampaikan wahyu Allah kepada para nabi dan rasul.
Mikail	Bertugas mengatur rezeki, seperti menurunkan hujan, menumbuhkan tanaman, dan mengatur keseimbangan alam.
Israfil	Bertugas meniup sangkakala pada hari kiamat.
Izrail	Bertugas mencabut nyawa seluruh makhluk hidup.
Munkar	Bertugas menanyai orang yang sudah meninggal di alam kubur.
Nakir	Bertugas menanyai orang yang sudah meninggal di alam kubur (bersama Malaikat Munkar).
Raqib	Bertugas mencatat amal baik manusia.
Atid	Bertugas mencatat amal buruk manusia.
Malik	Bertugas menjaga pintu neraka.
Ridwan	Bertugas menjaga pintu surga.

Sudah gak bingung lagi, kan? Yuk kreasikan tabel artikel blog di atas! 😉

Cara lainnya: Cara Membuat Tabel Sederhana (Simple) di Postingan Blog.

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

Labels: Blogger,
Terima kasih sudah membaca Cara Membuat Tabel Keren Responsive di Blogger! Bagikan artikelnya, ya!

Main Blog SEO Blogger sejak 2014. Teknik Komputer dan Jaringan (TKJ) Tahun 2012.

Berbagi :