Tables in WordPress: Insert your table without plugin or coding

Author: Categories: WP Tutorials
Updated: September 2, 2019
Tables in WordPress: Insert your table without plugin or coding

In the last article about columns we mentioned that tables were used in older WordPress versions to create columns. To add table in WordPress website you would need to:

  • Insert HTML code; or
  • Install 3rd party plugin (for example TablePress)

Third party plugins were the most common way because you were able to work with many additional functions and features. You could add header, footer or sort table data as you liked.

Because tables are usually used to present items and prices, all our Directory and Multilingual & Translated themes include special element called Price table by default. You can use it very easily in Pages to present and administer prices in attractive way.

Price table element

With Price table element you can show prices in more appealing way

 

WordPress 5.0 introduced new block editor called Gutenberg that handles content using blocks. One of these blocks is specially developed for creating tables. Thanks to WordPress Table block you can create simple tables without any 3rd party plugins.

Today we will look at Table Block in more details and talk about:

Why are tables in WordPress practical

Tables in WordPress – used in food blog recipes

Tables help you to better organize all ingredients in your recipes

Tables have universal usage in Posts and Pages. Basic functionality is to organize data or numbers. Tables are also beneficial for bloggers. For example travel bloggers can compare prices for individual destinations. Food bloggers can easily create list of ingredients or required quantity.

Last but not least it is possible to use tables to present opening hours or price tables of services and products. It does not matter if you have website for restaurant, beauty salon or bakery. You’ll find usage for tables on your website for sure.

How to use Table block and create table in WordPress (without plugin)

Creating tables in WordPress using block editor is a piece of cake. Using Table block you can create tables in few clicks without plugin or coding. Let’s have a look at how it works:

  • As a first thing you need to insert Table block. You can do it by clicking on “+” that is located in top bar or anywhere within editor. After that you can choose particular block.

    Add tables in WordPress by clicking on “+”

    Adding tables by clicking on “+”

  • It is also possible to insert WordPress Table block using slash “/“, following word “table” to search for table block.

    Add Table block with slash “/”

    Adding tables using slash “/”

  • After adding Table block to your page or post, you have to set basic settings such as number of columns and rows.

    Table block with basic settings

    After table is created, let’s set number of columns and rows

  • Done. I’ve just created a simple table in WordPress without plugin in less than a minute.

 

You can look forward to our new Citadela theme, where you’ll be able to make use of Table block. Learn more about Citadela and how it will look.

Explore Citadela

 

Table block settings in toolbar

Now you know how to make a table in WordPress. Next we will show you how to work with it.

Top toolbar above the table allows you to make changes to styling and formatting. Using these settings you can change how will the table look like. Don’t forget that final look always depends on active WordPress theme that you use.

What can be changed?

1. Block styles

Using first icon you can select tables styles. You can choose one of 2 options:

  • Default – table cells will have borders, without any background. Background color for the whole block can be added later.
  • Stripes – table without borders, but every second line will be highlighted using background. This style is more modern and less formal.
Default block style and Stripes block style

Choose your Table block’s style between Default or Stripe look

 

2. Aligning WordPress Table block

Table alignment can be also changed in the top toolbar above block. You can choose one of the classic ones such as left, right or center, but you can also make table wide or full width. Availability of the last two always depends on active WordPress theme that you use.

3. Formatting table content

Text or numbers inside tables can be set to bold or italic. You can add link to other page, graph or image.

4. Number table of columns and rows

How to add table columns or rows in WordPress? In Table block it’s very easy. This block allows adding or removing cells very quickly. Simply click on “Edit table” and after that on action you would like to do. If you click on “Add Row After”, new row will be created right away at the bottom.

Add row after in created table

Easy way of adding next row in just 2 clicks

 

Table block settings in inspector

While top toolbar enables you to change settings for table cells, right toolbar called Inspector is used for more complex settings of Table block. Also here you can configure block styles (Default or Stripes), but what more, you can also set background color and table width.

Table Settings

By default table cells dynamically adjust to amount of text that is inside. You can also allow function “Fixed width table cells”. All cells will have the same width no matter what you put inside.

Fixed width table cells feature

If you enable “Fixed width table cells” feature, every cell will have the same size

 

Color Settings

Inspector also allows you to change table background color. If you have selected Default style, whole table will have the same background color. If you have selected Stripes, only every second line will have background set.

Color settings of Table block

Changing block color

 

Extra tip: How to place table next to the image

Do you need to have table and image side-by-side? To do it you need to use Columns Block. This block will allow you to insert different content types into columns and have them nicely aligned.

How to do it?

Insert Table Block into one column and Image Block into second. You’ll achieve nested table inside WordPress Column Block next to the image. It’s very simple and you do not have to worry about alignment or responsive version.

Nested table in WordPress Columns block

With help of Columns block you can put your table next to the image

 

You can read more about Column block in our article How to make columns in WordPress without plugin.

Comments (2)

Leave a Reply

Your email address will not be published. Required fields are marked *

Your comments help us to improve our products and services so we keep recording them. We use the comment also for future reference. For further details please see our privacy policy

Pre-sale Questions