WordPressで比較表を作成する方法(プラグインの有無にかかわらず)

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.

Add the Table Block to Your Post/Page Editor

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.

Demo comparison table created with the default WordPress Table block

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.

Install the TableBerg plugin

Step 02: Add the TableBerg Block

Open a post or page. Add the テーブルバーグ・ブロック from the Gutenberg editor.

Add the TableBerg block

ステップ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.

Select the Number of Rows and Columns

ステップ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 image block to the table created by TableBerg

# Add Images to the Table

You can see we have added an image respectively to each column.

Add Images to the Table

# 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 list to the table created by TableBerg

# Add Buttons to the Table

Now, add the ボタンブロック to the table. This will allow you to add a CTA button for each product.

Add buttons to the table

Once the blocks are added, you can customize them from the スタイル タブをクリックしてください。

Customize the TableBerg blocks

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.



テーブルバーグ・チーム