How to Add a Table to WordPress Without a Plugin?

Regardless of the sphere of your performance, you need a well-organized and designed website. It can have many components such as tables, charts, lists, forms, etc. Yet, the most eye-catching and viewable part of the WordPress site still remains the table. They might contain necessary data which can be more understandable if added to the tables. Yet, here we encounter the question of how to add them to the WP site. As we may know WordPress gives the user many functionalities due to the plugins. Here you may find plugins for almost every action that you might perform in WordPress, such as creating tables, forms, galleries, pop-ups, etc. Yet, in some cases, you want to build or create something on your website without using them for some reason. So, today we are going to teach how to add a table to WordPress without a plugin.

Why Add A Table Without Plugin?

You may probably wonder why not benefit from the many huge advantages of the WordPress Tables plugin. This is because in some cases the plugins slow down your website performance or the provided options are not enough for your needs and requirements. And on this condition, you need to pay additionally to get the Pro version.

To avoid these kinds of issues some users and website owners decide to find ways to do this or that action without the WordPress Tables plugin usage. So is in the case of building tables.

At this point, we shall discuss how to add a table to WordPress in 4 easy ways.

The First Way: Gutenberg Block Editor

One of the many beneficial advantages of WordPress is Gutenberg Editor. It splits the content paragraphs into different blocks that can be edited separately.

So, if you use the Gutenberg Editor instead of the Classic Editor then building a table on your WP site is a matter of minutes.

Here is a short guide on how to create a table using this Block Editor:

Step 1

Enter your WP post and click the “+” button on the right side of the block.

Step 2

Find or search the “Table” function.

Step 3

Select the number of rows and columns and tap the “Create a Table” button.

Step 4

After that, you will be able to change the style and design of the newly-created table, insert the header and footer, change the background or text color, etc. directly within the Editor.

The Second Way: Google Docs

So, the next easy method to add a table is utilizing Google Docs. This can be highly effective when you still use the Classic Editor. It does not provide the table creator tools. So it is more convenient to create one on Google Docs and copy/paste it on your WP post or page.

Here are the main points that you need to fulfill:

Step 1

First of all, you need to create a Google Doc.

Step 2

After that, you should insert a table within a newly- built doc. So, here you have to choose the row and column quantity to insert in the doc.

Step 3

Copy the table in your Google Docs and paste it into your WordPress post easily.

The Third Way: Tables Generator Software

This one is too simple. All you need to do is enter the Tables Generator website and choose one of the offered methods, such as:

• LaTex
• HTML
• Text
• Markdown
• MediaWiki

Let us discuss how to insert a table with the very first variant- Latex:

Step 1

Mention the table size entering the “Table”- “Set size” section.

Step 2

Edit the table content by copying and pasting it from another place such as google docs, web pages, etc. Or edit the content directly in the editor.

Step 3

Format the table cells by adjusting the alignment or borders.

Step 4

After completing the table building, click on the “Generate” button and get the LaTex code. Then you should copy the code and paste it on your WP text.

So here is the code that has been generated after the above-mentioned action:

\begin{table}[]
\begin{tabular}{|l|l|l|l|l|}
\hline
1  & 2  & 3  & 4  & 5  \\ \hline
6  & 7  & 8  & 9  & 10 \\ \hline
11 & 12 & 13 & 14 & 15 \\ \hline
16 & 17 & 18 & 19 & 20 \\ \hline
\end{tabular}
\end{table}

By entering this code, we shall get this table on our document:

The Fourth Way: HTML Tags

This is an alternative method for those who know HTML (the HyperText Markup Language). It tends to create a table by utilizing tags, such as:

• <table>
• <tbody>
• <tr>
• <td>

So at this point, we shall discuss how to write a code consisting of HTML tags. Here is the code as an example that can be utilized to create a table.

You may use and text file to write the code. And one of the most recommended code editors is Sublime.

<table style="text-align: center; height: 152px;" border="1" cellspacing="0" cellpadding="0" width="390">
	<tbody>
		<tr style="background-color: #e9e9e9;">
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
			<th>Title 4</th>
		</tr>

		<tr>
			<td>Detail One</td>
			<td>Detail Two</td>
			<td>Detail Three</td>
			<td>Detail Four</td>
		</tr>

		<tr>
			<td>Detail One A</td>
			<td>Detail Two A</td>
			<td>Detail Three A</td>
			<td>Detail Four A</td>
		</tr>
	</tbody>
</table>

Now, let us give you a full explanation of these tags and the whole structure for building this kind of table easily.

