The good ol’ <table> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super wide while others are scrunched up. Other times, we get equal widths, but at the expense of a column that contains more content and needs more space.
But I found a CSS tricks-y workaround that helps make things a little easier. That’s what I want to show you in this post.
The problem
First we need to understand how layout is handled by the browser. We have the table-layout property in CSS to define how a table should distribute the width for each table column. It takes one of two values:
auto (default)
fixed
Let us start with a table without defining any widths on its columns. In other words, we will let the browser decide how much width to give each column by applying table-layout: auto on it in CSS. As you will notice, the browser does its best with the algorithm it has to divide the full available width between each column.
If we swap out an auto table layout with table-layout: fixed, then the browser will merely divide the full available space by the total number of columns, then apply that value as the width for each column:
But what if we want to control the widths of our columns? We have the <colgroup> element to help! It consists of individual <col> elements we can use to specify the exact width we need for each column. Let’s see how that works in with table-layout: auto:
I have inlined the styles for the sake of illustration.
The browser is not respecting the inline widths since they exceed the amount of available table space when added up. As a result, the table steals space from the columns so that all of the columns are visible. This is perfectly fine default behavior.
How does <colgroup> work with table-layout: fixed. Let’s find out:
This doesn’t look good at all. We need the column with a bunch of content in it to flex a little while maintaining a fixed width for the rest of the columns. A fixed table-layout value respects the width — but so much so that it eats up the space of the column that needs the most space… which is a no-go for us.
This could easily be solved if only we could set a min-width on the column instead of a width. That way, the column would say, “I can give all of you some of my width until we reach this minimum value.“ Then the table would simply overflow its container and give the user a horizontal scroll to display the rest of the table. But unfortunately, min-width on table columns are not respected by the <col> element.
The solution
The solution is to fake a min-width and we need to be a bit creative to do it.
We can add an empty <col> as the second column for our <colgroup> in the HTML and apply a colspan attribute on the first column so that the first column takes up the space for both columns:
Note that I have added classes in place of the inline styles from the previous example. The same idea still applies: we’re applying widths to each column.
The trick is that relationship between the first <col> and the empty second <col>. If we apply a width to the first <col> (it’s 200px in the snippet above), then the second column will be eaten up when the fixed table layout divides up the available space to distribute to the columns. But the width of the first column (200px) is respected and remains in place.
Voilà! We have a faux min-width set on a table cell. The first cell flexes as the available space changes and the table overflows for horizontal scrolling just as we hoped it would.
Let’s not totally forget about accessibility here. I ran the table through NVDA on Windows and VoiceOver on macOS and found that all five columns are announced, even if we’re only using four of them. And when the first column is in focus, it announces, “Column one through two”. Not perfectly elegant but also not going to cause someone to get lost. I imagine we could throw an aria-hidden attribute on the unused column, but also know ARIA isn’t a substitute for poor HTML.
I’ll admit, this feels a little, um, hacky. But it does work! Let me know if you have a different approach in the comments… or know of any confusions this “hack” might bring to our users.
Are you looking for a plugin to add a table of contents to your WordPress website?
A table of contents can improve readability and make it easier for users to digest lengthy content by letting them jump ahead to any section of a post or page. Google will also use your table of contents to index and rank your pages and posts in search results.
In this article, we’ll show you the best table of contents plugins for WordPress.
Why Use a Table Content Plugin in WordPress?
Adding a table of contents (ToC) to your WordPress website is a great way to help visitors navigate longer blog posts and pages.
You can easily organize and structure your content so it’s easier for people to scan through the article and jump to any section they’re interested in.
It also helps with your WordPress SEO, since search engines like Google can add jump-to-section links next to your website in the search results. Google can also display your table of contents list in featured snippets.
You can manually add a table of contents in WordPress by writing HTML code and CSS or by using advanced settings in the block editor. However, this is time-consuming and can be tricky for beginners because the slightest mistake would mean your table of contents won’t work.
An easier way to create a table of contents is using a WordPress plugin. You won’t have to edit HTML code, and there are more customization options.
Let’s look at some of the best table of contents plugins for WordPress.
AIOSEO makes it super easy to add a table of contents to your WordPress site. It offers a table of contents block in the WordPress content editor that you can add anywhere in your blog post.
Unlike other automatic table of content plugin though, AIOSEO actually lets you hide an individual heading or even completely customize the title as needed in the table of content. You can also reorder the headings and change the style from bullet format to numbers.
Aside from that, AIOSEO helps you create XML sitemaps for your site, so search engines can easily discover new content. It also helps add schema markup and increase the visibility of your content in rich snippets.
You can also use the plugin to conduct an SEO audit and see if everything is optimized correctly. AIOSEO will suggest fixing different issues that might stop your site from ranking higher in search results.
AIOSEO premium plans start from $49.60 per year. There is also an AIOSEO Lite version you can try for free.
Easy Table of Contents is a popular plugin that you can use to add a table of contents to your blog posts, landing pages, sidebar, and custom post types.
The plugin is user-friendly and automatically generates a listing using content from the headings in the article. It works seamlessly with the WordPress block editor, classic editor, Divi and Elementor page builders, and more.
Using the plugin, you also get an auto-insert functionality for adding the table of contents in different post types.
Plus, you get other customization options like changing the table’s width, editing the font size, choosing a theme, and selecting the number of headings to use when creating a table of contents.
LuckyWP Table of Contents is the next WordPress ToC plugin on our list. It has multiple customization options to change the look and feel of your table of contents.
For instance, you can pre-built color schemes to match your brand. You also get options to edit the appearance by changing the width, font size, item font size, and colors.
The plugin lets you choose bullets or numbers to show items in the table contents. You can also use decimals and roman numerals in the listing.
Besides that, the plugin offers 3 options to add the table of contents anywhere on your site. For example, you can use a shortcode, widget, or WordPress content editor block.
It’s lightweight and doesn’t hinder the performance of your website. The table of contents only loads when it’s supposed to display. Plus, the table is fully responsive, so you don’t have to worry about optimizing it for different devices.
With the Joli Table of Contents plugin, you get many options to customize the appearance of the table of contents. It comes with 2 themes for the table and 4 free icons for the expanding and collapsing buttons.
Besides that, the plugin lets you choose a numbering prefix, change the font size, adjust the table’s width, add a shadow, and more.
CM Table of Contents by CreativeMindsSolutions is a super easy-to-use plugin for creating a table of contents.
In the plugin, you can choose which post types you’d like the table of contents to appear on, including blog posts, specific pages, sidebar widget areas, and custom pages. You also get to make the table collapse and expand in your content.
The best part about using the CM Table of Contents plugin is that you get different performance settings. This helps you ensure that are no delays when the table of contents loads.
Besides that, there are many styling options for your table of contents. You can change the size, color, weight, and style for each level in the table. The plugin also lets you show the TOC in one or two columns.
SimpleTOC is the basic WordPress table of contents plugin. It’s beginner friendly and offers standard features.
You can easily add TOC to your blog posts using the SimpleTOC block in the WordPress content editor. The plugin doesn’t require additional configuration, and you can control all the settings from the content editor.
SimpleTOC lets you select the maximum and minimum heading levels it should include in the table of contents, show/hide the table’s heading, and more.
On the downside, you don’t get any customization options compared to other plugins on our list, like AIOSEO. To style the table of contents, you’ll need to use the native styling options in the WordPress theme customizer or full site editor.
Heroic Table of Contents is another table of contents WordPress plugin that you can use to provide better navigation of your blog posts. The best part is that it’s 100% free.
The plugin offers a WordPress block that you can use to add a table of contents to your post and pages. It provides 4 pre-built table styles to choose from, including outlined, rounded, contrasted, and gray.
Additionally, you can show a collapse or expand icon for your TOC, use bullets, numbers, or plain text in the table, and more formats. Heroic Table of Contents is SEO friendly and mobile responsive, so you don’t have to worry about your site’s load time and user experience.
Which is the Best Table of Contents WordPress Plugin?
If you’re looking for the best plugin to help you optimize your content for search engines and easily add a table of contents, then we recommend All in One SEO (AIOSEO).
You can use the AIOSEO block to add a table of contents, customize it, and hide headings inside the WordPress content editor. Besides that, AIOSEO helps you create sitemaps, optimize your content for SEO, and so much more.
On the other hand, if you’re looking for a dedicated table of contents WordPress plugin, then check out Easy Table of Contents. It is beginner friendly and offers multiple customization options.
As part of my job in managing this blog, I check my stats frequently, and I've noticed that some of my more basic Vue.js articles have had consistently good traffic for quite some time. As I find myself doing more and more with "regular" JavaScript (sometimes referred to as "Vanilla JavaScript", but I'm not a fan of the term) I thought it would be a good idea to update those old posts for folks who would rather skip using a framework. With that in mind, here is my update to my post from over four years ago, Building Table Sorting and Pagination in Vue.js
You don't need to read that old post as I think the title is rather descriptive. How can we use JavaScript to take a set of data - render it in a table - and support both sorting and pagination? Here's how I solved this. Before I begin, a quick note. I'll be loading all of my data and while that works with a "sensible" amount of data, you don't want to be sending hundreds of thousands of rows of data to the client and sorting and paging in the client. That being said, I think an entirely client-side solution is absolutely safe if you understand the size of your data and know it's not going to impact performance.
But Bramus took it the rest of the nine yards and looked at all of the table enhancements. Every one of these is great. The kind of thing that makes CSS ever-so-slightly less frustrating.
But stickiness isn’t just for the top of the screen, you can stick things in any scroll direction (horizontal is just as fun). In fact, we can have multiple sticky elements stuck in different directions inside the same element, and even single elements that are stuck in multiple directions.
Here’s a video example of a table that sticks both the header and first column:
Why would you do that? Specifically for tabular data where cross-referencing is the point. In this table (which represents, of course, the scoring baseball game where somehow 20 teams are all playing each other at once because that’s how baseball works), it “makes sense” that you wouldn’t want the team name or the inning number to scroll away, as you’d lose context of what you’re looking at.
Not all tables need to be bi-directionally cross-referenceable. A lot of tables can smash rows into blocks on small screens for a better small-screen experience.
The “trick” at play here is partially the position: sticky; usage, but moreso to me, how you have to handle overlapping elements. A table cell that is sticky needs to have a background, because otherwise we’ll see overlapping content. It also needs proper z-index handling so that when it sticks in place, it’ll be on top of what it is supposed to be on top of. This feels like the trickiest part:
Make sure the tbody>th cells are above regular table cells, so they stay on top during a horizontal scroll.
Make sure the thead>th cells are above those, for vertical scrolling.
Make sure the thead>th:first-child cell is the very highest, as it needs to be above the body cells and it’s sibling headers again for horizontal scrolling.
A bit of a dance, but it’s doable.
High five to Cameron Clark who emailed me demoed this and showed me how cool it is. And indeed, Cameron, it is cool. When I shared that around, Estelle Weyl showed me a demo she made several years ago. That feels about right, Estelle is always a couple of years ahead of me.
Twenty-plus years ago, tables were the main way web pages were created in HTML. It gave web builders consistent control of constructing pages with some “design.” No longer did sites only have to be top-to-bottom in a linear manner — they could be set up with columns that align left-to-right and top-to-bottom. Back then, it was seen as a huge breakthrough.
Tables, however, were never designed to lay out pages and, in fact, have all sorts of problems when used that way today. It was a convenient hack, but at the time, a very welcome one, particularly for those trying to achieve a super-specific layout that previous ways couldn’t handle.
Fast-forward to modern days and it’s now obvious that were tons of issues with the table layout approach. Accessibility is a big one.<table>, <th>, <tr> and <td> elements aren’t exactly accessible, especially when they’re nested several levels deep. Screen readers — the devices that read web content and serve as a measure of accessibility compliance — struggle to parse them into cohesive blocks of content. That’s not to say tables are bad; they simply were never intended as a layout mechanism.
Check out this table layout. Feel free to run it through VoiceOver or whatever screen reading software you have access to.
Yes, that example looks very much like a typical website layout, but it’s crafted solely with a table. You can see how quickly it becomes bloated and inaccessible the very moment we start using it for anything other than tabular data.
So after more than 20 years of being put through the ringer, you might think we should avoid tables altogether. If you’ve never shipped a table-based layout, you’ve undoubtedly heard war stories from those of us who have, and those stories are never kind. It’s like we’ve sort of made tables the “Internet Explorer of HTML elements.”
But that’s not totally fair because tables do indeed fill a purpose on the web and they are indeed accessible when they are used correctly.
Tables are designed to handle data that is semantically related and is best presented in a linear-like format. So, yes, we can use tables today in the year 2020, and that will likely continue to be true many years from now.
Here’s a table being used to display exactly what it’s intended to: tabular data!
With the push toward web standards in the early 2000s, tables were pushed aside as a layout solution in favor of other approaches, most notably the CSS float property. Designers and developers alike rejoiced because, for the first time, we had a true separation of concerns that let markup do the markup-y things it needs to do, and CSS to do the visual stuff it needs to do. That made code both cleaner and way easier to maintain and, as a result, we could actually focus on true standards, like accessibility, and even other practices, like SEO.
See (or rather hear) the difference in this example?
Many of us have worked with floats in the past. They were originally designed to allow content to flow around images that are floated either to the left or right, and still be in the document flow. Now that we’ve gotten newer layout features — again, like grid and flexbox — floats, too, have sort of fallen by the wayside, perhaps either because there are better ways to accomplish what they do, or because they also got the same bad rap as tables after being (ab)used for a long time.
But floats are still useful and relevant! In fact, we have to use them for the shape-outside property to work.
A legitimate float use case could be for wrapping content around a styled <blockquote>.
CSS features like grid, flexbox, and multicolumn layouts are among the wonderful tools we have to work with these days. With even more layout possibilities, cleaner and more accessible code, they will remain our go-to layout approaches for many years to come.
No hacks or extra code in this flexbox example of the same layout we’ve looked at throughout this article:
So, next time you find yourself considering tables or floats, reach for them with confidence! Well, when you know the situation aligns with their intended use. It’s not like I’m expecting you to walk away from this with a reinvigorated enthusiasm for tables and floats; only that, when used correctly, they are perfectly valid techniques, and even continue to be indispensable parts of our overall toolset.
Do you want to add tables to WordPress posts and pages?
Tables are a great way to display data in an understandable format. WordPress offers easy ways to content inside tables with some formatting and design options.
In this article, we will show you how to create tables in WordPress posts and pages without using a plugin or any HTML code. We will also cover how to create advanced tables in WordPress with sorting and search features.
Video Tutorial
If you prefer written instructions, then just keep reading.
Simply create a new post or page, or edit an existing one. Once inside the content editor, click the ‘+’ symbol to add a new block, then select the Table block.
You can find it under the ‘Text’ section, or you can type ‘Table’ into the search bar.
Next, you will be prompted to choose how many columns and rows you want for your table. Both figures default to 2.
Don’t worry if you are not 100% sure about the exact number because you can always add/remove table columns and rows later.
Simply enter the number of rows and columns and click the ‘Create Table’ button.
The block will then generate your table and display it on the screen.
You can type in the table cells, and they will automatically resize depending on how much content is in each one.
You can set this option on the right side if you prefer your cells to be fixed-width. Here, you can also add a table header or footer section.
From the settings panel, you can also switch to the Style tab.
Your WordPress theme may offer a bunch of styles for the table block, or you can choose the background and text colors.
If you want to add a new row or column, just click on a cell at the point in the table where you want to add it. Next, click the ‘Edit Table’ button.
This will show a bunch of options to add or remove rows and columns to your table.
By default, the text in your table’s columns is aligned to the left.
You can change this by clicking inside a column and then clicking the ‘Change Column Alignment’ button:
You can also change the alignment of your whole table within the post or page.
Just click the ‘Change alignment’ button and select an option from the list.
Note that these options can make your table display beyond the normal boundaries of your post area.
Some may look odd on your WordPress website, so please preview your post or page to check how the table will appear.
Here’s our table set to ‘Wide Width’ as it appears on our demo site:
As you can see, it stretches out beyond the left and right margins of the post area.
The table tools built into the Gutenberg editor give you a lot of flexibility over how you can display your tables. You can use the Table block to show your data to readers in an easy-to-understand format.
However, the block doesn’t have advanced features like search filtering, custom sorting, and more. It also doesn’t let you efficiently use the same table across multiple areas of your website, such as sidebar widgets or other pages.
To create advanced tables, you will need to use a WordPress table plugin.
Creating Tables Using the TablePress Plugin
TablePress is one of the best WordPress tables plugins on the market. It is a free plugin and allows you to create and manage tables easily. Plus, you can edit your table separately and even add a large number of rows.
TablePress also becomes necessary if you are using the older classic WordPress editor, which does not come with table functionality.
You will then see a TablePress menu item in your WordPress dashboard. Go to TablePress » Add New to create a new table.
You need to type in a name for your table and decide how many rows and columns you want. You can always add/remove table rows and columns later as well.
Once you have added the table name, rows, and columns, go ahead and click the ‘Add Table’ button to create your table.
Next, you will see a screen with your table’s information and an area where you can add content.
Simply type the data you want into the cells of your table.
To add or remove rows and columns or perform sorting operations, simply right-click inside the table. This will show an options menu where you can make more changes.
There are advanced options below the ‘Table Content’ area, such as ‘Table Manipulation’.
From here, you can do things like adding, removing, and duplicating rows.
In ‘Table Options’, you can add a header and/or footer row, which won’t be sorted in with the data.
You can also decide where to show the table name and description:
Finally, you can set various options in the ‘Table Features for Site Visitors’ section.
These settings allow you to create responsive tables that can be filtered, searched, and sorted by your readers.
Once you are happy with your table, just click ‘Save Changes’.
After that, copy the Table shortcode. You will need it in the next step.
Now, edit the post or page where you want to display the table and add the Shortcode block to the editor.
After that, add the shortcode you copied earlier into the Shortcode block.
Don’t forget to update or save your changes.
On the other hand, if you are using the classic editor, then simply add the shortcode straight into your post:
If you want to change your table in the future, you can return to TablePress in your dashboard and make changes. Your table will be automatically updated in any posts and pages you have used it in.
TablePress also allows you to import data from spreadsheets and CSV files. Similarly, you can also export TablePress table data to a CSV file, which you can then open with any spreadsheet program like Microsoft Excel or Google Sheets.
Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate your table styles, you’ll have to rely on magic numbers and your table will be brittle and any dreams of responsiveness crushed.
Fortunately, in this case, we can take the trigonometry out and replace it with some careful geometry and our magic numbers all turn into 0 (a truly magical number).
For those in a hurry, here is the CSS (it’s very similar to the styles in the other article). Below is a thorough walk-through.
table {
border-collapse: collapse;
--table-border-width: 1px;
}
th.rotate {
white-space: nowrap;
position: relative;
}
th.rotate > div {
/* place div at bottom left of the th parent */
position: absolute;
bottom: 0;
left: 0;
/* Make sure short labels still meet the corner of the parent otherwise you'll get a gap */
text-align: left;
/* Move the top left corner of the span's bottom-border to line up with the top left corner of the td's border-right border so that the border corners are matched
* Rotate 315 (-45) degrees about matched border corners */
transform:
translate(calc(100% - var(--table-border-width) / 2), var(--table-border-width))
rotate(315deg);
transform-origin: 0% calc(100% - var(--table-border-width));
width: 100%;
}
th.rotate > div > span {
/* make sure the bottom of the span is matched up with the bottom of the parent div */
position: absolute;
bottom: 0;
left: 0;
border-bottom: var(--table-border-width) solid gray;
}
td {
border-right: var(--table-border-width) solid gray;
/* make sure this is at least as wide as sqrt(2) * height of the tallest letter in your font or the headers will overlap each other*/
min-width: 30px;
padding-top: 2px;
padding-left: 5px;
text-align: right;
}
Let’s unpack this table and see what’s going on. The magic starts with that funny chain of HTML tags. We’re putting a <span> inside of a <div> inside of our <th>. Is this all really necessary? Between how borders behave, the positioning flexibility we need, and what determines the width of a table column… yes, they each have a purpose and are necessary.
Let’s see what happens if we rotate the <th> directly:
Ignoring the fact that we haven’t corrected position, there are two big issues here:
The column width is still calculated from the header length which is what we were trying to avoid.
Our border didn’t come with us in the rotation, because it is actually part of the table.
These problems aren’t so difficult to fix. We know that if the <th> has a child element with a border, the browser won’t treat that border as part of the table. Further, we know that absolutely-positioned elements are taken out of the document flow and won’t affect the parent’s width. Enter <div> tag, stage left…and right, I guess.
Now our headers don’t influence the column width and the borders are rotated. We just need to line things up.
It’s easier to tell in the image with the rotated <th> elements, but that rotation is happening around the center of the element (that’s the default behavior of transform-origin). It is only another transform in x and y to get it to the right spot, but this is where we’d need trigonometry to figure out just how much x and y to line it up with the column borders. If we instead carefully choose the point to rotate the header about, and use transform-origin to select it, then we can end up with distances that are more straightforward than magic numbers.
The animation below helps illustrate what we’re going to do to avoid complicated math. The black dot in the top left of the blue border needs to match the red dot on the right border of the table column and rotate about it. Then there won’t be any gaps between the two borders.
It’s not helpful to start going somewhere if you don’t know where you are. The absolute positioning is going to help us out with this. By specifying bottom: 0; left: 0; on the <div>, it ends up at the bottom left of the parent <th>. This means the <div> border’s bottom-left corner is sitting on top of the left column border and halfway through it. From here, it’s apparent we need to move down one border width and over one cell width, but how are we going to get that responsively? It’s at this very moment you may recall that we haven’t added the <span> yet — we’re going to need it!
We’ll use the <div> to “figure out” how big the table cells are and the <span> to actually hold the text and position it absolutely as well to overflow the parent.
th.rotate{
white-space: nowrap;
position: relative;
}
th.rotate > div {
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* <- now the div parent is as wide as the columns */
}
th.rotate > div > span {
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid gray;
}
Great! When we set the width of the <div> to 100%, it holds the information for how big the column is regardless of what the content is in the table cells. With this in place, we can easily translate things over by the width of the <div> — but don’t forget that we need to shave off a half border width. Our translation becomes:
The <div> is now in the right spot to rotate, but we have to make sure to pick the correct transform-origin. We want it to be on the top-left corner of the border, which will be on the left and up one border’s width from the bottom of our <div> element:
Note that transformations happen after everything is placed. That means the rotated headers will overflow onto everything as best they can. You will need to wrap the whole table in something to compensate for the unexpected height. I put the title and table together in a flexbox <div> and set the flex-basis of the title to a value large enough to compensate for the tall headers.
So you’ve got a lot of data you want to present to your readers. Using tables seem like the obvious choice right? The problem is, tables are unsupported by the classic WordPress Visual Editor. The solution? Plugins of course!
In this post, I’ll be covering the following:
Why tables are an issue with WordPress.
What makes a WordPress table plugin great.
A review of the best WordPress table plugins.
Which plugin you should choose to add tables to WordPress – our recommended choice.
So let’s get to it.
Why Aren’t All WordPress Users Dancing On Tables?
One of the nice things about creating content in WordPress is that nearly everything you can do in word processing software (e.g. stylize text, add special characters, embed images) can be done right from within the WordPress editor.
The one type of functionality that hasn’t yet translated over to WordPress, however, is table design.
Although a table isn’t necessarily a common feature used in web design, it’s a basic enough element that would be great to have been included in the default editor settings.
On reflection, it seems slightly odd that WordPress didn’t have table support built-in until the release of the Gutenberg editor and its default Table block.
Perhaps it was part of that initial effort to keep the application as simple as possible, or perhaps the thinking was that if a post needed a table then it was easy enough to slip into text mode and add the HTML by hand.
Adding tables to WordPress manually can be a pain.
Manually adding a table is, of course, still an option but it’s tedious, laborious and prone to errors.
There are much better options available to WordPress users.
They’re called plugins :)
Unsurprisingly, a number of plugins are available to help users add tables in WordPress.
Plugin and theme developers have recognized a need for improving HTML table design in WordPress—especially as businesses seek out better ways to convey complex information to users, and display professional-looking tables and charts on their site.
So, we now have a plentitude of lightweight plugins and site builder tools that come equipped with table-building features.
But, which WordPress table plugin should you use for your site?
Well, of course, it depends on your needs.
For example:
Do you plan to use tables extensively in your content or only occasionally?
Are you presenting simple or complex information in your tables?
Will you be adding the content into tables yourself or importing table data from other sources?
How often will you need to update table information?
Will your tables contain only a few columns and rows of data or many hundreds—possibly even thousands—of entries?
What Makes A WordPress Table Plugin Great?
To help you choose the best plugin for creating and adding tables to your posts and pages, I have compiled a list of currently supported WordPress table plugins, and looked at the following criteria for each of the plugins listed:
Visually Attractive
Easy to Use
Responsive
Gutenberg-Ready
Additional Features
Who Wants To Look At Boring Tables?
Tables can be used for a variety of reasons in WordPress.
They display data in support of the research or topic discussed on the page.
They list out product specifications which may be too lengthy, cumbersome, or difficult to understand when written in plain text or even bulleted formats.
They break out service offerings side-by-side, highlighting the main features as well as prices for each.
They compare products and other similar items side-by-side to aid visitors in the decision-making process.
They enable visitors to do calculations of their own (which can be a really smart sales tactic).
There’s no question that using tables is an effective way to present complex information.
But if your tables are boring-looking, you are only going to make things harder for your site visitors.
Whatever you decide to do with tables in WordPress, your goal should be to do so in the most attractive way possible.
Data and lengthy specs lists aren’t always the most exciting things to read (which is why images play such a big role in web design these days), so your tables need more than just the boring Excel treatment.
Boring tables … y-a-a-a-a-w-w-w-w-w-n-n-n-n!
You don’t need to create ground-breaking art with your tables, but for goodness sake, let’s give everyone’s eyeballs something pleasant to look at and make their time on your site a positive user experience.
Table plugins don’t have to redefine art but should make adding tables to WordPress content easier and more visually exciting for users.
So, the first criteria we will look at when comparing WordPress table plugins is does the plugin generate good looking tables?
Can the tables provide information and be visually appealing to users too?
What options does it offer for designing and customizing tables in WordPress?
I’ll test this criterion by creating and styling a table using the plugin’s default settings.
You Shouldn’t Have To Be A Programmer To Add Data to Tables And Tables To WordPress
If you have to learn to write code to add data to tables and insert tables into WordPress content, then you may as well go back to the manual method.
Businesses of all kinds need to add tables to their content and the last thing they need is someone telling them they need to learn HTML and PHP to publish data in table format on their sites.
And they are quite right too!
WordPress table plugins should be user-friendly enough to allow end-users to easily upload and populate table data from a spreadsheet (e.g. Excel or Google Sheet).
Or add and edit data to table columns and rows manually from a visual interface. And insert their tables wherever they like in their content using shortcodes or widgets.
I’ll test the plugin’s user-friendliness by importing a demo CSV file with several columns and over 8,600 rows of data.
Users Can’t View Your Tables On Their Mobile Device…What’s Wrong With This Picture?
Do you still need links to articles on mobile usage statistics to be convinced that everyone and their grandma (and all of grandma’s neighbors) spend more time accessing information online using mobile devices instead of big clunky desktop monitors?
We shouldn’t even be writing reviews of WordPress plugins and themes that include sentences like “…and a great feature of this plugin/theme is that it’s mobile-responsive and works across all browsers…” anymore.
If users can’t view tables on their mobile devices by scrolling, dragging, or clicking or tapping to expand data, then you shouldn’t be using that plugin to display tables in WordPress (cause that plugin, it ain’t gonna be around much longer!)
So, what we are looking for in our ‘best of’ list of WordPress table plugins is how responsive the plugin is on users’ mobile devices.
Don’t let users curse your site because they can’t view your table data on their mobile devices.
Regardless of whether you or your clients plan to add tables to content in WordPress using plugins, visual builders, or even themes (e.g. price tables), there must be built-in support for the Gutenberg editor.
WordPress Gutenberg now supports tables, so all WordPress table plugins must do too!
Enough Said… Here Are The Best WordPress Table Plugins To Choose From
With the above criteria in mind then, let’s take a look at the best WordPress plugins that can help you create tables for your posts and pages.
Visualizer: Tables and Charts Manager for WordPress
Visualizer is a free plugin for WordPress that lets you create and manage interactive (and responsive) tables for your posts and pages. It can also help you create animated charts, diagrams, and more.
How Do The Tables Look?
Here’s the table I created using Visualizer by importing the demo CSV file and configuring some basic styling options in the plugin settings:
Visualizer Demo Table
Is It User-Friendly?
This plugin lets you create and add an unlimited number of tables and charts to your content.
Tables and charts can be easily added to content via the WordPress classic editor or to Gutenberg via its own custom block. It also allows you to manually edit the data in your graphs and tables – as well as import data from a URL, CSV file, or Google spreadsheet.
If that isn’t enough, you can also customize the design and behavior of your tables and charts.
Is It Responsive?
You can choose whether to make individual tables responsive or not by enabling or disabling the responsive feature in the chart’s settings.
This is what mobile users will see when viewing a table created using Visualizer (mockup based on WordPress Theme customizer display).
The plugin incorporates different animation and responsive technologies, such as Google Visualization API, DataTables.net, and ChartJS.
It also supports cross-browser compatibility and cross-platform portability to iOS and Android.
Is It Gutenberg-Friendly?
You can add interactive tables and charts to WordPress posts and pages using the Visualizer Gutenberg block.
Once you’ve done this you can configure various options in the custom block’s settings. These include: table, cell, row, and column settings.
Lastly, you have the ability to add frontend actions for users – like allowing them to print, export, or copy your table data.
Visualizer Gutenberg block.
Additional Plugin Info
The free version includes 8 built-in chart types (table chart, line chart, area chart, bar chart, column chart, pie chart, geo chart, and scatter chart).
The pro version gives you 6 additional chart types and options, as well as letting you import data from other charts using a live editor.
It also allows you to do things like: auto-synchronize tables and charts with online files, create private charts, allow users to edit charts, and more.
The video below shows you what this plugin is capable of.
Overall, this is a great plugin to install if you plan to make extensive use of tables and charts on your site, and want complete control over the design and presentation of your data.
Test Notes
I initially experienced issues trying to import table data from a CSV file, until I realized the table has to be formatted with the first row containing the column headings and the second row containing the series type (string, number, boolean, date, datetime, timeofday).
Once I reformatted the CSV file correctly, the upload worked fine.
TablePress
TablePress is a free WordPress plugin that lets you easily create and manage tables on your website containing any type of data. From numbers, text, and images, to links, and even math formulas.
How Do The Tables Look?
Here’s the table I created using TablePress by importing the demo CSV file.
There are only a few options available to configure the style of your tables without using custom CSS:
Demo table created using the TablePress plugin.
The table above shows some of the DataTables JavaScript library features in the plugin’s settings enabled (e.g. sorting, filtering, pagination, and search).
Column size seems to be determined by cell data, causing titles in narrow data columns to look unattractive.
However, the plugin provides a ‘Custom Commands’ field where additional parameters from the DataTables documentation can be added to the JS call. This means advanced users can tweak and customize the table further.
Is It User-Friendly?
TablePress is very simple and easy to use. The plugin adds its own admin interface section to the main menu, where you can create and edit tables and then input table data into a visual table builder (rather than in a post), allowing you to update all instances of the table throughout your site.
Additional table editing functions include: copy/duplicate and delete tables, and sorting table data using drag and drop.
Once you’re done creating your table, use a simple shortcode (or template function) to add a table to WordPress posts, pages, or text widgets. This shortcode lets you use the same table across multiple pages.
The plugin integrates with the Data Tables jQuery plugin, so you can enable features like live sorting, pagination, searching, horizontal scrolling, and more.
You can also easily add and delete new columns and rows and include connected/combined cells in your table structure.
Finally, there’s the option to export and import tables individually or in bulk for sharing across sites.
Tables can be imported from Excel (.xls and .xlsx), CSV, HTML, or JSON files and exported/saved/backed up in most of these formats.
As also mentioned, TablePress gives you some basic design options in the settings area, such as enabling the first and last rows to be the table head and footer row, alternating row background colors, row highlighting (when hovered with the mouse), and displaying the table name and description above or below the table.
That’s about all the options you have unless you choose to style your tables using CSS.
Is It Responsive?
Tables created using TablePress are ‘responsive’ only in the technical sense that they will resize as you resize your browser.
They are not ‘mobile’ responsive, however, as all the table does is try to squish everything together, creating a table that looks like this:
This is what mobile users can expect to see when viewing tables created using TablePress (mockup based on WordPress Theme customizer display).
Is It Gutenberg-Friendly?
TablePress doesn’t have its own custom Gutenberg block. If you’re creating posts or pages using the Gutenberg editor, you will need to copy and paste the shortcode generated by the plugin into a Shortcode block.
Paste your TablePress shortcode into a shortcode block to display tables using Gutenberg.
Additional Plugin Info
With over 800,000+ active installations, TablePress is one of the most popular table plugins available for WordPress.
If you plan to add multiple instances of the same table to different posts, pages, or areas of your site, or if you only need to add basic tables to your content using a simple CSV style implementation – then TablePress is worth a download and play.
Donate to the plugin developer and, hopefully, this plugin will keep getting better.
Test Notes
I found that the easiest way to update table data in TablePress is to create and export your table (e.g. as a CSV file), then edit the file directly and when done, simply re-upload and overwrite your existing table using the import function.
When testing this plugin, however, I made the mistake of importing my demo CSV file (with 8,619 rows of data) first.
I then had to painfully scroll down the page and wait for thousands of rows to load on my screen before I could get to the table settings section, which is located below the table builder.
This process would have been much easier and faster if I had followed my own advice, and created a new table first, configured the settings, then imported the large CSV file – overwriting the newly-created blank table.
Ninja Tables
Ninja Tables lets you create, manage, and customize data tables in WordPress with a range of built-in styling options.
You can also import large tables and even tables created using some of the other plugins covered in this post.
How Do The Tables Look?
Although this plugin has a lot of customization features, the free version only gives you limited options in terms of design.
Demo table created using Ninja Tables.
If you want to take advantage of all the plugin’s customization features, consider upgrading to their Pro version.
NinjaTables lets you create and add great-looking tables to your content in WordPress.
Is It User-Friendly?
I only tested the free version of this plugin. The plugin’s interface seems easy and user-friendly enough, but you can only get to the good stuff by upgrading to the Pro version.
Nonetheless, I was able to create a table manually and import data from my demo CSV file without a problem.
Is It Responsive?
Tables created using NinjaTables resize with your browser and are mobile responsive.
How users can expect to view tables created using NinjaTables. (Mockup made using WordPress theme Customizer display.)
A nice feature of this plugin is the ability to set different responsive breakpoints to specify how your table columns should display when viewed across different devices.
For example, you may want data in several columns to be initially hidden behind a plus (‘+’) symbol when viewed on a mobile device.
NinjaTables lets you select which columns should be initially hidden when viewed on different devices.
Is It Gutenberg-Friendly?
Ninja Tables adds a custom Gutenberg block that lets you select your table from a drop-down menu and provides an ‘Advanced’ field for adding CSS.
Ninja Tables Gutenberg Block
Additional Plugin Info
Even though I only tested the free version of this plugin, Ninja Tables seems easy to use and gives you fine control of your column settings and data insertion.
You can edit/bulk edit, delete, and duplicate data rows and sort your table data using drag and drop.
As mentioned, with the Pro version you get a lot more. We’re talking features like global default settings for your tables, and other handy options like allowing users to filter, search, and sort tables.
The plugin also gives you access to advanced customization features like CSS styling, setting max column widths, conditional column formatting – as well as the ability to display Google Sheets as tables in WordPress, and WooCommerce integration.
Test Notes
A disappointing aspect of this plugin is that you need to upgrade to the Pro version to access functionality that other plugins offer in their free versions. Such as the ability to add media to table cells, use colors, align text, merge cells, specify pagination breakpoints, etc.
On a positive note, this looks like a very good plugin and judging by the reviews, users seem to be very happy with the plugin’s features.
wpDataTables – Tables & Table Charts
wpDataTables Lite is a feature-rich plugin with an ‘Enterprise’ feel.
As soon as you install it and start going through the settings, you get a sense that there’s nothing ‘Lite’ about this plugin. It’s meant to help you create and manage ‘heavy-duty’ tables.
Which turns out to be exactly what the developer had in mind.
They call this plugin a “data manager” and it’s a spot-on description of what it does.
wPDataTables is completely customizable, letting you import large batches of data into WordPress (according to the developer, it can handle tables with millions of rows of data), and use their Table Constructor, or a visual builder tool like Visual Composer to compile and manage tables on your site.
How Do The Tables Look?
Here is the demo table I created using wpDataTables Lite:
Demo table created using wpDataTables.
wpDataTables creates clean looking tables right out of the box, which is a good thing because it has extensive built-in customization features for designing tables to look exactly the way you want them to.
Is It User-Friendly?
This plugin falls into the same ‘double-edged’ sword of user-friendliness as WordPress.
It’s easy enough to use right off the block, but if you really want to get the most benefit from it, you’ll really need to spend some time looking under the hood and learning all you can do with it.
Fortunately, this plugin provides extensive user documentation and tutorials to help you.
In short, yes, it’s user-friendly and even the free version is feature-rich. You can fully customize and edit your tables and table charts using data linked from imported Excel, CVS, JSON, XML, and PHP data.
You can also create tables manually, link to data sources hosted externally, and create MySQL-query-based tables.
Is It Responsive?
wpDataTables is indeed a WordPress responsive tables plugin, although responsive mode is not available in the free version.
This is how mobile device users will view tables created using wpDataTables (mockup created using WordPress Theme customizer).
Is It Gutenberg-Friendly?
The plugin installs with its own custom Gutenberg block. The premium version unlocks additional Block editing features such as the ability to choose table view (Regular vs Excel-like) and set variable placeholders.
wpDataTables Gutenberg block.
Additional Plugin Info
The free version supports most column data types (e.g. strings, images, integers, date and time, URL and email links) but has some limitations.
Choose the free version if you only plan to add simple tables to content occasionally and don’t require the advanced features offered in the Premium version.
Which include options to create tables manually, display tables from Google Spreadsheet files, use conditional formatting, calculation functions, advanced Google Charts, table data export tools, and more.
This short promo video shows some of the plugin’s advanced capabilities:
Test Notes
Even though I specified colors for the table header, odd rows, and borders in my global settings – my demo table came up looking like the one shown in the screenshot above. So I’m guessing that colors must be a Pro feature.
Nonetheless, this feels like a solid plugin built to handle huge data sets and manage large responsive tables in WordPress.
If you plan to run large data tables on your WordPress site, consider using this plugin. Although you will need to update to the Premium version to unlock all of its table management and customization features.
Data Tables Generator
Data Tables Generator is a powerful table generating plugin that provides a spreadsheet-style input screen that can even perform simple mathematical calculations.
There are many options available, including the pagination of large data sets, the addition of a search box to filter table contents, sorting of table contents by column, and many styling options.
How Do The Tables Look?
The free version of this plugin doesn’t allow importing of data or access to most of its customization options, so my focus when testing this plugin was to simply create a table manually quickly without spending too much time on its design.
Demo table generated using DataTables generator.
Is It User-Friendly?
If you’re familiar with creating spreadsheets using programs like Excel, then creating tables using this plugin will feel like an easy and intuitive process.
Is It Responsive?
This plugin offers a responsive mode setting for each table that lets you choose from four options: standard, automatic column hiding, horizontal scroll, and disabled.
With standard mode, if table content doesn’t fit, the columns display below each other with one cell per row, as shown in the screenshot below.
Automatic column hiding hides columns for tables with reduced dimensions and makes these visible by clicking on an icon added to each table row.
Horizontal scrolling keeps the full dimensions of the table but makes it scrollable so that all content can be viewed by scrolling through the table horizontally.
Disabled keeps the full dimensions of the table and does not make it scrollable, cutting off a significant portion of the table as a result.
How mobile users will view tables created using Data Tables Generator in ‘Standard’ responsive mode.
The responsive mode options are nice and do a reasonable job of making table contents more accessible on a mobile device.
Is It Gutenberg-Friendly?
This plugin doesn’t have its own Gutenberg block. To add tables to posts and pages you will need to copy and paste the table shortcode into a Gutenberg Shortcode block.
Use the Gutenberg Shortcode block to add tables to content.
Additional Plugin Info
Data Tables Generator by Supsystic is a powerful and feature-rich table plugin with many advanced features available in the Pro version.
It is a great option for websites that use tables regularly and want to make those tables sortable, searchable, filterable and add pagination so that large data sets are displayed across multiple pages.
Test Notes
I found this plugin easy enough to use but the free version is quite limited. To access all the good stuff requires upgrading to the Pro version.
WP Table Builder
WP Table Builder is a drag and drop table builder plugin for WordPress. That’s pretty much what this plugin does. It lets you build tables in WordPress.
How Do The Tables Look?
Here’s a table I built using this plugin:
Demo table built with WP Table Builder.
Is It User-Friendly?
According to the plugin developer, “It’s insanely easy to create responsive tables with WP Table Builder.”
I found the process of building tables using their simple drag and drop elements to be easy and fun.
You literally build your table by adding columns and rows and then using drag and drop to add elements like text, images, lists, buttons, and star ratings to each cell.
Each element offers its own formatting options and tables are added to content using a shortcode.
Is It Responsive?
With WP Table Builder, you can toggle the ‘Make Table Responsive’ options on or off for individual tables.
When enabled, tables reconfigure their layout dynamically to adjust to different browser sizes.
How tables built with WP Table Builder will look to mobile users (mockup built using WordPress Theme Customizer).
Is It Gutenberg-Friendly?
This plugin doesn’t have its own Gutenberg block. To add tables to posts and pages you will need to copy and paste the table shortcode into a Gutenberg Shortcode block.
Add tables to content using the Gutenberg Shortcode block.
Additional Plugin Info
This is a useful plugin for building simple pricing, list, or comparison tables manually for blogs, offices or small businesses, school projects, etc.
There is no data import/export function—you have to manually build each table.
Test Notes
The part of being “insanely easy to create responsive tables with WP Table Builder” that drove me insane was trying to delete unwanted rows from my table using the “cell management mode,” which “offers options like Add New Row, Add New Column, Merge Cells, Split Cells, and more.”
I caught a glimpse of this when I started building the table, but I wasn’t able to find these options again after my table was built and I wanted to customize it.
Turning The Tables – A Quick Summary…
Using a WordPress plugin to create your tables lets you do some cool things to make your content stand out on your website.
In addition, designing tables in WordPress gives you the following benefits:
A cleaner way of displaying data.
A unique way to add formatting to long patches of text on a page.
An easier explanation of how different products or services compare to one another.
A better way to sell customers on certain items if you design tables with subtle hierarchical “preferences” (like making the most popular pricing tier larger and more colorful than the surrounding ones).
A more efficient method for creating media for your site that’s easy to update. There’s no need to recreate a table outside of WordPress, re-upload, and re-embed. Just make the changes within WordPress.
A fun way to add interaction to your site (if you build yours like a calculator or apply transition effects to it).
Several of the plugins listed above make use of the excellent Data Tables or Tablesorter libraries to extend their feature list by providing sorting, searching, filtering and paging on the client-side.
Others just go for the bare essentials. Most importantly, however, you now have a better idea of what the tables created using these plugins look like, how easy they are to use, what responsive features they offer, and how well they play with Gutenberg.
So…
Which WordPress Table Plugin Should You Choose?
Well, that all depends on what sort of tables you want to build, how much data you need to display, how static the data is, how much control you want over the styling, and any other specific features you want in your tables.
WordPress plugin and theme developers have recognized a need for this—especially as businesses seek out better ways to display professional-looking tables on their site.
So, we now have a number of plugins that come equipped with table-building and formatting features.
WPMU DEV Ratings
I tested each of these WordPress table plugins for visual attractiveness, ease of use, responsiveness, Gutenberg friendliness, and overall features.
Here’s my verdict:
Overall
Visualizer:
TablePress:
Ninja Tables:
wpDataTables:
Data Tables Generator:
WP Table Builder:
Our Recommendations
If you want to quickly and easily create great-looking tables and eye-catching charts to display information on your site, then get Visualizer or Ninja Tables.
These are probably the best plugins for overall table creation in WordPress and should suit the needs of most WordPress users.
If you plan to add responsive tables to display very large amounts of data and are looking for features that will give you complete customization, then wpDataTables or Data Tables Generator by Supsystic are both excellent choices.
As mentioned earlier, wpDataTables feels more like an Enterprise-level tool, while Data Tables Generator will suit anyone familiar with building tables using spreadsheet applications.
If you only plan to add simple tables to your content, then install TablePress or WP Table Builder.
Both of these plugins are very easy to use and allow anyone to create and add tables to posts and pages and edit table content from a central table-building interface.
Keep in mind that TablePress lets you import data from external sources like CSV files, whereas with WP Table Builder you have to create your tables manually.
As you can see, each of the above plugins does some things better than others. Try the free versions of these plugins first to see if it will suit your needs.
I hope this information helps you choose the best WordPress table plugin for your (or our client’s) sites. Find the right plugin that gives you the most joy and you will soon be dancing on tables too!
Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this:
(Make sure to grab the Pen and make it a bit smaller to see how the design works responsively.)
Bradley’s example markup looks like this – clean, accessible, regular ol’ HTML:
<table>
<thead>
<tr>
<th>Type of Food</th>
<th>Calories</th>
<th>Tasty Factor</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Type of Food</span> Slice of Pizza</td>
<td><span>Calories</span> 450</td>
<td><span>Tasty Factor</span> 95%</td>
</tr>
</tbody>
</table>
How does he make that card effect? He uses flexbox on smaller screens and sets the span elements to reveal themselves.
However! I’m not a big fan of those spans. They’re hidden on larger screen sizes but the markup is still there, so it doesn’t feel particularly clean to me. I was working on a project a little while ago where we stumbled on the same problem. We decided to use data attributes on each td instead, like this:
<table>
<thead>
<tr>
<th>Type of Food</th>
<th>Calories</th>
<th>Tasty Factor</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Type of Food">Slice of Pizza</td>
<td data-title="Calories">450</td>
<td data-title="Tasty Factor">95%</td>
</tr>
</tbody>
</table>
Then we can grab that data attribute in our styles and render it on the page in a pseudo element:
td:before {
content: attr(data-title);
}
From there we absolutely position the pseudo element to the side and only show it on smaller screens with a media query. I’m uncertain about the accessibility implications of this but it just feels a bit easier to read and understand in my opinion.
Either way, I think this post is a great reminder about all the tricky issues that pop up once you start using tables. There’s so many ways to handle things responsively and those decisions should entirely be made on the context of the design.
Responsive tables...
When you need to compare data up and down columns, it's probably best to largely leave the table structure alone and allow scrolling.
"Expando Rows" is a concept where multiple related rows in a <table> are collapsed until you open them. You'd call that "progressive disclosure" in interaction design parlance.
After all these years on CSS-Tricks, I have a little better eye for what the accessibility concerns of a design/interactivity feature are. I'm not entirely sure how I would have approached this problem myself, but there is a good chance that whatever I would have tried wouldn't have hit the bullseye with accessibility.
That's why I'm extra happy when someone like Adrian Roselli tackles problems like this, because the accessibility is handled right up front (see the videos in all the major screen readers).
You can't position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol' <table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row.
The issue boils down to the fact that stickiness requires position: relative to work and that doesn't apply to <thead> and <tr> in the CSS 2.1 spec.
There are two very extreme reactions to this, should you need to implement sticky table headers and not be aware of the <th> workaround.
Don't use table markup at all. Instead, use different elements (<div>s and whatnot) and other CSS layout methods to replicate the style of a table, but not locked out of using position: relative and creating position: sticky parent elements.
Use table elements, but totally remove all their styling defaults with new display values.
The first is dangerous because you aren't using semantic and accessible elements for the content to be read and navigated. The second is almost the same. You can go that route, but need to be really careful to re-apply semantic roles.
Anyway, none of that matters if you just stick (get it?!) to using a sticky value on those <th> elements.
It's probably a bit weird to have table headers as a row in the middle of a table, but it's just illustrating the idea. I was imagining colored header bars separating players on different sports teams or something.
Anytime I think about data tables, I also think about how tricky it can be to make them responsive. Fortunately, there are a variety of ways, all depending on the best way to group and explore the data in them.
This is a very difficult question for most entities when you design your schema. In some rare cases, there seems to be an “obvious” candidate, such as a variety of ISO standards, including:
