{"id":28179,"date":"2025-10-31T07:35:12","date_gmt":"2025-10-31T07:35:12","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=28179"},"modified":"2025-10-31T07:35:12","modified_gmt":"2025-10-31T07:35:12","slug":"tutorial-praktis-membuat-tabel-responsif-di-wordpress","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress","title":{"rendered":"Tutorial Praktis: Membuat Tabel Responsif di WordPress"},"content":{"rendered":"<p><span class=\"suggestion_paragraphs result__para__0\" data-para=\"result__para__0\">Seringkali, penggunaan tabel di Gutenberg WordPress menghasilkan tampilan yang tidak adaptif dan kurang estetis. <\/span><span class=\"suggestion_paragraphs result__para__1\" data-para=\"result__para__1\"> Oleh karena itu, dalam panduan ini, kami akan menunjukkan cara membuat tabel yang responsive di WordPress dengan menggunakan plugin TablePress. <\/span><\/p>\n<p><span class=\"suggestion_paragraphs result__para__2\" data-para=\"result__para__2\"> Terkadang, kita perlu menyisipkan tabel dalam situs web untuk memberikan informasi penting kepada pengunjung. <\/span><span class=\"suggestion_paragraphs result__para__3\" data-para=\"result__para__3\"> Dalam WordPress, editor Gutenberg memudahkan kita untuk membuat tabel. <\/span><span class=\"suggestion_paragraphs result__para__4\" data-para=\"result__para__4\"> Namun, penting untuk dicatat bahwa fitur tabel di Gutenberg sangat terbatas. <\/span><span class=\"suggestion_paragraphs result__para__5\" data-para=\"result__para__5\"> Ini mengakibatkan pengguna tidak dapat melakukan banyak penyesuaian seperti mengatur ukuran, menambahkan tautan, atau menyisipkan gambar. <\/span><\/p>\n<p><span class=\"suggestion_paragraphs result__para__6\" data-para=\"result__para__6\">Selain itu, tidak semua plugin memiliki dukungan untuk tampilan responsive, yang mengakibatkan tampilan tabel berantakan saat diakses melalui perangkat seperti ponsel atau tablet. <\/span><span class=\"suggestion_paragraphs result__para__7\" data-para=\"result__para__7\"> Dalam panduan ini, kami akan membahas salah satu plugin yang dapat membantu menciptakan tabel yang responsive, yaitu TablePress. <\/span><span class=\"suggestion_paragraphs result__para__8\" data-para=\"result__para__8\"> Ikuti panduan di bawah ini. <\/span><\/p>\n<div class=\"entry-content\">\n<h3 class=\"wp-block-heading\"><span id=\"Mengenal_Plugin_TablePress\">Mengenal Plugin TablePress<\/span><\/h3>\n<p data-start=\"135\" data-end=\"322\">TablePress adalah salah satu plugin WordPress gratis yang berfungsi untuk membuat dan mengelola tabel data di dalam halaman atau postingan tanpa perlu menulis kode HTML. Dengan plugin ini, kamu bisa membuat tabel yang rapi, responsif, serta mudah dibaca \u2014 cocok untuk menampilkan daftar harga, perbandingan produk, jadwal, data statistik, maupun tabel informasi lainnya.<\/p>\n<p data-start=\"135\" data-end=\"322\">TablePress juga memungkinkan pengguna untuk mengimpor dan mengekspor tabel dalam berbagai format seperti Excel (.xls\/.xlsx), CSV, HTML, dan JSON, sehingga memudahkan pengelolaan data dalam jumlah besar.<\/p>\n<h3 class=\"wp-block-heading\"><span id=\"Membuat_tabel_responsive_di_WordPress\">Membuat tabel responsive di WordPress\u00a0<\/span><\/h3>\n<p>Pada panduan ini, kami akan menggunakan plugin TablePress untuk membuat tampilan tabel menjadi responsive. Berikut langkah-langkahnya.<\/p>\n<h4 data-start=\"97\" data-end=\"134\"><strong data-start=\"103\" data-end=\"134\">1. Instal Plugin TablePress<\/strong><\/h4>\n<p data-start=\"135\" data-end=\"208\">TablePress adalah plugin paling populer untuk membuat tabel di WordPress.<\/p>\n<p data-start=\"210\" data-end=\"230\"><strong>Langkah-langkah:<\/strong><\/p>\n<ol data-start=\"231\" data-end=\"401\">\n<li data-start=\"231\" data-end=\"269\">\n<p data-start=\"234\" data-end=\"269\">Masuk ke Dashboard WordPress.<\/p>\n<\/li>\n<li data-start=\"270\" data-end=\"318\">\n<p data-start=\"273\" data-end=\"318\">Klik Plugins \u2192 Add New (Tambah Plugin).<\/p>\n<\/li>\n<li data-start=\"319\" data-end=\"365\">\n<p data-start=\"322\" data-end=\"365\">Ketik di kolom pencarian: TablePress.<\/p>\n<\/li>\n<li data-start=\"366\" data-end=\"401\">\n<p data-start=\"369\" data-end=\"401\">Klik Install Now \u2192 Activate.<\/p>\n<\/li>\n<\/ol>\n<h4 data-start=\"408\" data-end=\"436\"><strong data-start=\"414\" data-end=\"436\">2. Buat Tabel Baru<\/strong><\/h4>\n<p data-start=\"437\" data-end=\"491\">Setelah aktif, kamu bisa langsung mulai membuat tabel.<\/p>\n<h3 data-start=\"493\" data-end=\"505\">Caranya:<\/h3>\n<ol data-start=\"506\" data-end=\"787\">\n<li data-start=\"506\" data-end=\"552\">\n<p data-start=\"509\" data-end=\"552\">Buka menu TablePress \u2192 Add New Table.<\/p>\n<\/li>\n<li data-start=\"553\" data-end=\"764\">\n<p data-start=\"556\" data-end=\"573\">Isi data berikut:<\/p>\n<ul data-start=\"577\" data-end=\"764\">\n<li data-start=\"577\" data-end=\"639\">\n<p data-start=\"579\" data-end=\"639\">Table Name \u2192 nama tabel (contoh: Daftar Harga Produk).<\/p>\n<\/li>\n<li data-start=\"643\" data-end=\"693\">\n<p data-start=\"645\" data-end=\"693\">Description (opsional) \u2192 keterangan tabel.<\/p>\n<\/li>\n<li data-start=\"697\" data-end=\"764\">\n<p data-start=\"699\" data-end=\"764\">Number of Rows &amp; Columns \u2192 tentukan jumlah baris dan kolom.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"765\" data-end=\"787\">\n<p data-start=\"768\" data-end=\"787\">Klik Add Table.<\/p>\n<\/li>\n<\/ol>\n<h4 data-start=\"794\" data-end=\"835\"><strong data-start=\"800\" data-end=\"835\">3. Masukkan Data ke Dalam Tabel<\/strong><\/h4>\n<p data-start=\"836\" data-end=\"857\">Setelah tabel dibuat:<\/p>\n<ul data-start=\"858\" data-end=\"1063\">\n<li data-start=\"858\" data-end=\"909\">\n<p data-start=\"860\" data-end=\"909\">Isi setiap sel dengan teks, angka, atau tautan.<\/p>\n<\/li>\n<li data-start=\"910\" data-end=\"981\">\n<p data-start=\"912\" data-end=\"981\">Kamu bisa menambah atau menghapus baris\/kolom sesuai kebutuhan.<\/p>\n<\/li>\n<li data-start=\"982\" data-end=\"1063\">\n<p data-start=\"984\" data-end=\"1063\">Untuk menebalkan teks atau menambahkan link, gunakan ikon di atas tabel editor.<\/p>\n<\/li>\n<\/ul>\n<h4 data-start=\"1070\" data-end=\"1134\"><strong data-start=\"1076\" data-end=\"1134\">4. Aktifkan Fitur Responsif (Agar Tampilan Rapi di HP)<\/strong><\/h4>\n<p data-start=\"1135\" data-end=\"1296\">Secara default, TablePress belum otomatis responsif. Tapi kamu bisa menambahkan Extension (Add-on) resmi dari TablePress atau pakai kode CSS sederhana.<\/p>\n<p data-start=\"1298\" data-end=\"1346\"><strong>Opsi 1: Gunakan Extension Resmi (Disarankan)<\/strong><\/p>\n<ol data-start=\"1347\" data-end=\"1711\">\n<li data-start=\"1347\" data-end=\"1490\">\n<p data-start=\"1350\" data-end=\"1490\">Buka situs resmi TablePress \u2192 <a class=\"decorated-link cursor-pointer\" target=\"_new\" rel=\"noopener\" data-start=\"1380\" data-end=\"1488\">https:\/\/tablepress.org\/extensions\/responsive-tables\/<\/a><\/p>\n<\/li>\n<li data-start=\"1491\" data-end=\"1542\">\n<p data-start=\"1494\" data-end=\"1542\">Download file Responsive Tables Extension.<\/p>\n<\/li>\n<li data-start=\"1543\" data-end=\"1617\">\n<p data-start=\"1546\" data-end=\"1617\">Upload ke WordPress lewat menu TablePress \u2192 Extensions \u2192 Add New.<\/p>\n<\/li>\n<li data-start=\"1618\" data-end=\"1711\">\n<p data-start=\"1621\" data-end=\"1711\">Aktifkan mode responsif dengan memilih &#8220;Enable responsive tables&#8221; di pengaturan tabel.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"1713\" data-end=\"1745\"><strong>Opsi 2: Tambahkan CSS Manual<\/strong><\/p>\n<p data-start=\"1746\" data-end=\"1773\">Jika kamu ingin cara cepat:<\/p>\n<ol data-start=\"1774\" data-end=\"1981\">\n<li data-start=\"1774\" data-end=\"1832\">\n<p data-start=\"1777\" data-end=\"1832\">Masuk ke Appearance \u2192 Customize \u2192 Additional CSS.<\/p>\n<\/li>\n<li data-start=\"1833\" data-end=\"1960\">\n<p data-start=\"1836\" data-end=\"1859\">Tambahkan kode berikut:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\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-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-css\"><span class=\"hljs-selector-class\">.tablepress<\/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  <span class=\"hljs-attribute\">display<\/span>: block;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li data-start=\"1961\" data-end=\"1981\">\n<p data-start=\"1964\" data-end=\"1981\">Klik Publish.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"1983\" data-end=\"2072\">Sekarang tabel kamu bisa scroll horizontal di perangkat kecil seperti HP atau tablet.<\/p>\n<h4 data-start=\"2079\" data-end=\"2132\"><strong data-start=\"2085\" data-end=\"2132\">5. Masukkan Tabel ke Halaman atau Postingan<\/strong><\/h4>\n<p data-start=\"2133\" data-end=\"2181\">Setiap tabel punya shortcode unik, misalnya:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\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-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre!\">[table \u201c\u201d not found \/]<br \/>\n<br \/>\n<\/code><\/div>\n<\/div>\n<p data-start=\"2205\" data-end=\"2217\"><strong>Caranya:<\/strong><\/p>\n<ol data-start=\"2218\" data-end=\"2397\">\n<li data-start=\"2218\" data-end=\"2288\">\n<p data-start=\"2221\" data-end=\"2288\">Salin shortcode dari daftar tabel di TablePress \u2192 All Tables.<\/p>\n<\/li>\n<li data-start=\"2289\" data-end=\"2367\">\n<p data-start=\"2292\" data-end=\"2367\">Tempelkan ke halaman atau postingan di mana kamu ingin menampilkan tabel.<\/p>\n<\/li>\n<li data-start=\"2368\" data-end=\"2397\">\n<p data-start=\"2371\" data-end=\"2397\">Klik Update \/ Publish.<\/p>\n<\/li>\n<\/ol>\n<h4 data-start=\"2404\" data-end=\"2448\"><strong data-start=\"2410\" data-end=\"2448\">6. Kustomisasi Tampilan (Opsional)<\/strong><\/h4>\n<p data-start=\"2449\" data-end=\"2471\">Kamu bisa menambahkan:<\/p>\n<ul data-start=\"2472\" data-end=\"2686\">\n<li data-start=\"2472\" data-end=\"2512\">\n<p data-start=\"2474\" data-end=\"2512\">Header dan footer berbeda warna.<\/p>\n<\/li>\n<li data-start=\"2513\" data-end=\"2593\">\n<p data-start=\"2515\" data-end=\"2593\">Penyortiran dan pencarian otomatis (aktifkan \u201cUse DataTables features\u201d).<\/p>\n<\/li>\n<li data-start=\"2594\" data-end=\"2652\">\n<p data-start=\"2596\" data-end=\"2652\">Pagination (halaman tabel) untuk data yang banyak.<\/p>\n<\/li>\n<li data-start=\"2653\" data-end=\"2686\">\n<p data-start=\"2655\" data-end=\"2686\">Highlight baris saat hover.<\/p>\n<\/li>\n<\/ul>\n<h4 data-start=\"2693\" data-end=\"2735\"><strong data-start=\"2699\" data-end=\"2735\">7. Uji Tabel di Perangkat Mobile<\/strong><\/h4>\n<p data-start=\"2736\" data-end=\"2805\">Terakhir, buka halaman yang berisi tabel di HP atau tablet.<br \/>\nPastikan:<\/p>\n<ul data-start=\"2806\" data-end=\"2902\">\n<li data-start=\"2806\" data-end=\"2840\">\n<p data-start=\"2808\" data-end=\"2840\">Tabel bisa digeser horizontal.<\/p>\n<\/li>\n<li data-start=\"2841\" data-end=\"2862\">\n<p data-start=\"2843\" data-end=\"2862\">Teks tidak pecah.<\/p>\n<\/li>\n<li data-start=\"2863\" data-end=\"2902\">\n<p data-start=\"2865\" data-end=\"2902\">Tampilan tetap rapi dan mudah dibaca.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;28179&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Tutorial Praktis: Membuat Tabel Responsif di WordPress&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Seringkali, penggunaan tabel di Gutenberg WordPress menghasilkan tampilan yang tidak adaptif dan kurang estetis. Oleh karena itu, dalam panduan ini, kami akan menunjukkan cara membuat tabel yang responsive di WordPress dengan menggunakan plugin TablePress. Terkadang, kita perlu menyisipkan tabel dalam situs web untuk memberikan informasi penting kepada pengunjung. Dalam WordPress, editor Gutenberg memudahkan kita untuk [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":28180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"no","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[{"account":"twitter_2392824914_2392824914","service":"twitter","timestamp":1761896127,"status":"error"}],"rop_publish_now_status":"done","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[8],"tags":[13483,13482,269,249],"class_list":["post-28179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-membuat-tabel-responsive-di-wordpress","tag-mengenal-plugin-tablepress","tag-plugin","tag-wordpress"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog<\/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:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Seringkali, penggunaan tabel di Gutenberg WordPress menghasilkan tampilan yang tidak adaptif dan kurang estetis. Oleh karena itu, dalam panduan ini, kami akan menunjukkan cara membuat tabel yang responsive di WordPress dengan menggunakan plugin TablePress. Terkadang, kita perlu menyisipkan tabel dalam situs web untuk memberikan informasi penting kepada pengunjung. Dalam WordPress, editor Gutenberg memudahkan kita untuk [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-31T07:35:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fitri Ana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fitri Ana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\"},\"author\":{\"name\":\"Fitri Ana\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\"},\"headline\":\"Tutorial Praktis: Membuat Tabel Responsif di WordPress\",\"datePublished\":\"2025-10-31T07:35:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\"},\"wordCount\":551,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png\",\"keywords\":[\"Membuat tabel responsive di WordPress\",\"Mengenal Plugin TablePress\",\"Plugin\",\"WordPress\"],\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\",\"url\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\",\"name\":\"Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png\",\"datePublished\":\"2025-10-31T07:35:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Praktis: Membuat Tabel Responsif di WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\",\"name\":\"Fitri Ana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"caption\":\"Fitri Ana\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog","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:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress","og_locale":"en_US","og_type":"article","og_title":"Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog","og_description":"Seringkali, penggunaan tabel di Gutenberg WordPress menghasilkan tampilan yang tidak adaptif dan kurang estetis. Oleh karena itu, dalam panduan ini, kami akan menunjukkan cara membuat tabel yang responsive di WordPress dengan menggunakan plugin TablePress. Terkadang, kita perlu menyisipkan tabel dalam situs web untuk memberikan informasi penting kepada pengunjung. Dalam WordPress, editor Gutenberg memudahkan kita untuk [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress","og_site_name":"Hosteko Blog","article_published_time":"2025-10-31T07:35:12+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess-1024x576.png","type":"image\/png"}],"author":"Fitri Ana","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fitri Ana","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress"},"author":{"name":"Fitri Ana","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0"},"headline":"Tutorial Praktis: Membuat Tabel Responsif di WordPress","datePublished":"2025-10-31T07:35:12+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress"},"wordCount":551,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png","keywords":["Membuat tabel responsive di WordPress","Mengenal Plugin TablePress","Plugin","WordPress"],"articleSection":["Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress","url":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress","name":"Tutorial Praktis: Membuat Tabel Responsif di WordPress - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png","datePublished":"2025-10-31T07:35:12+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/tutorial-praktis-membuat-tabel-responsif-di-wordpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Tutorial Praktis: Membuat Tabel Responsif di WordPress"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0","name":"Fitri Ana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","caption":"Fitri Ana"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/10\/ess.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=28179"}],"version-history":[{"count":1,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28179\/revisions"}],"predecessor-version":[{"id":28181,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28179\/revisions\/28181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/28180"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=28179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=28179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=28179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}