A comparison table allows you to compare multiple items horizontally or vertically, highlighting their key features, specifications, and other features. It’s a powerful way to let users make informed decisions.
Although you can create comparison tables with the default WordPress table block, it has numerous limitations. You cannot add images, buttons, and lists to the default block.
テーブルバーグ is a wonderful table builder plugin that overcomes all these limitations. In this article, we’ll show you two methods of how to create a comparison table in WordPress – with a plugin and no plugin.
美しいテーブルを作る
ブロックエディター付き
Method One: Create a Comparison Table Without a Plugin
You’ll get a default Table block in the WordPress block library. You can create a basic-level comparison table with it.
Step 01: Add the Table Block to Your Post/Page Editor
をクリックする。 プラス(+)アイコン. Type テーブル in the search box. Once the block appears, add it to the editor of your post/page.
Step 02: Define the Column and Row Number
Define the column and row number as you want for the table. In this tutorial, we’ll select 4*3 for the comparison table.
Step 03: Add Information to the Table
Now, add information to the table. You can only add textual information; no images, buttons, or any other block.
Here is a demo table we have made ready for the post.
Method Two: Create a Comparison Table with TableBerg
As you can see in the first method, you cannot add any image, button, or else to the comparison table created with the default table block. But without these elements, comparison tables fail to trigger users.
テーブルバーグ is a wonderful Gutenberg-friendly table builder plugin that can help you overcome all these limitations.
ステップ 01: TableBergプラグインのインストール
Log into your WordPress dashboard. Go to プラグイン > 新規プラグインの追加. Type テーブルバーグ in the search box to find the plugin. Once the plugin appears below, hit the Install Now ボタンをクリックする。 アクティベート it afterward.
Step 02: Add the TableBerg Block
Open a post or page. Add the テーブルバーグ・ブロック from the Gutenberg editor.
ステップ03:行数と列数の選択
Select the number of rows and columns as you do with the default table block. Hit the テーブル作成 button after that. We’ll select two (2) columns and four (4) rows.
ステップ04:テーブルにコンテンツを追加する
Add headings to the columns. Hit the プラス (+) icon and select the block as you want. Select the イメージブロック after that. This will allow you to add an image to the cell.
# Add Images to the Table
You can see we have added an image respectively to each column.
# Add Lists to the Table
Next, select the リストブロック. Using this block, you can list all the features of your product. Do this to the respective row of each column.
# Add Buttons to the Table
Now, add the ボタンブロック to the table. This will allow you to add a CTA button for each product.
Once the blocks are added, you can customize them from the スタイル タブをクリックしてください。
Thus, you can create versatile and multipurpose comparison tables using the TableBerg plugin.
結論
Creating comparison tables can greatly enhance user experience by presenting information in a structured and easily digestible format. TableBerg promises to revolutionize your WordPress table building experience with more stunning releases in the coming days.
Here’s a quick guide on how to remove table borders in WordPress so you can make your table design more captivating.