Press "Enter" to skip to content

How to Add Tables in Blogger or WordPress Posts and Pages

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=”2″ 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=”2″ 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=”2″ 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 </tbody></table> to add more columns. Keep adding, your column will be long.

    To add more row, apply the following tutorial;
    <table border=”2″ 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 </tr><tr> to add more row (MENU 3). Keep pasting it to add more.

    To stylish the HTML code

    <table border=”2″ 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!

    5 Comments

    1. test1 test1 November 6, 2017

      there are many bargain priced home-for-sale in our city, i was considering buying one.

    2. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thank you

    3. http://www.linux.net http://www.linux.net November 16, 2017

      My fliρ, my turn.? Larry stated eagеrlʏ wіggling to get a chance
      to talk. ?I believe one of thhe bеst thing ab᧐ut God is that he cɑn beаt up
      tthe devil as a result of the satan is scary and mean and ugly and unhealthy and God can beat hhim uρ soo tthe satan can?t hur
      ᥙsѕ likkе he diԁ those drmon fіlled ρeople in Jesus day.

    Leave a Reply

    Your email address will not be published. Required fields are marked *