How to Create Tables in WordPress Posts?

If you are wondering how to add or create tables in WordPress Posts and pages to structure your data in tabular and organized form, you are exactly at the right place.

When are Tables Used in WordPress blogs?

Tables serve slew of use cases. Tables are essentially used to structure data.

Organizing Data: Tables are an effective way to organize and present data in a structured manner. If you have information that can be represented in rows and columns, such as product comparisons, pricing plans, or statistical data. Tables can make it easier for your readers to understand and compare the information.

Improved Readability: By using tables, you can enhance the readability of complex information. Tables allow you to present data in a concise format, making it easier for your readers to scan and locate specific details they are interested in.

Visual Appeal: Tables can add visual appeal to your blog posts. With WordPress, you can customize the appearance of tables by applying different styles, colors, and formatting options. This can make your content more engaging and visually appealing to your readers.

Comparison and Review Content: If you frequently create comparison articles or reviews, tables can be particularly useful. You can create side-by-side comparisons of features, specifications, or pros and cons, allowing your readers to easily understand the differences and make informed decisions.

Pricing and Product Information: If you have an online store or promote products on your blog, tables can help you present pricing plans, product specifications, or features in a clear and organized way. This can help potential customers quickly understand the options or alternatives available to them.

Data-driven Content: If your blog relies on data-driven content, such as scientific research, surveys, or analysis, tables can help you present your findings systematically. Tables allow you to present numerical data, percentages, and other statistical information effectively.

How to Add Tables In Your WordPress Blogs?

Adding tables in Gutenberg block editor and old Classic editor slightly differs in their approach.

While Gutenberg block editor provides in-built Table block widgets to create and add tables, working with tables in old classic wordpress editor might be little tricky. But, fret not, this blog is just tailored to give you quick insight for adding and editing tables for your wordpress blogs.

Well, there are two basic ways to create and add tables in wordpress:

1. Without using Plugins ( For absolute beginners)
   • Add Tables in Gutenberg Block Editor
   • Create and Edit tables in Old Classic WordPress Editor

Create Tables In WordPress Blogs Without Using Plugins

It is relatively easier to create, add or edit tables in your wordpress blogs even without using plugins.

However, the approaches for creating tables in Gutenberg Block Editor and Old Classic WordPress Editor differ.

How to Insert Tables In Gutenberg Block Editor without Using Plugins?

In order to create table in Gutenberg Block Editor using inherent Table block widget is relatively simpler.

First make sure you have installed WordPress version 5.0 or above as Gutenberg Block Editor was first released as part of WordPress 5.0 in December, 2018.

In order to create a table using Block inserter in Gutenberg Block Editor:

• Open the post where you want to create a table by navigating to Appearance >> All Posts.
• After you have opened your desired wordpress post, click on the plus icon at the top left corner just above the Top Toolbar.

• This table interface gets displayed in your block editor. Input required amount of columns and rows and then click on Create Table button.

• In order to configure the format or settings of the table, place your cursor within the table and click on settings gear icon ( for version < 6.2 ) or ( for wordpress version = 6.2 ) at the top right corner of the editor next to Publish button.
• Then, under the Block tab in the right sidebar, you can configure the Styles, Settings, Colors and Typography for table.

Table settings in Gutenberg editor

• Under Style section, you can either select Default style or set the table style to Stripes to create a table with grey and white stripes
• Under Settings section, there are three toggles to either enable or disable Fixed width table cells, Header section and Footer section.
  • Fixed width Table cells: As the name suggests, when enabled sets a fix value for table width and when table content exceeds the width, the exceeded content is sent to new line.
  • Header & Footer section: This toggle enables the display of header and footer section separately.

• Under Colors section, you can set or change the text and background color for the table. Click on the text or background button and choose any color from the available palette of your choice.
• In order to reset the color settings of table back to its default value, click on the vertical ellipsis next Color section and click on Reset all option.

• Under Typography section, you can either select one of the 4 custom font size which are Small, Medium, Large and Extra Large. Or, you can set the custom pixel size by clicking on icon next to Size.
• Under Advanced section, you can set the HTML anchor for internal linking purposes and can also set an additional CSS class for the table.

In order to remove or delete tables in Gutenberg Block editor, select table and click on the three vertical dots or vertical ellipsis from the top toolbar and click on Remove table

or select the table and press Shift + Alt + Z to remove table at once.

How to add Tables in Old Classic Editor without Plugins using HTML?

Chances are you still might be using Old Classic Editor instead of Gutenberg Block Editor. If that’s the case, the aforementioned procedure for creating tables won’t work for you.

You might be wondering how to create tables in Old Classic WordPress Editor easily. While, there ain’t any inbuilt or inherent Tables option in Old Classic Editor, you can always try some quick fix or hacks to create and add tables using HTML.

First open the post or page where you want to create table.

The Visual tab is selected by default. Click on the Text tab next to Visual tab.

Copy and paste the following HTML code for creating tables.

Note: <tr> tag is used to create separate table rows. <th> tag is used for table heading and <td> tag is used to create individual table items.

So in order to scale your table and add more columns, create more <th> tag with it’s corresponding <td> tags.

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>

This is how the above table is previewed:

Wrapping up

Creating tables is fairly easy in your wordpress blogs no matter which editor you employ. You can also use plugins to add and create tables in your wordpress blogs.