WP Rocket - WordPress Caching Plugin

How to Create a Table in WordPress without Using Any Plugin

Sharing is caring!

html tables wordpress

Want to know how to create HTML tables on your website?

Whether you are using WordPress or not, sometimes you need to present data in the form of tables. It may be for product comparison, research, and analysis. In WordPress, you can do all these things using plugins. There are several free as well as premium plugins that allow you to create responsive tables in minutes.

If you are not interested in using plugins, insert HTML tables in your pages. They are easy to use and you can create them with basic coding knowledge or by following this short guide.

Today we’re going to tell you how to create a table in WordPress without using any plugin.

Creating basic HTML tables

Look at the following code,

<table>

<tr>

<th>Name</th>

<th>Country</th>

</tr>

<tr>

<td>David</td>

<td>UK</td>

</tr>

<tr>

<td>Catherine</td>

<td>France</td>

</tr>

</table>

It will generate a basic table like this,

NameCountry
DavidUK
CatherineFrance

Suppose, you would like to include one more column to this table at a later time, titled No. for inserting serial number,

Copy-paste the following tag to the html section of your table.

<th> No.</th> tag for title

<tr> 1 </tr> tag for items.

You don’t need big fields for numbers. So you can re-arrange its width to required size. Then our code will look like this,

<table>

<tr>

<th style=”width: 5px;”>No</th>

<th>Name</th>

<th>Country</th>

</tr>

<tr>

<td style=”width: 5px;”>1</td>

<td>David</td>

<td>UK</td>

</tr>

<tr>

<td style=”width: 5px;”>2</td>

<td>Catherine</td>

<td>France</td>

</tr>

</table>

You will get the following result for this html code.

NoNameCountry
1DavidUK
2CatherineFrance

Creating HTML tables with a background color

To give background color, assign a bgcolor tag to it.

In our last example, we assigned field size to a particular column in this way :

<th style=”width: 5px;”>No</th>

To give background color to the same column, add ‘bgcolor: xxxxx” tag to it where xxxxx is a color value.

Now we are going to assign a light yellow color to number fields.

So the code will be something like this,

<th style=”width: 5px; bgcolor=”#F2EF84“>No</th>

This’s our target :

NoNameCountry
1DavidUK
2CatherineFrance

To get the above output, use the following code :

<table>
<tbody>
<tr>
<th style=”width: 5px;” bgcolor=”#F2EF84″>No</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td style=”width: 5px;” bgcolor=”#F2EF84″>1</td>
<td>David</td>
<td>UK</td>
</tr>
<tr>
<td style=”width: 5px;”bgcolor=”#F2EF84″>2</td>
<td>Catherine</td>
<td>France</td>
</tr>
</tbody>
</table>

In the same way, you can customize the whole table as well. Otherwise, specify color parameters in table’s style sheet. The following code will generate a colorful table in your WordPress pages.

<table style=”background-color: #ffcc99;”>
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>David</td>
<td>UK</td>
</tr>
<tr>
<td>2</td>
<td>Catherine</td>
<td>France</td>
</tr>
</tbody>
</table>

Your result should be –

NoNameCountry
1DavidUK
2CatherineFrance

Looking for more plugin free tips in WordPress? Read these posts-