Sponsor Post

How To Remove Powered By Blogger Attribution

Sunday, 21 January 2018

How to Make Table in Blogger Post with Pictures

Hello friends, welcome to the Techtspot Blogger Design tutorial today I will show you how to make table in Blogger post with pictures.
Make Table In Blogger Post
Today we create table in blogger post, when we are going to post about any product specification, product review, some versus content then we create table and show the information, but blogger don't have any feature like that we don't have table creating function on it, so here we create / Make Table in Blogger using code.

These are Following Steps:-


Step 1: Go to Blogger Pages or Posts and click Edit any post or page.
Make Table In Blogger Post 1
Step 2: Now click HTML button and paste the code in the code area then click update button. Replace Your Content with Orange Content.
Make Table In Blogger Post 2
<table>
<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 3: Now Go to Blogger Theme and click Customise button.
Make Table In Blogger Post 3
Step 4: Here click Advanced and scroll down the option then click Add CSS and paste the CSS code here then click Apply to Blog button.
Make Table In Blogger Post 4
table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}
td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}
th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}
td {
background:#FAFAFA;
}
tr:nth-child(even) td {
background:#F1F1F1;
}
tr:nth-child(odd) td {
background:#E1DDDD;
}
tr td:hover {
background:#666;
color:#FFF
}
Step 5: Now open the Blogger blog.

Read More:- Create Sitemap Page in Blogger
Read More:- Disable Comments Box on Blogger Posts

I hope you enjoy this Post. If any problem comment it.

28 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