Menu Close Menu

How to Add Stylish table in your blogger post

Table Screeen Shoot
In this post I am going to explain you how to add stylish table in blogger with CSS. Adding table In blogger post is very difficult  for blogger beginner users.The ability to create tables is a feature that is lacking in Blogger post editor. To add a table you not only have to know the required HTML tags, but also have to painstakingly construct the table by arranging the tags manually in post HTML.
You can add stylish table in your post by adding little CSS codes in you blogger Tamplate.









Step 1. First You Need Add CSS in your blogger Template.
Step 2. Add HTML Code in Your Post.
Note:- You Can Make Changes in style sheet.
Table Width, Headings Background, Borders, by changing color code in Table CSS. check out our Color Code Generator Tool.

Step 1.

Make sure you have your Template Backup. (how to make a template backup)
1. Go to your blogger Dashboard>> Template>> Proceed>> press CTRL+F and search this code. (how to find code using search bar)
]]></b:skin>
2. and Paste this CSS Code Before/above ]]></b:skin>
#customer
{
font-family:Maven Pro;
width:100%;
border-collapse:collapse;
}

#customer th 
{
font: Yanone Kaffeesatz;
font-size:1.2em;
text-align:center;
padding-top:5px;
padding-bottom:4px;
background-color:#3e3f3f;
color:#ffffff;
}


#customers
{
font-family: Maven Pro;
width:100%;
border-collapse:collapse;
}
#customers td 
{
font-size:16px;
border:1px solid #cd0237;
padding:3px 7px 2px 7px;
}
#customers th 
{
font-size:1.1em;
text-align:left;
border: 1px solid #cd0237;
padding-top:2px;
padding-bottom:2px;
background-color:#cd0237;
color:#ffffff;
}
#customers tr.alt td 
{
color:#000000;
background-color:#ffffff;
}

Click on preview button and see your blog live. if all Element view is correct like adding before Css then click on save.
you can Change Font style, Background, Border Color, Text Color, by changing highlighted Code.
Font: Red
Background: Green
Border: Orange
Table Text Color: Blue
That’s it your Table Style Sheet is Ready Before Doing This.

For More information about HTML and CSS
I am not professional in CSS or HTML but I have a little knowledge about that. I am not learn this languages professionally but when I reading online content daily so I am getting very useful knowledge about CSS and HTML. W3School  is the best website for learning CSS, HTML,  XML, JAVASCRIPT, VB, JQUERY, PHP and all  programming languages. you can learn all languages in free on w3school.com. me also HTML, CSS, XML on w3school.com. I hope this information useful for blogger new users which can’t have knowledge about this  Online Programming Languages School and I am very excited about this web becoz this is totally free.
If you have any trouble or question. Please leave your comments below in comment box. thanks for reading our post.

"Be the first to express your thoughts"

Post a Comment

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.