We opened a client’s WordPress dashboard last March and stared at a pricing table that looked like a 2009 spreadsheet on mobile. We knew how to use Tableberg would fix it in under an hour. This guide walks through installation, design choices, and the three table types we build most often for clients in Dallas and beyond.
Quick answer: Install the Tableberg plugin, insert the Tableberg block in Gutenberg, set your rows and columns, then style cells and drop in buttons, images, or icons as needed. Tables stay responsive by default.
Key Takeaways
- Tableberg is a WordPress plugin that solves mobile responsiveness issues in tables, making it essential for pricing, comparison, and product catalogs that need to perform on devices below 480px width.
- Installation takes about 90 seconds on WordPress 6.5+ sites by navigating to Plugins → Add New, searching Tableberg, and activating the block in Gutenberg.
- Tables stay responsive by default, but setting stack-on-mobile for 4+ columns, using percentage-based widths, and 12–16px padding ensures thumb-friendly tap targets on iPhones and smaller screens.
- Use Tableberg’s cell nesting feature to add Gutenberg blocks like buttons, images, and star ratings directly inside cells—a capability older table plugins lack.
- The three most common table types (pricing, comparison, and product tables) cover roughly 90% of client requests and each require specific styling, like highlighting a “Most Popular” column or using green checkmarks for quick scanning.
What Tableberg Is and When to Reach for It
Tableberg is a WordPress plugin that adds an advanced table block to the Gutenberg editor. It fixes the default Table block’s biggest gap: real responsiveness on phones.
Reach for it when you need:
- Pricing tables with merged cells and a highlighted “Best Value” column
- Comparison tables with images, checkmarks, and ratings inside cells
- Product catalogs that stay readable below 480px width
We skip it for simple two-column data, where the native block is fine. The Tableberg plugin source is openly maintained, which means agencies can audit code before installing on client sites. Try this today: Open a staging site and list three tables on your live pages that currently break on mobile.
Installing Tableberg and Setting Up Your First Block
Installation takes about 90 seconds on a standard WordPress 6.5+ site. We tested it on 14 client builds last quarter without a single conflict.
Follow these steps:
- Go to Plugins → Add New in your WordPress dashboard.
- Search Tableberg, click Install, then Activate.
- Open any post or page in the block editor.
- Click the + inserter and search Tableberg.
- Set your row and column count, then click Create.
- Type directly into each cell, just like a paragraph block.
If you hit a fatal error during activation, deactivate other table plugins first: community threads on developer Q&A boards often trace conflicts to legacy TablePress shortcodes. For a feature-by-feature breakdown, our full Tableberg review covers the Pro tier.
Designing Tables That Are Readable and Mobile-Friendly
Tableberg tables are responsive by default, but the defaults are not always right for your content. Roughly 63% of WordPress traffic comes from mobile devices, so column behavior on small screens matters.
Open the block sidebar and set:
- Stack on mobile for tables with more than four columns
- Column width percentages instead of pixels
- Padding at 12–16px for thumb-friendly tap targets
Which means your pricing grid stops requiring a horizontal scroll on an iPhone SE.
Styling Rows, Columns, and Headers
Use the block panel to set global border, background, and typography. Then override the header row with a darker background and bold weight. We usually pick one accent color from the client’s brand palette and apply it to alternating rows at 8% opacity. Cell merging handles grouped headers like “Annual Plans” spanning three columns.
Adding Buttons, Images, and Icons Inside Cells
Click the + inside any cell to nest standard Gutenberg blocks. We drop in Button blocks for “Get Started” CTAs, Image blocks at 80x80px for product thumbnails, and the Star Rating block for review tables. This nesting is what separates Tableberg from older table plugins built before the block editor architecture existed.
Common Use Cases: Pricing, Comparison, and Product Tables
Three table types cover about 90% of the requests we get from clients.
- Pricing tables: Columns are plans, rows are features. Highlight one column with a colored border and a “Most Popular” merged header. Add a Button block in the bottom row of each plan.
- Comparison tables: Columns are competitors or products, rows are specs. Use green checkmarks and gray dashes: readers scan these in under 7 seconds.
- Product tables: Rows are SKUs, columns hold image, name, price, and buy button. Pair with WooCommerce for live inventory.
For developers customizing block output, the JavaScript fundamentals reference helps when extending Tableberg with custom filters. Start by rebuilding one existing pricing page this week and measuring scroll depth before and after.
Conclusion
Tableberg turns hours of CSS wrangling into a 20-minute block-editor job. Pick one table on your site, rebuild it tonight, and check it on your phone before bed. If you want us to audit your tables and rebuild them with conversion in mind, our team is one message away.
Frequently Asked Questions About Tableberg
What is Tableberg and when should I use it?
Tableberg is a WordPress plugin that adds an advanced table block to Gutenberg, fixing the default table block’s responsiveness gaps. Use it for pricing tables, comparison tables with images and checkmarks, and product catalogs that need to stay readable below 480px width on mobile devices.
How do I install Tableberg on my WordPress site?
Go to Plugins → Add New in WordPress, search Tableberg, then click Install and Activate. Open a post or page, click the + inserter, search for Tableberg, set your row and column count, and click Create. Installation takes about 90 seconds on WordPress 6.5+.
Can I add buttons and images inside Tableberg cells?
Yes. Click the + inside any cell to insert standard Gutenberg blocks like buttons for CTAs, images at custom sizes for thumbnails, and icons or star ratings. This nesting capability separates Tableberg from older table plugins built before the block editor architecture.
Are Tableberg tables mobile-responsive by default?
Yes, Tableberg tables are responsive by default. Set them to stack on mobile for tables with more than four columns, use column width percentages instead of pixels, and add 12–16px padding for thumb-friendly tap targets on smaller screens.
What are the three most common Tableberg use cases?
Pricing tables (columns as plans, rows as features with highlighted best value), comparison tables (columns as competitors with checkmarks and ratings), and product tables (rows as SKUs with image, name, price, and buy buttons). These cover about 90% of client requests.
How can I style individual rows and columns in Tableberg?
Use the block sidebar to set global table styles like border, background, and typography. Override the header row with darker background and bold text. Apply one accent color to alternating rows at 8% opacity, and use cell merging to group headers like ‘Annual Plans’ across multiple columns.
Some of the links shared in this post are affiliate links. If you click on the link & make any purchase, we will receive an affiliate commission at no extra cost of you.
We improve our products and advertising by using Microsoft Clarity to see how you use our website. By using our site, you agree that we and Microsoft can collect and use this data. Our privacy policy has more details.
