{"id":3970,"date":"2025-08-19T19:24:07","date_gmt":"2025-08-19T12:24:07","guid":{"rendered":"https:\/\/www.jagowebdesign.com\/website\/?p=3970"},"modified":"2025-08-26T19:21:45","modified_gmt":"2025-08-26T12:21:45","slug":"cara-membuat-tabel-responsive-di-postingan-blogspot","status":"publish","type":"post","link":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/","title":{"rendered":"Cara Membuat Tabel Responsive di Postingan Blogspot"},"content":{"rendered":"<p class=\"\" data-start=\"225\" data-end=\"493\">Saat menulis artikel di Blogspot, ada kalanya kita perlu menyajikan data dalam bentuk tabel\u2014baik itu perbandingan produk, jadwal, daftar harga, atau data lainnya. Sayangnya, tabel bawaan di editor Blogspot sering tidak responsif, terutama saat dibuka lewat smartphone.<\/p>\n<p class=\"\" data-start=\"495\" data-end=\"739\">Jika tidak ditangani, tabel akan terpotong, meluber ke samping, atau sulit dibaca di layar kecil. Karena itu, penting untuk memahami <strong data-start=\"628\" data-end=\"673\">cara membuat tabel responsive di Blogspot<\/strong> agar tampilan blog tetap rapi dan profesional di semua perangkat.<\/p>\n<p class=\"\" data-start=\"741\" data-end=\"896\">Dalam panduan ini, kamu akan belajar langkah-langkah membuat tabel responsive menggunakan HTML dan CSS di Blogspot, lengkap dengan contoh kode dan tipsnya.<\/p>\n<hr class=\"\" data-start=\"898\" data-end=\"901\" \/>\n<h2 class=\"\" data-start=\"903\" data-end=\"942\">Mengapa Tabel Responsif Itu Penting?<\/h2>\n<p class=\"\" data-start=\"944\" data-end=\"1104\">Seiring meningkatnya pengguna internet dari perangkat mobile, <strong data-start=\"1006\" data-end=\"1023\">responsivitas<\/strong> menjadi faktor utama dalam pengalaman pengguna (UX). Tabel yang tidak responsif:<\/p>\n<ul data-start=\"1106\" data-end=\"1275\">\n<li class=\"\" data-start=\"1106\" data-end=\"1135\">\n<p class=\"\" data-start=\"1108\" data-end=\"1135\">Sulit dibaca di layar kecil<\/p>\n<\/li>\n<li class=\"\" data-start=\"1136\" data-end=\"1168\">\n<p class=\"\" data-start=\"1138\" data-end=\"1168\">Menurunkan kenyamanan pengguna<\/p>\n<\/li>\n<li class=\"\" data-start=\"1169\" data-end=\"1231\">\n<p class=\"\" data-start=\"1171\" data-end=\"1231\">Menyebabkan pengunjung keluar dari blog (bounce rate tinggi)<\/p>\n<\/li>\n<li class=\"\" data-start=\"1232\" data-end=\"1275\">\n<p class=\"\" data-start=\"1234\" data-end=\"1275\">Bisa merusak tampilan keseluruhan halaman<\/p>\n<\/li>\n<\/ul>\n<p class=\"\" data-start=\"1277\" data-end=\"1380\">Maka dari itu, pastikan setiap tabel yang kamu buat <strong data-start=\"1329\" data-end=\"1363\">bisa menyesuaikan ukuran layar<\/strong> secara otomatis.<\/p>\n<hr class=\"\" data-start=\"1382\" data-end=\"1385\" \/>\n<h2 class=\"\" data-start=\"1387\" data-end=\"1426\">Cara Dasar Membuat Tabel di Blogspot<\/h2>\n<p class=\"\" data-start=\"1428\" data-end=\"1494\">Sebelum membuatnya responsif, mari buat dulu struktur tabel biasa:<\/p>\n<h3 class=\"\" data-start=\"1496\" data-end=\"1522\">Contoh Tabel Sederhana<\/h3>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span><\/span> <span class=\"hljs-attr\">border<\/span>=<span class=\"hljs-string\">\"1\"<\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;No<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;Nama Produk<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;Harga<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">thead<\/span><\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Produk A<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Rp50.000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Produk B<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Rp75.000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tbody<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"1860\" data-end=\"1958\">Jika kamu tempelkan di editor Blogspot (HTML mode), tabel ini akan muncul. Namun, belum responsif.<\/p>\n<hr class=\"\" data-start=\"1960\" data-end=\"1963\" \/>\n<h2 class=\"\" data-start=\"1965\" data-end=\"2009\">Cara Membuat Tabel Responsive di Blogspot<\/h2>\n<p class=\"\" data-start=\"2011\" data-end=\"2146\">Untuk membuat tabel tersebut tampil bagus di semua perangkat, kamu perlu membungkusnya dengan <code data-start=\"2105\" data-end=\"2112\">&lt;div&gt;<\/code> dan menambahkan sedikit kode CSS.<\/p>\n<h3 class=\"\" data-start=\"2148\" data-end=\"2168\">Langkah-langkah:<\/h3>\n<h4 class=\"\" data-start=\"2170\" data-end=\"2201\">1. Tambahkan CSS Responsif<\/h4>\n<p class=\"\" data-start=\"2203\" data-end=\"2296\">Masuk ke <strong data-start=\"2212\" data-end=\"2232\">Tema &gt; Edit HTML<\/strong>, lalu cari <code data-start=\"2244\" data-end=\"2253\">&lt;\/head&gt;<\/code> dan tempelkan kode berikut <strong data-start=\"2281\" data-end=\"2295\">sebelumnya<\/strong>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-selector-class\">.table-responsive<\/span> {<br \/>\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;<br \/>\n  <span class=\"hljs-attribute\">overflow-x<\/span>: auto;<br \/>\n}<br \/>\n<span class=\"hljs-selector-class\">.table-responsive<\/span> <span class=\"hljs-selector-tag\">table<\/span> {<br \/>\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;<br \/>\n  <span class=\"hljs-attribute\">border-collapse<\/span>: collapse;<br \/>\n}<br \/>\n<span class=\"hljs-selector-class\">.table-responsive<\/span> <span class=\"hljs-selector-tag\">th<\/span>, <span class=\"hljs-selector-class\">.table-responsive<\/span> <span class=\"hljs-selector-tag\">td<\/span> {<br \/>\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span>;<br \/>\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ccc<\/span>;<br \/>\n  <span class=\"hljs-attribute\">text-align<\/span>: left;<br \/>\n}<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"2566\" data-end=\"2658\">Kode ini membuat tabel punya ruang scroll horizontal di layar kecil, sehingga tidak meluber.<\/p>\n<h4 class=\"\" data-start=\"2660\" data-end=\"2721\">2. Bungkus Tabel dengan <code data-start=\"2689\" data-end=\"2721\">&lt;div class=\"table-responsive\"&gt;<\/code><\/h4>\n<p class=\"\" data-start=\"2723\" data-end=\"2792\">Kembali ke editor artikel (mode HTML), lalu gunakan struktur berikut:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"table-responsive\"<\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;No<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;Nama Produk<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span><\/span>&gt;Harga<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">thead<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Produk A<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Rp50.000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Produk B<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span><\/span>&gt;Rp75.000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span><\/span>&gt;<br \/>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span><\/span>&gt;<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tbody<\/span><\/span>&gt;<br \/>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"3199\" data-end=\"3310\">Dengan cara ini, ketika dibuka dari smartphone, tabel akan bisa di-<em data-start=\"3266\" data-end=\"3274\">scroll<\/em> ke samping tanpa rusak tampilannya.<\/p>\n<hr class=\"\" data-start=\"3312\" data-end=\"3315\" \/>\n<h2 class=\"\" data-start=\"3317\" data-end=\"3355\">Tips Tambahan untuk Tabel Responsif<\/h2>\n<div class=\"_tableContainer_16hzy_1\">\n<div class=\"_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse\" tabindex=\"-1\">\n<table class=\"w-fit min-w-(--thread-content-width)\" data-start=\"3357\" data-end=\"3773\">\n<thead data-start=\"3357\" data-end=\"3378\">\n<tr data-start=\"3357\" data-end=\"3378\">\n<th data-start=\"3357\" data-end=\"3364\" data-col-size=\"sm\">Tips<\/th>\n<th data-start=\"3364\" data-end=\"3378\" data-col-size=\"md\">Penjelasan<\/th>\n<\/tr>\n<\/thead>\n<tbody data-start=\"3401\" data-end=\"3773\">\n<tr data-start=\"3401\" data-end=\"3478\">\n<td data-start=\"3401\" data-end=\"3431\" data-col-size=\"sm\">Gunakan <code data-start=\"3411\" data-end=\"3418\">thead<\/code> dan <code data-start=\"3423\" data-end=\"3430\">tbody<\/code><\/td>\n<td data-start=\"3431\" data-end=\"3478\" data-col-size=\"md\">Ini membantu Google memahami struktur tabel<\/td>\n<\/tr>\n<tr data-start=\"3479\" data-end=\"3549\">\n<td data-start=\"3479\" data-end=\"3509\" data-col-size=\"sm\">Jangan terlalu banyak kolom<\/td>\n<td data-start=\"3509\" data-end=\"3549\" data-col-size=\"md\">Maksimal 3\u20135 kolom agar nyaman di HP<\/td>\n<\/tr>\n<tr data-start=\"3550\" data-end=\"3621\">\n<td data-start=\"3550\" data-end=\"3593\" data-col-size=\"sm\">Hindari teks terlalu panjang dalam 1 sel<\/td>\n<td data-start=\"3593\" data-end=\"3621\" data-col-size=\"md\">Bikin tabel jadi melebar<\/td>\n<\/tr>\n<tr data-start=\"3622\" data-end=\"3704\">\n<td data-start=\"3622\" data-end=\"3652\" data-col-size=\"sm\">Tambahkan warna latar baris<\/td>\n<td data-start=\"3652\" data-end=\"3704\" data-col-size=\"md\">Misalnya: baris genap beda warna (striped table)<\/td>\n<\/tr>\n<tr data-start=\"3705\" data-end=\"3773\">\n<td data-start=\"3705\" data-end=\"3742\" data-col-size=\"sm\">Gunakan teks rata kiri atau tengah<\/td>\n<td data-start=\"3742\" data-end=\"3773\" data-col-size=\"md\">Sesuaikan dengan jenis data<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"sticky end-(--thread-content-margin) h-0 self-end select-none\">\n<div class=\"absolute end-0 flex items-end\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"\" data-start=\"3775\" data-end=\"3778\" \/>\n<h2 class=\"\" data-start=\"3780\" data-end=\"3813\">Variasi Desain Tabel Responsif<\/h2>\n<p class=\"\" data-start=\"3815\" data-end=\"3957\">Kalau kamu ingin tampilan tabel lebih menarik, bisa tambahkan variasi seperti <strong data-start=\"3893\" data-end=\"3922\">warna latar baris berbeda<\/strong>, atau <strong data-start=\"3929\" data-end=\"3945\">hover effect<\/strong>. Contohnya:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-selector-class\">.table-responsive<\/span> <span class=\"hljs-selector-tag\">tr<\/span><span class=\"hljs-selector-pseudo\">:nth-child<\/span>(even) {<br \/>\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f9f9f9<\/span>;<br \/>\n}<br \/>\n<span class=\"hljs-selector-class\">.table-responsive<\/span> <span class=\"hljs-selector-tag\">tr<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {<br \/>\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f1f1f1<\/span>;<br \/>\n}<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"4119\" data-end=\"4209\">Kode ini bisa kamu tempelkan bersama kode CSS sebelumnya di bagian <code data-start=\"4186\" data-end=\"4194\">&lt;head&gt;<\/code> template blog.<\/p>\n<hr class=\"\" data-start=\"4211\" data-end=\"4214\" \/>\n<h2 class=\"\" data-start=\"4216\" data-end=\"4260\">Alternatif: Gunakan Google Sheets (Embed)<\/h2>\n<p class=\"\" data-start=\"4262\" data-end=\"4379\">Jika kamu ingin menampilkan data tabel yang bisa di-<em data-start=\"4314\" data-end=\"4322\">update<\/em> tanpa masuk ke Blogspot, gunakan <strong data-start=\"4356\" data-end=\"4378\">Google Spreadsheet<\/strong>.<\/p>\n<h3 class=\"\" data-start=\"4381\" data-end=\"4401\">Langkah-langkah:<\/h3>\n<ol data-start=\"4403\" data-end=\"4701\">\n<li class=\"\" data-start=\"4403\" data-end=\"4468\">\n<p class=\"\" data-start=\"4406\" data-end=\"4468\">Buat data tabel di <a class=\"\" href=\"https:\/\/sheets.google.com\" target=\"_new\" rel=\"noopener\" data-start=\"4425\" data-end=\"4467\">Google Sheets<\/a>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"4469\" data-end=\"4540\">\n<p class=\"\" data-start=\"4472\" data-end=\"4540\">Klik <strong data-start=\"4477\" data-end=\"4539\">File &gt; Bagikan &gt; Dapatkan tautan yang dapat dilihat publik<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"4541\" data-end=\"4615\">\n<p class=\"\" data-start=\"4544\" data-end=\"4615\">Klik <strong data-start=\"4549\" data-end=\"4614\">File &gt; Publikasikan ke web &gt; pilih sheet &gt; format: HTML embed<\/strong>.<\/p>\n<\/li>\n<li class=\"\" data-start=\"4616\" data-end=\"4656\">\n<p class=\"\" data-start=\"4619\" data-end=\"4656\">Salin kode <code data-start=\"4630\" data-end=\"4640\">&lt;iframe&gt;<\/code> yang diberikan.<\/p>\n<\/li>\n<li class=\"\" data-start=\"4657\" data-end=\"4701\">\n<p class=\"\" data-start=\"4660\" data-end=\"4701\">Tempelkan ke editor Blogspot (HTML mode).<\/p>\n<\/li>\n<\/ol>\n<p class=\"\" data-start=\"4703\" data-end=\"4715\">Contoh kode:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span><\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-xxx\/pubhtml?widget=true<span class=\"hljs-symbol\">&amp;amp;<\/span><\/span>headers=false\" <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"300\"<\/span>&gt;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"4869\" data-end=\"4968\">Tabel ini akan otomatis menyesuaikan dan tampil responsif, selama kamu mengatur lebarnya ke <code data-start=\"4961\" data-end=\"4967\">100%<\/code>.<\/p>\n<hr class=\"\" data-start=\"4970\" data-end=\"4973\" \/>\n<h2 class=\"\" data-start=\"4975\" data-end=\"5023\">Kesalahan Umum Saat Membuat Tabel di Blogspot<\/h2>\n<div class=\"_tableContainer_16hzy_1\">\n<div class=\"_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse\" tabindex=\"-1\">\n<table class=\"w-fit min-w-(--thread-content-width)\" data-start=\"5025\" data-end=\"5342\">\n<thead data-start=\"5025\" data-end=\"5047\">\n<tr data-start=\"5025\" data-end=\"5047\">\n<th data-start=\"5025\" data-end=\"5037\" data-col-size=\"sm\">Kesalahan<\/th>\n<th data-start=\"5037\" data-end=\"5047\" data-col-size=\"sm\">Dampak<\/th>\n<\/tr>\n<\/thead>\n<tbody data-start=\"5070\" data-end=\"5342\">\n<tr data-start=\"5070\" data-end=\"5135\">\n<td data-start=\"5070\" data-end=\"5110\" data-col-size=\"sm\">Tidak membungkus tabel dengan <code data-start=\"5102\" data-end=\"5109\">&lt;div&gt;<\/code><\/td>\n<td data-col-size=\"sm\" data-start=\"5110\" data-end=\"5135\">Tabel rusak di mobile<\/td>\n<\/tr>\n<tr data-start=\"5136\" data-end=\"5208\">\n<td data-start=\"5136\" data-end=\"5175\" data-col-size=\"sm\">Memakai tabel bawaan dari Word\/Excel<\/td>\n<td data-col-size=\"sm\" data-start=\"5175\" data-end=\"5208\">Struktur HTML jadi berantakan<\/td>\n<\/tr>\n<tr data-start=\"5209\" data-end=\"5277\">\n<td data-start=\"5209\" data-end=\"5253\" data-col-size=\"sm\">Menggunakan tag <code data-start=\"5227\" data-end=\"5236\">&lt;table&gt;<\/code> di mode Compose<\/td>\n<td data-col-size=\"sm\" data-start=\"5253\" data-end=\"5277\">Bisa rusak formatnya<\/td>\n<\/tr>\n<tr data-start=\"5278\" data-end=\"5342\">\n<td data-start=\"5278\" data-end=\"5310\" data-col-size=\"sm\">Tidak mengecek tampilan di HP<\/td>\n<td data-start=\"5310\" data-end=\"5342\" data-col-size=\"sm\">UX buruk, pembaca bisa kabur<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"sticky end-(--thread-content-margin) h-0 self-end select-none\">\n<div class=\"absolute end-0 flex items-end\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr class=\"\" data-start=\"5344\" data-end=\"5347\" \/>\n<h2 class=\"\" data-start=\"5349\" data-end=\"5362\">Kesimpulan<\/h2>\n<p class=\"\" data-start=\"5364\" data-end=\"5496\">Membuat tabel di Blogspot memang mudah, tapi membuatnya <strong data-start=\"5420\" data-end=\"5469\">responsif dan enak dilihat di semua perangkat<\/strong> butuh sedikit penyesuaian.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saat menulis artikel di Blogspot, ada kalanya kita perlu menyajikan data dalam bentuk tabel\u2014baik itu perbandingan produk, jadwal, daftar harga, atau data lainnya. Sayangnya, tabel bawaan di editor Blogspot sering tidak responsif, terutama saat dibuka lewat smartphone. Jika tidak ditangani, tabel akan terpotong, meluber ke samping, atau sulit dibaca di layar kecil. Karena itu, penting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3971,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[38],"tags":[681],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website\" \/>\n<meta property=\"og:description\" content=\"Saat menulis artikel di Blogspot, ada kalanya kita perlu menyajikan data dalam bentuk tabel\u2014baik itu perbandingan produk, jadwal, daftar harga, atau data lainnya. Sayangnya, tabel bawaan di editor Blogspot sering tidak responsif, terutama saat dibuka lewat smartphone. Jika tidak ditangani, tabel akan terpotong, meluber ke samping, atau sulit dibaca di layar kecil. Karena itu, penting [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/\" \/>\n<meta property=\"og:site_name\" content=\"Demo Website\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-19T12:24:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T12:21:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.jagowebdesign.com\/website\/wp-content\/uploads\/2025\/05\/18.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Prabowo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prabowo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/\",\"url\":\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/\",\"name\":\"Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website\",\"isPartOf\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#website\"},\"datePublished\":\"2025-08-19T12:24:07+00:00\",\"dateModified\":\"2025-08-26T12:21:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jagowebdesign.com\/website\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Tabel Responsive di Postingan Blogspot\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#website\",\"url\":\"https:\/\/www.jagowebdesign.com\/website\/\",\"name\":\"Demo Website\",\"description\":\"Jagowebdesign.Com\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jagowebdesign.com\/website\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a\",\"name\":\"Prabowo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g\",\"caption\":\"Prabowo\"},\"url\":\"https:\/\/www.jagowebdesign.com\/website\/author\/prabowo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website","og_description":"Saat menulis artikel di Blogspot, ada kalanya kita perlu menyajikan data dalam bentuk tabel\u2014baik itu perbandingan produk, jadwal, daftar harga, atau data lainnya. Sayangnya, tabel bawaan di editor Blogspot sering tidak responsif, terutama saat dibuka lewat smartphone. Jika tidak ditangani, tabel akan terpotong, meluber ke samping, atau sulit dibaca di layar kecil. Karena itu, penting [&hellip;]","og_url":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/","og_site_name":"Demo Website","article_published_time":"2025-08-19T12:24:07+00:00","article_modified_time":"2025-08-26T12:21:45+00:00","og_image":[{"width":1280,"height":1280,"url":"http:\/\/www.jagowebdesign.com\/website\/wp-content\/uploads\/2025\/05\/18.jpeg","type":"image\/jpeg"}],"author":"Prabowo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Prabowo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/","url":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/","name":"Cara Membuat Tabel Responsive di Postingan Blogspot - Demo Website","isPartOf":{"@id":"https:\/\/www.jagowebdesign.com\/website\/#website"},"datePublished":"2025-08-19T12:24:07+00:00","dateModified":"2025-08-26T12:21:45+00:00","author":{"@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a"},"breadcrumb":{"@id":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-tabel-responsive-di-postingan-blogspot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jagowebdesign.com\/website\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Tabel Responsive di Postingan Blogspot"}]},{"@type":"WebSite","@id":"https:\/\/www.jagowebdesign.com\/website\/#website","url":"https:\/\/www.jagowebdesign.com\/website\/","name":"Demo Website","description":"Jagowebdesign.Com","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jagowebdesign.com\/website\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/b24c023a34fc35cfb3fda39721eda58a","name":"Prabowo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jagowebdesign.com\/website\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1bc109c913faa9626e422029786886e1?s=96&d=mm&r=g","caption":"Prabowo"},"url":"https:\/\/www.jagowebdesign.com\/website\/author\/prabowo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3970"}],"collection":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/comments?post=3970"}],"version-history":[{"count":1,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3970\/revisions"}],"predecessor-version":[{"id":3972,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/posts\/3970\/revisions\/3972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/media\/3971"}],"wp:attachment":[{"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/media?parent=3970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/categories?post=3970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jagowebdesign.com\/website\/wp-json\/wp\/v2\/tags?post=3970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}