Going 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. On 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 on 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,
| Name | Country |
|---|---|
| David | UK |
| Catherine | France |
Suppose, you would like to add 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 |
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 :
| 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.
| <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 –
| No | Name | Country |
|---|---|---|
| 1 | David | UK |
| 2 | Catherine | France |
Looking for more plugin free tips on WordPress? Read these posts-
Thank you for sharing