{"id":7194,"date":"2021-04-05T09:21:54","date_gmt":"2021-04-05T09:21:54","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=7194"},"modified":"2022-01-28T12:39:58","modified_gmt":"2022-01-28T12:39:58","slug":"wordpress-responsive-tables","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-responsive-tables\/","title":{"rendered":"A Tale of WordPress Responsive Tables"},"content":{"rendered":"

I always organize stuff on my laptop, from bookmarks to folders. I even use specific icons for certain folders. Call it OCD, I call it just order and discipline \ud83d\ude01.<\/span><\/p>\n

Now, when I write stuff, I like to keep it simple, and structured. And when I read blog articles and ebooks, I always want to see clear chapters, bullet points, or tables.<\/span><\/p>\n

Let me show you an example. I like looking for new recipes. The problem is that food bloggers kinda write for SEO purposes, not for the end-user. So, first, you need to find out the history of the potato, then how pepper was discovered, then, you will find the ingredients to your recipe. This is why I got excited when I found this.\"\"<\/span><\/p>\n

\"\"<\/p>\n

That\u2019s more like it!<\/span><\/p>\n

So, if you want to really create a good user experience, structuring information should be top of your mind.<\/span><\/p>\n

Now, tables can be a great way for organizing information in a logical and visual way. They can also help users better scan your content. In this fast world, we all scan through content in order to assess if it\u2019s worth reading or not. We are trying to find the answer to our problem\/question as easily and fast as possible.<\/span><\/p>\n

Also, there are some website sections that need a table by default, such as pricing sections, schedules, product lists, etc.<\/span><\/p>\n

And, you also have data tables that you might want to import from other sources, and want to make them look good on a page or post.<\/p>\n

Now, there\u2019s a heartache when it comes to creating tables in WordPress: how to make them responsive. We\u2019ll talk about this too a bit later.\u00a0<\/span><\/p>\n

So, it’s time to see how we can build tables in WordPress.<\/span><\/p>\n

 <\/p>\n

How to Create WordPress Tables in the Default WordPress Editor (Gutenberg)<\/span><\/h2>\n

Let\u2019s say you want to add a table to a blog post. Here are the steps:<\/span><\/p>\n

    \n
  1. From the WordPress dashboard, navigate to Posts -> Add New<\/span><\/li>\n
  2. Inside this blank new article locate the \u201c+\u201d sign, and click on it. It will open a new window with a list of blocks.<\/span><\/li>\n
  3. Type \u201ctable\u201d in the search bar inside the window.\"adding <\/span><\/li>\n
  4. Select the table block.<\/span><\/li>\n
  5. Adjust the number of columns and rows.\"The<\/span><\/li>\n
  6. Select \u201cCreate Table\u201d.<\/span><\/li>\n
  7. When you place the mouse cursor inside the table, a toolbar will show up with editing tools: alignment, row and column management, text writing, etc.\"WordPress<\/span><\/li>\n
  8. Type in your text in the table cells. They\u2019ll automatically resize depending on how much content you type.\u00a0<\/span><\/li>\n
  9. Advanced edits can be made from the menu on the right. Just make sure the table is selected (just place the cursor in one of the table-cells). You can choose from the two table styles available, add a header, add background color, etc. \"Advanced<\/span><\/li>\n
  10. \u00a0For those that want to go a bit further with their table design, under the advanced menu item, you have the option to add custom CSS. Here you can also assign an HTML anchor if you want to make use of page jumps. More on this topic,<\/span> here<\/span><\/a>.<\/span><\/li>\n<\/ol>\n

    And you\u2019re done!<\/span><\/p>\n

    Don\u2019t forget to hit \u201cSave draft\u201d or \u201cPublish\u201d, before exiting.<\/span><\/p>\n

    If you need something more advanced than this, you can use a WordPress plugin. I\u2019ll make some recommendations a bit further down in the next chapter.<\/span><\/p>\n

     <\/p>\n

    How to Create WordPress Tables in the Classic WordPress Editor<\/span><\/h2>\n

    For those of you that are still using the previous WordPress editing experience, there are two design options:<\/span><\/p>\n