{"id":214,"date":"2025-08-17T12:25:56","date_gmt":"2025-08-17T12:25:56","guid":{"rendered":"https:\/\/www.warunginter.net\/2016\/08\/bagaimana-cara-membuat-table-yang.html"},"modified":"2025-08-17T12:25:56","modified_gmt":"2025-08-17T12:25:56","slug":"bagaimana-cara-membuat-table-yang-responsive-di-po","status":"publish","type":"post","link":"https:\/\/flycai.warunginter.net\/?p=214","title":{"rendered":"Bagaimana Cara Membuat Table Yang Responsive Di Postingan Blog?"},"content":{"rendered":"
\n
\nMembuat tabel di postingan blog cukup simpel tanpa harus menggunakan pluggin seperti wordpress, langsung saja kita ke pembahasan<\/p>\n
\n<\/a><\/div>\n

Untuk lebih jelasnya saya sudah membuat postingan tabel yang sudah saya posting di blog ini,
\nbukan saya yang membuat sebetulnya karena saya cuma copy paste namun sedikit modifikasi.
\nTabel tersebut saya tampilkan di bawah. Pada bagian atas tabel tersebut ada
\ntambahan warna biru muda dan untuk warna tulisan saya ganti menjadi putih. Kode asli dari postingan tabel sebelum saya edit sebagai berikut;<\/p>\n

\n<table 1px=\"\" border=\"\u201d2?\" dashed=\"\" style=\"width: \u201d100%\u201dpx;\">\n<tbody>\n<tr style=\"background-color: #117ac9; color: white;\">\n<td 1px=\"\" dashed=\"\"><b>Pos<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>Tim<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>Main<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>M<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>K<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>Set<\/b><\/td>\n<td 1px=\"\" dashed=\"\"><b>Poin<\/b><\/td>\n<\/tr>\n<tr>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">Tontowi Ahmad\/Lilyana Natsir<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">0<\/td>\n<td 1px=\"\" dashed=\"\">2-0<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<\/tr>\n<tr>\n<td 1px=\"\" dashed=\"\">2<\/td>\n<td 1px=\"\" dashed=\"\">Chan Peng Soon\/Goh Liu Ying<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">0<\/td>\n<td 1px=\"\" dashed=\"\">2-0<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<\/tr>\n<tr>\n<td 1px=\"\" dashed=\"\">3<\/td>\n<td 1px=\"\" dashed=\"\">Bodin Issara\/Savitree Amitrapai<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">0<\/td>\n<td 1px=\"\" dashed=\"\">0-2<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<\/tr>\n<tr>\n<td 1px=\"\" dashed=\"\">4<\/td>\n<td 1px=\"\" dashed=\"\">Robin Middleton\/Leanne Choo<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<td 1px=\"\" dashed=\"\">0<\/td>\n<td 1px=\"\" dashed=\"\">0-2<\/td>\n<td 1px=\"\" dashed=\"\">1<\/td>\n<\/tr>\n<\/tbody><\/table>\n<\/code><\/pre>\n
\nHasil Jadi<\/b>
\n<\/p>\n\n\n<\/tbody>\n<\/table>\n
\n\n\n\n\n\n\n
Pos<\/b><\/td>\nTim<\/b><\/td>\nMain<\/b><\/td>\nM<\/b><\/td>\nK<\/b><\/td>\nSet<\/b><\/td>\nPoin<\/b><\/td>\n<\/tr>\n
1<\/td>\nTontowi Ahmad\/Lilyana Natsir<\/td>\n1<\/td>\n1<\/td>\n0<\/td>\n2-0<\/td>\n1<\/td>\n<\/tr>\n
2<\/td>\nChan Peng Soon\/Goh Liu Ying<\/td>\n1<\/td>\n1<\/td>\n0<\/td>\n2-0<\/td>\n1<\/td>\n<\/tr>\n
3<\/td>\nBodin Issara\/Savitree Amitrapai<\/td>\n1<\/td>\n1<\/td>\n0<\/td>\n0-2<\/td>\n1<\/td>\n<\/tr>\n
4<\/td>\nRobin Middleton\/Leanne Choo<\/td>\n1<\/td>\n1<\/td>\n0<\/td>\n0-2<\/td>\n1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\ncatatan untuk background-color untuk memnerikan warna pada kolom tabel sedangkan color untuk memberikan warna pada tulisan\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Membuat tabel di postingan blog cukup simpel tanpa harus menggunakan pluggin seperti wordpress, langsung saja kita ke pembahasan Untuk lebih jelasnya saya sudah membuat postingan tabel yang sudah saya posting… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":1988,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-source-code"],"_links":{"self":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=214"}],"version-history":[{"count":1,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":1778,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/214\/revisions\/1778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/media\/1988"}],"wp:attachment":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}