{"id":4505,"date":"2024-11-02T13:48:11","date_gmt":"2024-11-02T13:48:11","guid":{"rendered":"https:\/\/tableberg.com\/?p=4505"},"modified":"2024-11-02T13:48:11","modified_gmt":"2024-11-02T13:48:11","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%a7%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%82%92%e4%bd%9c%e6%88%90%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-make-a-responsive-table-in-wordpress\/","title":{"rendered":"WordPress\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"\n<p>In the early days of website building, <a href=\"https:\/\/tableberg.com\/how-to-create-a-table-in-wordpress\/\">tables<\/a> were built primarily for desktop viewing, where screen space was plentiful. As websites began to include complex data, tables became a popular way to organize large amounts of information neatly.\u00a0<\/p>\n\n\n\n<p>With the rise of mobile usage, the need for responsive tables became vital. More users accessed websites on phones and tablets, where traditional tables caused frustration by requiring horizontal scrolling or zooming just to read content.<\/p>\n\n\n\n<p>Today, responsive tables are not just about convenience; they\u2019re essential for SEO and accessibility, especially with <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/mobile\/mobile-sites-mobile-first-indexing\" target=\"_blank\" rel=\"noopener\">Google\u2019s mobile-first indexing<\/a>. While WordPress\u2019s default Table Block lacks built-in responsiveness, you\u2019ll need methods like CSS adjustments or plugins to solve that issue.\u00a0<\/p>\n\n\n\n<p>In this guide, we\u2019ll walk through the simplest way to create mobile-optimized tables in WordPress using a plugin.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-32c79e65-f213-4364-abb9-dead96af852b\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"color: #14111f; \">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">Create a Responsive Table in WordPress<\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"color: #14111f; \">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"color: #14111f; \">hide<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"background-color: #f1f7f8; \">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-make-a-responsive-table-in-wordpress\/#0-step-1-install-and-activate-the-tableberg-plugin-\" style=\"\">Step 1: Install and Activate The Tableberg Plugin<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-make-a-responsive-table-in-wordpress\/#1-step-2-create-a-new-table-with-tableberg-\" style=\"\">Step 2: Create a New Table with Tableberg<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-make-a-responsive-table-in-wordpress\/#2-step-3-add-data-to-your-table-\" style=\"\">Step 3: Add Data to Your Table<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-make-a-responsive-table-in-wordpress\/#3-step-4-enable-responsive-settings-\" style=\"\">Step 4: Enable Responsive Settings<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-step-1-install-and-activate-the-tableberg-plugin-\"><strong>Step 1: Install and Activate The Tableberg Plugin<\/strong><\/h2>\n\n\n\n<p>The first step is simple. Go to your <strong>WordPress Dashboard<\/strong> and navigate to <strong>Plugins &gt; Add New<\/strong>. Once you\u2019re there, type <strong>Tableberg<\/strong> and find the plugin. Once you find it, click <strong>Install Now<\/strong>. After installation, all that remains is to <strong>Activate<\/strong> it. Click on Activate to enable the plugin on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-1024x444.png\" alt=\"Install and Activate The Tableberg Plugin\" class=\"has-border-color has-primary-accent-border-color wp-image-4506\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-1024x444.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-300x130.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-768x333.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-1536x666.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1.png 1837w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-step-2-create-a-new-table-with-tableberg-\"><strong>Step 2: Create a New Table with Tableberg<\/strong><\/h2>\n\n\n\n<p>From your WordPress Editor, click the <strong>plus (+) icon<\/strong>, search for <strong>Tableberg<\/strong>, and then add the Tableberg block.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-1024x483.png\" alt=\"Create a New Table\" class=\"has-border-color has-primary-accent-border-color wp-image-4507\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-1024x483.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-300x141.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-768x362.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-1536x724.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1.png 1776w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong> <br><\/strong>Choose the number of rows and columns for your table and then hit the create button. For this tutorial, we chose a table containing 4 rows and 5 columns.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-1024x517.png\" alt=\"Select rows and columns\" class=\"has-border-color has-primary-accent-border-color wp-image-4517\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-1024x517.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-300x152.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-768x388.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-1536x776.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-alternate.png 1653w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-step-3-add-data-to-your-table-\"><strong>Step 3: Add Data to Your Table<\/strong><\/h2>\n\n\n\n<p>After <a href=\"https:\/\/tableberg.com\/docs\/how-to-create-your-first-table-with-tableberg\/\">creating your table<\/a>, you\u2019ll be taken to the table editor, where you can add content to each cell. Click on any cell, tap on the <strong>plus (+) sign, <\/strong>type the required block, and continue to enter text, images, lists, star ratings, buttons, or anything that suits your requirements.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-1024x454.png\" alt=\"Add Data to Your Table\" class=\"wp-image-4509\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-1024x454.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-300x133.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-768x341.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-1536x682.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-step-4-enable-responsive-settings-\"><strong>Step 4: Enable Responsive Settings<\/strong><\/h2>\n\n\n\n<p>To make sure your table displays well across all devices, Tableberg offers a structured <strong>Responsiveness Settings<\/strong> section. First, select the <strong>parent block<\/strong>, move to the <strong>settings<\/strong> on the right side of the editor, and then scroll down to find the <strong>Responsiveness Settings<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"783\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-1024x783.png\" alt=\"Find Responsiveness Settings\" class=\"has-border-color has-primary-accent-border-color wp-image-4510\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-1024x783.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-300x229.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-768x587.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-1536x1175.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1-16x12.png 16w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.1.png 1598w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Next, choose the device for which you\u2019d like to configure responsiveness. At the top of the Responsiveness Settings panel, you\u2019ll see options for <strong>Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong>. Select the device you want to customize, as this will determine how the table behaves on that particular screen size. Here, we\u2019ve selected Mobile.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-1024x452.png\" alt=\"Select Device\" class=\"has-border-color has-primary-accent-border-color wp-image-4511\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-1024x452.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-300x132.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-768x339.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-1536x677.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.2.png 1896w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>With the device selected, toggle on the <strong>Enable Breakpoint<\/strong> option to activate responsive behavior for the chosen device. This setting allows the table to apply responsive adjustments when the screen width is at or below the value you set in <strong>Max Width<\/strong>. For example, setting the Max Width to 1024px means the table will adjust responsively on screens that are narrower than 1024px. Below this setting, you\u2019ll find the Make <strong>Top Row Header<\/strong> option that designates the first row of your table as a header and applies specific styles or formatting to distinguish it from other rows.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"627\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-1024x627.png\" alt=\"Enable Breakpoint and choose the Max Width\" class=\"has-border-color has-primary-accent-border-color wp-image-4512\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-1024x627.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-300x184.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-768x470.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3-18x12.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.3.png 1376w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Finally, use the <strong>Mode<\/strong> option to choose how the table behaves on smaller screens. You can select <strong>Scroll<\/strong> to enable horizontal scrolling and allow users to swipe through the table if it\u2019s too wide. Alternatively, choose <strong>Stack<\/strong> to rearrange the table content vertically. When using the Stack mode, additional options like<strong> Stack Direction<\/strong> let you control the stacking direction, and <strong>Items per Row <\/strong>allows you to set how many items should appear per row to provide more customization for smaller screens.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-1024x473.png\" alt=\"Select Mode\" class=\"has-border-color has-primary-accent-border-color wp-image-4513\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-1024x473.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-300x139.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-768x355.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-1536x710.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/5.4.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That\u2019s it\u2014your table is all set, ready to shine on screens of any size. Publish it, and let your data flow smoothly across desktops, tablets, and phones!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-conclusion-\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p>Responsive tables aren\u2019t just a feature\u2014they\u2019re a must-have in today\u2019s WordPress world. With Tableberg, you\u2019ve turned traditional tables into something that adapts, flexes and shines on any screen. Your site now offers a cleaner, more accessible way to present data, whether viewed on a desktop, tablet, or phone. You can say goodbye to clunky displays and hello to a user experience that flows as smoothly as your content. Your audience will love the upgrade, and so will search engines.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the early days of website building, tables were built primarily for desktop viewing, where screen space was plentiful. As websites began to include complex data, tables became a popular way to organize large amounts of information neatly.\u00a0 With the rise of mobile usage, the need for responsive tables became vital. More users accessed websites on phones and tablets, where traditional tables caused frustration by requiring horizontal scrolling or zooming just to read content. Today, responsive tables are not just about convenience; they\u2019re essential for SEO and accessibility, especially with Google\u2019s mobile-first indexing. While WordPress\u2019s default Table Block lacks built-in responsiveness, you\u2019ll need methods like CSS adjustments or plugins to [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":4523,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-4505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/responsive-table-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/ja\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/4505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=4505"}],"version-history":[{"count":7,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/4505\/revisions"}],"predecessor-version":[{"id":4527,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/4505\/revisions\/4527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/4523"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=4505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=4505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=4505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}