• <table>- as you may see, the code piece begins with the <table> HTML tag, that defines the whole table.
• <tbody>- is written for grouping the body content in your table.
• <tr>- is used for creating each of the rows.
• <th>- this tag is utilized for defining a header cell in the HTML table.
• <td>- this is to identify the data cells in the table.

In the first line, you see:

• Text alignment
• Height
• Border
• Spaces between the cells
• Cell padding
• Width

In the next section, you see the table’s background color that is grey according to the selected color hex code: #e9e9e9.

Also, the headings are four and carry 1, 2, 3, 4 Titles.

After that, the code involves the table data with the content Detail 1, 2, 3, 4. In the end, we need to close at first </tbody> and after that the entire </table>.

We may bring one more valuable example. And it refers to the cases when you want to span the rows and columns. This happens when we want to mention something along with one of the rows and not for all the rows or columns. In this case, we should utilize another structure of the HTML code. Here is an example:

<table>
  <tr>
    <th>Ann</th>
  </tr>
  <tr>
    <th>John</th>
  </tr>
  <tr>
    <th>Karen</th>
    <td>Accountant</td>
  </tr>
  <tr>
    <td>Jonathan</td>
  </tr>
  <tr>
    <th>Michael</th>
  </tr>
  <tr>
    <th>Marie'</th>
    <td>Accountant</td>
  </tr>
  <tr>
    <td>Sonya</td>
    <td>Accountant</td>
  </tr>
  <tr>
   <td>Jenny</td>
  </tr>
  <tr>
    <th>Simon</th>
    <td>Accountant</td>
  </tr>
  <tr>
    <th>Joshua</th>
    <td>Accountant</td>
  </tr>
  <tr>
    <th>Jemmy</th>
  </tr>
  <tr>
    <th>Kevin</th>
  </tr>
  <tr>
    <th>Nan</th>
  </tr>
  <tr>
    <th>Nancy</th>
    <td>Accountant</td>
  </tr>
  <tr>
    <th>Mary</th>
    <td>Accountant</td>
  </tr>
  </table>

And here is the result:

You are able to create or insert everything you want into this table. All you should do is be very attentive while writing the HTML code.

Wrapping up

Nowadays there are many blogs and websites everywhere on the Internet. And it is too essential to have qualified, well-organized, beautifully- designed pages. In this big deal, you need to keep your blog as clear as possible so that the user has his/her best experience on your web page. All you should do is transfer information in a good, viewable, and understandable way. So, here you might highly benefit from tables, charts, etc. And reading this article you have been possibly convinced about their huge functionality.

As you may see, there are many easy ways to add a table. This is to avoid using different plugins. We do not underestimate the huge functionalities of the various plugins that are offered by WordPress. They definitely ease the user experience in this CMS platform especially when they do not have coding skills. Yet, as we mentioned above, the plugins sometimes may cause you to pay additional costs to obtain the Premium version. Or they simply affect your WordPress site speed.

So, on this condition, you have to think of alternative methods to perform this action. And in this article, we offered you 4 ways to add a table to your website without a WP table builder plugins:

1. Gutenberg Block Editor- Table block
2. Google Docs- “Insert”- “Table” function
3. HTML tags- inserting an HTML code
4. Tables Generator Software with its options, such as:
   • LaTex
   • HTML
   • Text
   • Markdown
   • MediaWiki

Each of these variants is described thoroughly in the article. And all you need to do is choose one of them and build a desired table on your WordPress site.

Watch the video tutorial

If you like the article, do not hesitate to find us on Facebook and Twitter. For interesting WP tutorials, please subscribe to our YouTube channel.

Do you want to know about the best Data Table creator plugins? Read the whole article on WPGlob. 
If interested, you may read also about how to create a pricing table on WordPress.

• Author
• Recent Posts

Anahit V.

Anahit V. is a technical content writer. She knows four languages: English, Armenian, Russian, Arabic. She has written many technical contents, articles, and guest posts, as well. Anahit V. works with WordPress and such plugins as Yoast SEO, Forminator, Contact Form 7, Supsystic, etc. She considers that the reader seeks to find simple and available information about a certain topic. So, she writes only SEO-friendly articles using some tools that can highly optimize the content.

Latest posts by Anahit V. (see all)

• Best Cookie Consent Plugins for WordPress | 2024 - April 18, 2024
• Best Chatbot Tools in 2024 - April 17, 2024
• Best WordPress Membership Plugin | ARMember Review - March 29, 2024