How to Create a Table in WordPress without Using Any Plugin

blogging

We need to create tables in WordPress for various purposes. It may be for adding a comparison box, contact book or something else. In most of the cases, we depend on plugins for the result. We covered a separate post on 8 popular plugins to create tables in WordPress. Hope you already read that.

If you are not interested with the plugin, insert HTML tables in your pages. You are free to create beautiful tables and customize them according to your requirements with a basic knowledge of coding.

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,

Name Country
David UK
Catherine France

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.

No Name Country
1 David UK
2 Catherine France

How to Highlight a Particular Column with Background Color ?

To give background color, assign 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 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 :

No Name Country
1 David UK
2 Catherine France

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.

<html>

<head>
<style>
table#tab {
width: 100%;
background-color: #87CEFA;
}
</style>
</head>
<body>

<table id=”tab”>
<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>
</table>
</body>
</html>

Your result should be –


No Name Country
1 David UK
2 Catherine France