Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Sunday 21 January 2018

How to Make Table in Blogger blog Post with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to make a table in a Blogger blog post with pictures.
Make Table in Blogger blog Post

What is Table?

According to the website or blog, the table is a data set for example you have a lot of information about your visitors like first name, last name, email address and you can arrange it in a table format.

Why we need to add a Table in the blog?

The table format is the best way to display the details of any products, services, specifications, review, information, and more like - when we are going to publish a post about any product review, specification, some versus content, and provide any information in tabular format then we create a table and show the content in the table format, but in the Blogger platform, there is no feature to adding a table, so here we create or make a Table in the Blogger blog using code, now let's start.

These are the Following Steps:-
Step 1: First go to the blogger blog dashboard and click the theme option, now click customize drop-down Orange button.
Make Table in Blogger blog Post 1
Step 2: Here you see 4 drop-down buttons to the left side of the web page, now click the last Advanced drop-down button and click the other Page Text drop-down button.
Make Table in Blogger blog Post 2
Step 3: Here you can scroll up and go to the last option then choose the Add CSS option.
Make Table in Blogger blog Post 3
Step 4: Now paste the Table CSS code here and then click Save button.
Make Table in Blogger blog Post 4
table.table1 { color:#333; font-family:Helvetica,Arial,sans-serif; width:100%; border-spacing:1px; border-collapse:separate; padding:0 3px;} table.table1 td, table.table1 th { height:30px; transition:all .3s; text-align:center; width:auto;} table.table1 th { background:#B1B6AF; font-weight:700; border-radius: 5px;} table.table1 td { background:#FAFAFA;} table.table1 tr:nth-child(even) td { background:#F1F1F1;} table.table1 tr:nth-child(odd) td { background:#E1DDDD;} table.table1 tr td:hover { background:#666; color:#FFF}
Step 5: Now go to the Posts option and edit the post where you add table format.
Make Table in Blogger blog Post 5
Step 6: Here you click the pencil icon which shows the top left side of the webpage and select the HTML view option.
Make Table in Blogger blog Post 6
Step 7: Now copy the Table HTML code and paste where you want to add a table format and in the table HTML code, you can change the heading and data according to your content then click the Update orange button for saving the changes.
Make Table in Blogger blog Post 7
<table class="table1">
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>
Step 8: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I make a table in the blog post, if you are thinking to make a table in your blog post then first look at the table how it looks like in my demo blog.

58 comments:

  1. it really help me lot visit https://guest-posting.blogspot.com

    ReplyDelete
  2. I Love tech tspot very nice

    ReplyDelete
  3. Generally I used to do it using MS Word. But you have shown very nice way of creating table. But I want to know, Is there any effect to blogger If we add extra CSS code?

    ReplyDelete
  4. Thanks for sharing this blog post.It's really helpful!!

    ReplyDelete
  5. Wow! The most amazing blogspot-blog have ever seen on the net..i love this blog site..I will like to build my blog bilatechblog.blogspot.com like this

    ReplyDelete
  6. Hello,
    Thanks for the post. Very useful.
    Help me on this issue: How can I align the header vertically and horizontally?

    ReplyDelete
    Replies
    1. hi

      horizontally
      https://kod4u.blogspot.com/2016/12/html-table-tag-with-colspan-example.html

      vertically
      https://kod4u.blogspot.com/2017/01/html-table-tag-with-rowspan-example.html

      Delete
    2. Maybe I explained it wrong.
      I have a phrase with multiple words and I want it to be aligned horizontally at the beginning of the cell. It's possible?
      See my blog: https://esp11i.blogspot.com/p/lista-de-blogues_22.html
      On table "Endereço/Link do Blogue ou Website" I want align horizontally.

      Delete
    3. hi
      this is not possible because your page size is fix when you maximize your blog page width maybe text will be automatically fix :)

      Delete
    4. Thank you very much. I'll fix my blog.

      Delete
  7. Thanks a lot. It look very good and your explanation was good enough for a totally unknowledgeable person. Best,

    ReplyDelete
  8. Thank you man!
    check my site: https://www.viteeeexam.com/

    ReplyDelete
  9. great post it helps me alot in building my own sawing website

    ReplyDelete
  10. Great post thank you so much

    ReplyDelete
  11. Thanks for making me sure that tr & td is best option. I was trying to avoid use of tr & td

    ReplyDelete
    Replies
    1. I guess Yes i just create a table on my post

      Thanks for comment :)

      Delete
  12. Hello,

    How I change font size in blogger post for mobile view...

    Like your blog

    ReplyDelete
    Replies
    1. Hello
      You can see the 4th step >>> you click the first option PAGE TEXT there you can adjust you font size :)

      Delete
  13. nice post , very informative

    ReplyDelete
  14. Your website is very good dear

    ReplyDelete
  15. THANK YOU ADMIN JI, I LEARNED THAT HOW TO ADD RESPONSIVE TABLE IN BLOGGER POST YOUR ARTICLE IS VERY INFORMETIVE, I AM IMPRESS YOUR WEBSITE, I TOLD THESE WEBSITE MANY MY FRIENDS, LOVE YOU ADMIN JI

    ReplyDelete
  16. This post is so helpfull.Keep updating with more informaion
    Benefits of RPA
    RPA Training

    ReplyDelete