WP Query Loop Block Extension – Table Layout
This WordPress plugin extends the native Query Loop Block by adding support for rendering posts in a <table> layout, in addition to the default list and grid layouts.
How to Use the plugin on Your Website?
Please navigate to your site’s Dashboard, then go to Plugins. Find and activate WP Query Loop Block Extension – Table Layout plugin.
Features
Adds a Table layout option to the core Post Template block.
A new Table View button is introduced within the block toolbar when the Post Template block is selected. It allows you to turn the template into a HTML table.
Table Header is supported.
The table headers are automatically generated based on the name of the inner blocks. Use block namespace by default if not specified. Re-name the innerblocks allows you to specify the name of the table headers and show in the frontend.
Semantic HTML Table structure
When your content is tabular in nature (e.g., posts with date, author, and metadata), using actual <table> elements offers distinct advantages:
- Accessibility: Screen readers can interpret <thead>, <tbody>, and <th> elements properly, improving the experience for visually impaired users.
- SEO & Crawlers: Search engines can more accurately understand the content structure.
- Consistency: Rows and columns are aligned by default, reducing the need for custom grid logic.
Made Customization Easy
- Each inner block within the Post Template Block keeps its native block settings — you can control: Text alignment, Font size & color, Padding/margins and etc. This makes it easy to design your table content without writing any code.
- CSS Variable Customization: The plugin defines several CSS variables for controlling the appearance of the table. These can be overridden using custom CSS.
:root {
--ubc-query-loop-table-header-background-color: #0055b7;
--ubc-query-loop-table-header-text-color: #fff;
--ubc-query-loop-table-header-font-size: 1rem;
--ubc-query-loop-table-header-letter-spacing: 1px;
--ubc-query-loop-table-header-text-transform: uppercase;
--ubc-query-loop-table-header-padding: 10px 20px;
--ubc-query-loop-table-cell-padding: 15px 20px;
--ubc-query-loop-table-row-even-background-color: #f0f0f0;
}