WordPress

How do I create a WordPress table without plugins?

This tutorial explains how to create tables in WordPress without plugins.

After reading this tutorial, you will know how to create tables without the assistance of plugins. All methods explained in this tutorial are easy to implement and include:

The instructions described in this tutorial include screenshots, making it easy for all WordPress users to follow them.

Creating a table in WordPress without plugins:

To begin, open in the dashboard the post or page where you want to add the table.

Place your mouse pointer on the empty space/block in which you want to add the table, and a plus icon (+) will show up, press it.

After pressing the icon, a menu will appear with a search field. Type “table” in the search field and then press the Table icon shown in the screenshot below.

Now you will see two options to define the number of columns and rows. Place your mouse over any of them and increase the number; you can also type it.

The same with rows, type the number or use the arrows to specify the number of rows. Then press the Create Table button.

As you can see, the table was created with 6 columns and 5 rows as defined in the previous step.

Select the column, and the top toolbar will show up, then press the Table icon (See the arrow below).

After pressing the icon, the following options will show up:

  • BS Container
  • Columns
  • Group
  • Default style
  • Stripes

Use them to customize your table.

That’s how you can create a table using built-in tools without a plugin.

How to create a table in WordPress using external tools:

Another way to add a table in WordPress is by copying and pasting it from another source. This is specially useful if you already have a table with content to avoid redoing it.

Below I will show you how to do it using Google Docs, using different text editors like Microsoft Word or LibreOffice.

To begin, open your Google Docs or Microsoft Word/LibreOffice. In the case of Google Docs, press the Insert option in the top toolbar, then select the Table option and drag your mouse cursor to define the number of lines and arrows as shown in the screenshot below, then just click it.

Below you can see the table I created; I added some content inside.

Drag your mouse to select the table, right-click it and press the Copy option as shown in the following image.

All you need to do is paste the table within the WordPress post or page as shown below.

As you can see below, the table was correctly pasted into WordPress.

The process is simple, as previously explained.

Creating a WordPress table using HTML code:

Creating a WordPress table with HTML code is also possible. If you don’t know how to program HTML, don’t worry, below I will explain how to generate this code.

On the post/page where you want to add the table, press the + icon on an empty space or block to add an element.

The displayed menu contains a search field, type html on it and then press the HTML Custom HTML option as shown below.

Paste the HTML code within the HTML container. You can use the code below for testing.

<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
<th class="tg-0lax"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
<td class="tg-0lax"></td>
</tr>
</tbody>
</table>

After copying the code, you can save the draft and see a preview.

As you can see, the table was created successfully.

How to generate a table HTML code:

Generating a table HTML code is pretty easy. For this tutorial, I will use the free online generator you can access through this link https://www.tablesgenerator.com/#.

In the online generator, top toolbar press the Column option and add the number of columns you need. The lower arrow shows a preview of your table.

Then press the Row option and insert the number of rows you need, as shown below.

Once you define the number of columns and arrows, press the Generate button. This will show the table’s code. Press the Copy to clipboard button to copy the code.

That’s how you generate the table HTML code. Now you can paste it in your WordPress as shown in the previous section of this tutorial.

Conclusion:

As you can see, tables are part of WordPress built-in features. Creating them is pretty easy and can be done by all WordPress users independently of their knowledge level; as shown, it only requires a few steps. A limitation of the methods explained in this tutorial before plugins is that plugins allow you to customize your table look. Yet, as you may know, abusing plugins isn’t a good idea since it may decrease your site performance, as less plugins are better for your web traffic. For this tutorial, I used a specific online tool to generate the HTML code, but there are many others available, feel free to try any alternative you consider better.

Thank you very much for reading this tutorial explaining how to create tables in WordPress. I hope it was useful. Keep following Linux Hint for more professional WordPress tutorials and tips.

About the author

David Adams

David Adams is a System Admin and writer that is focused on open source technologies, security software, and computer systems.