Adding a table in your posts makes it looks presentable and understandable depending on the data you are trying to bring out or present to your audience.

Tables are an important tool to sort and present data in an understandable format, be it gadgets reviews, price of things and others. It can be done in different ways on WordPress (using plugin or HTML) but blogger only uses HTML.

If you lack the knowledge of HTML or CSS, this article will help you bring the code in order to be easy for you to implement on your blog or website. However, it’s easy to edit the contents of the HTML since blogger allows HTML view while WordPress allows visual Editor.

Now, let’s dive in the tutorial and make things done easily. Firstly, if you need to watch the tutorial video, you can watch it below for easier comprehension.

I hope that was cool, if you don’t still understand, you can go ahead and use the tutorial below.

How to add Tables to Blogger Posts and Pages

  • Firstly, go to your   blogger dashboard   and click on “NEW POST” to create a new post.
  • Switch to “HTML” and paste this code below:

<table border=”1″ bordercolor=”#000000″ cellpadding=”3″ cellspacing=”3″ style=”background-color: white; width: 100%;”><tbody><tr><th>MENU 1</th><th>MENU 2</th></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr></tbody></table>

  • Then switch to “Compose” and the table would appear on your post. You can edit it and add more columns and rows to the table.

  • That’s great!

How to add Tables to WordPress Posts and Pages

  • Go to your WordPress dashboard and click on “ADD NEW” to create a new post.
  • Then, switch to “TEXT” and paste this code below:

<table border=”1″ bordercolor=”#000000″ cellpadding=”3″ cellspacing=”3″ style=”background-color: white; width: 100%;”><tbody><tr><th>MENU 1</th><th>MENU 2</th></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr></tbody></table>

  • Switch back to “Visual Editor” and use the tutorial below to add more column and stylish it.

  • That’s great!

How to Stylish the HTML table code in Blogger and WordPress

To add more column, apply the following tutorial ;

<table border=”1″ bordercolor=”#000000″ cellpadding=”3″ cellspacing=”3″ style=”background-color: white; width: 100%;”><tbody><tr><th>MENU 1</th><th>MENU 2</th></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr>***<tr><td>Prexblog</td><td>Prexblog</td></tr>***</tbody></table>

Copy the “Bold” color code and paste it above to add more columns. Keep adding, your column will be long.

To add more row, apply the following tutorial;

<table border=”1″ bordercolor=”#000000″ cellpadding=”3″ cellspacing=”3″ style=”background-color: white; width: 100%;”><tbody><tr><th>MENU 1</th>**<th>MENU 2</th>***</tr><tr>*<td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr></tbody></table>

Copy the bold code above and paste it before to add more row (MENU 3). Keep pasting it to add more.

To stylish the HTML code

<table border=”1″ ***bordercolor=”#000000″ ***cellpadding=”3″ cellspacing=”3″ style=”***background-color: white***; ***width: 100%***;”><tbody><tr><th>MENU 1</th><th>MENU 2</th></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr><tr><td>Prexblog</td><td>Prexblog</td></tr></tbody></table>

Background color of the HTML, you can set it to any color of your choice. it’s set here at default as black which is #000000 and #FFFFFF is for white color. Find color codes of your choice or you can simply apply the name of the color directly e.g white, blue, green and among others.

Border color of the HTML which is the line of the body of both the column and row. You can use color codes or the name of the color to edit it to your taste.

Width of the HTML table can be set at percentage depending on your website width but 75% or 100% are recommended for a responsive website.

I hope is helpful? Any questions, you can ask below and if it works for you, kindly share your experience!



Website Tutorials
Precious Agbontan

Precious Agbontan

I love writing about daily latest phone reviews and specifications, website tutorials, network news, computers, technology news and other issues or news related to technology.

Read More
Comment Using Disqus

Comment Using Facebook