{"id":97666,"date":"2019-12-16T12:23:04","date_gmt":"2019-12-16T18:23:04","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=97666"},"modified":"2024-09-29T11:16:08","modified_gmt":"2024-09-29T16:16:08","slug":"create-responsive-tables-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-responsive-tables-wordpress\/","title":{"rendered":"How to Create Responsive Tables in WordPress"},"content":{"rendered":"\n

Tables are a website design element that can help you elegantly display large amounts of information in an organized way. They work quite well on traditional computer displays, but can often create an undesirable experience on mobile devices. <\/p>\n\n\n\n

Fortunately, there are several workable solutions for creating more responsive tables. Using these responsive design practices<\/a> can improve the User Experience (UX) of your site. This means visitors will be able to more easily view and access the data in your tables, no matter what type of device they\u2019re using.<\/p>\n\n\n\n

In this article, we\u2019ll take a look at what it means to make a table responsive. We\u2019ll then walk through two ways to create responsive tables in WordPress. Let\u2019s dive right in! <\/p>\n\n\n\n\n\n

What are responsive tables?<\/h2>\n\n\n\n

Typically, the goal of a table is to display lots of data in a way that makes sense. When you try to view a tables on a mobile device, however, things can go awry. This happens because table rows are often many columns wider than your screen\u2019s display can handle.<\/p>\n\n\n\n

When you create a responsive table, you\u2019re essentially creating a set of rules for your original table of data. These rules can determine breakpoints<\/a> based on display size. This means that if a user accesses the table on a device that\u2019s smaller than your set breakpoint, the table layout will respond by reformatting to fit the screen size.<\/p>\n\n\n\n

Responsive tables typically can be reformatted by adding a scroll bar or stacking the information. You don\u2019t want to just shrink and cram the information in the cells together as the screen size changes, since this can make the table unreadable. Fortunately, responsive design isn\u2019t too hard to achieve. <\/p>\n\n\n\n

How to make a responsive table (without a plugin)<\/h2>\n\n\n\n

There are essentially two approaches to making a table responsive in WordPress. First, we\u2019ll take a look at how to get the job done without a plugin.<\/p>\n\n\n\n

This will require some coding knowledge: specifically, an understanding of Cascading Style Sheets (CSS)<\/a>. We also recommend working in a staging or development environment<\/a> rather than on your live website, until you design a table that works reliably. <\/p>\n\n\n\n

Step 1: Format your table for responsive CSS<\/h3>\n\n\n\n

In this example, we\u2019re going to tell our sample table\u2019s data to reformat at a specific breakpoint. You can simply add a scroll bar to a table in some cases, but we\u2019re going to actually group the table\u2019s data so it appears in a more readable format that eliminates the need for horizontal scrolling.<\/p>\n\n\n\n

This is a great approach, since horizontal scrolling can often mean you\u2019re viewing a column\u2019s data out of context: <\/p>\n\n\n\n

To make this table work better, you\u2019ll need to first be sure you have your table formatted properly. If you\u2019re creating a table using the Block Editor<\/a>, you can do so normally and then add <thead><\/a> and <tbody><\/a> attributes to make sure your CSS will work properly:<\/p>\n\n\n\n

Once you add the table, you can use the HTML editor to adjust its formatting. Your <thead><\/thead> attribute needs to wrap all of your column headers. Similarly, you\u2019ll wrap all of your subsequent table data in the <tbody><\/tbody> attribute. <\/p>\n\n\n\n

Once you add the CSS tag in the next step, your style sheets will be able to understand what\u2019s supposed to display as headers for each column in the table, and what is the body or cell content.<\/p>\n\n\n\n

Step 2: Add a custom tag to your CSS<\/h3>\n\n\n\n

Next, we\u2019re going to use a snippet of custom CSS code and the WordPress Twenty Nineteen theme<\/a>. This theme has a pretty responsive design as part of its native code, but our CSS adjustments will take that even further. <\/p>\n\n\n\n

Since all themes are different, you\u2019ll want to thoroughly understand your theme\u2019s structure in order to successfully implement a responsive table design. Some themes may require an additional JavaScript library<\/a>.<\/p>\n\n\n\n

For our example, we\u2019ll navigate to Appearance<\/em> > Customize<\/em> > Additional CSS<\/em>, where we can add the following custom CSS code<\/a>: <\/p>\n\n\n\n

@media screen and (max-width: 600px) {<\/code><\/td>
<\/td><\/tr>

<\/td>		   table {width:100%;}<\/code><\/td><\/tr>

<\/td>		   thead {display: none;}<\/code><\/td><\/tr>

<\/td>		   tr:nth-of-type(2n) {background-color: inherit;}<\/code><\/td><\/tr>

<\/td>		   tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}<\/code><\/td><\/tr>

<\/td>		   tbody td {display: block;  text-align:center;}<\/code><\/td><\/tr>

<\/td>		   tbody td:before {<\/code><\/td><\/tr>

<\/td>		       content: attr(data-th);<\/code><\/td><\/tr>

<\/td>		       display: block;<\/code><\/td><\/tr>

<\/td>		       text-align:center; <\/code><\/td><\/tr>

<\/td>		   }<\/code><\/td><\/tr>

<\/td>		}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Once you paste your own code into the editor, you will need to select Publish<\/em> for your changes to take effect. <\/p>\n\n\n\n

Step 3: Test the table\u2019s responsiveness in WordPress<\/h3>\n\n\n\n

WordPress has a helpful built-in screen test feature that enables you to test your content on three different screen sizes. At the bottom of the screen where you added your custom CSS, you can click on the tablet or mobile phone icons to test out your table\u2019s new style:<\/p>\n\n\n\n

For this example, we\u2019ve already created a simple table that contains all the necessary HTML attributes to work with our CSS. Our breakpoint in the CSS is set to 600px, but that can be changed to fit your needs.<\/p>\n\n\n\n

Instead of adding a scrollbar or squishing the table\u2019s data, the CSS we added reorganizes the data into a mobile-friendly format. This enables the user on a mobile device to scroll vertically, and view the table\u2019s data in context with the rest of the related cells. <\/p>\n\n\n\n

How to make a responsive table with a plugin<\/h2>\n\n\n\n

If you\u2019re not comfortable customizing your theme\u2019s code or CSS, there is another option. There are a number of WordPress plugins available that can help you create a responsive table design for your website. <\/p>\n\n\n\n

Step 1: Download a plugin<\/h3>\n\n\n\n
\"Ninja<\/figure>\n\n\n\n

To get started, you\u2019ll need to choose a plugin. Since there are quite a few options for designing responsive tables, we\u2019re going to highlight two of them to get you started: <\/p>\n\n\n\n