Blogger platform has no provision for adding table to your blog post. but in this blogger tutorial today, I will show you how to tweak and successfully
insert a table inside your blog post before publishing. Blogger is devoid of so many interesting features such as the simple related post links for blogger except with the tweaking of HTML and CSS code to include in your blogger, you won't be able to utilize these features. Here you will learn how to
create simple tables and also how to style or design this table with colors
that will match your blog background.
Tables are the best ways to display
tabulated information especially when you want to align you information to make
it easy to read and understand. Inside this table, you can also highlight text,
add images and hyperlinks to make your information easily presentable. lets assume
that the reader of this post has no HTML and CSS knowledge so this tutorials
will be treated in simpler details suitable for a new and blogging beginners.
At
the end of this tutorial, you will be able to create a blogger table that will
look like this table below.
As the blogger platform has no provision for entering tables in
blogger post, we are going to use a bit of CSS styling to make up a table and
enter it manually into a blogger post.
How to Insert table in blogger post.
- Here you will learn the following,
- How to add a simple table to blogger,
- How to add a background color to the header of the table,
- How to add a background color to the table cells,
- How to add extral rows and column to the table etc we are going to start with a 5 column and 4 rows table.
Step 1. Open a new or existing post where
you want to add the table. Click on Edit html tab on your blogger post editor, copy
the following codes and paste it in your blogger post and click on compose to
see how the table will look like.
<table border="2"
bordercolor="#0033FF" cellpadding="3" cellspacing="3"
style="background-color: #6afb92;">
<caption><b>Blogger Table
caption</b></caption>
<tbody>
<tr style="background-color: #0033ff; color:#ffffff;
padding-bottom: 4px; padding-top: 5px;">
<th>Table Header<br />
</th>
<th>Table Header<br /><br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
</tr>
<tr>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
</table>
Step 2. Now you will have to make changes to the table to suit your
blogger template by changing the table border color, background color,
width and cellpadding highlighted with various colors in the codes below.
Step 3. Now
in other to remove the white space above the table, just add the following
styling in red above the codes and close it with the </div> tag below the code exactly as you see below.
<style
type="text/css">.nobrtable br { display: none } tr {text-align:
center;} tr.alt td {background-color: #eeeecc; color: black;} </style>
<div class="nobrtable">
<div class="nobrtable">
<table border="2"
bordercolor="#0033FF" cellpadding="3" cellspacing="3"
style="background-color: #6afb92;">
<caption><b>Blogger Table
caption</b></caption>
<tbody>
<tr style="background-color: #0033ff; color:#ffffff;
padding-bottom: 4px; padding-top: 5px;">
<th>Table Header<br />
</th>
<th>Table Header<br /><br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
</tr>
<tr>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
</table>
</div>
Step 4. You can now change the table header background and color
attributes to suit your blog color template by altering the codes in blue
colors in the codes above. Now if you want to add another row to the table, just
add this code
<tr>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
in between the green </tr> tag and the
</table> closing tag
Step 5. Now in this step, we are going to
center the contents of the blogger table by using this styling code
tr {text-align: center;}
Add this styling code exactly in the
place where you see it appear below in color blue, inside your code
respectively. (I hope you have copied and paste your main table codes some where
and also making the alterations accordingly?)
<style type="text/css">.nobrtable br {
display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc;
color: black;} tr {text-align: center;}</style>
<div class="nobrtable">
<div class="nobrtable">
Step 6. Now we will add caption to the blogger table either above
the table or below the table. To add caption below the table, simply add the
caption line as shown in blue. For a caption above the table, add the caption line
shown in red your caption will look like this on your table
<style type="text/css">.nobrtable br {
display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc;
color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<div class="nobrtable">
<table border="2"
bordercolor="#0033FF" cellpadding="3" cellspacing="3"
style="background-color: #6afb92;">
<caption><b>Blogger
Table caption</b></caption>
<tbody>
<tr style="background-color: #0033ff; color:#ffffff;
padding-bottom: 4px; padding-top: 5px;">
<th>Table Header<br />
</th>
<th>Table Header<br /><br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
</tr>
<tr>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
</table>
</div>
Step. 7 Ok now one more thing to address here. In other to improve
the new blogger table look, you will choose whether to reduce the double boarder into a
single boarder or not. To reduce the double boarder, you will have to change
the cellspacing to 0 as shown in red color in the code below
<style type="text/css">.nobrtable br {
display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc;
color: black;} tr {text-align: center;} caption
{caption-side:bottom;} </style>
<div class="nobrtable">
<div class="nobrtable">
<table border="2"
bordercolor="#0033FF" cellpadding="3" cellspacing="0" style="background-color:
#6afb92;">
<caption><b>Blogger Table
caption</b></caption>
<tbody>
<tr style="background-color: #0033ff; color:#ffffff;
padding-bottom: 4px; padding-top: 5px;">
<th>Table Header<br />
</th>
<th>Table Header<br /><br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
<th>Table Header<br />
</th>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
</tr>
<tr>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
<tr class="”alt”">
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell<br />
</td>
<td>Table Cell <br />
</td>
</tr>
</table>
</div>
Step. 8 And your table will look like this now
click compose
and start editing and entering information in your new blogger table. After that,
save and publish your post. You can copy this blogger table code, save it and
use it as your table template whenever you want to insert a table to your post,
just copy, paste and edit it to your taste.
Note: you can align your table in the center of your post by using this tag <center> and </center> closing tag. just paste the whole code inside the tags.
Read Also:
How to add advertise here banner to blogger blog
Where to put my sitemap at blogger free platform
I hope this info helps? feel free to share this post with your friends using the like/share buttons. you can also subscribe to my blog below this post for more tips delivered to your inbox. or simply ask any question by using the comment box below. subscribe and never miss any future post through this link CLICK HERE TO SUBSCRIBE Once entered, you will have to check your inbox for a confirmation email containing a confirmation link. Once you VERIFY your email by clicking on the confirmation link in the message, you will never miss any future articles again.
I'm glad I came across your blog. I'm writing a blog post that has something to do with translation of sentences and phrases. Everything looks cluttered as of the moment. I just pasted the code and I'm happy with the outcome. Still working on the colors, etc. I hope everything will turn out OK. Might use this in my online Waray dictionary as well. Bookmarked this for future reference. Thanks, really. :-)
ReplyDeleteRevisiting. Thanks again for this very useful post. I was able to insert a table - with 2 columns and 28 rows - on my blog.
ReplyDeleteHey i have used ur code and its working wonderfully.Tks
ReplyDelete-Rahul Karn
http://informationdevelopers.blogspot.com/
I think this is very difficult way for new. I have a simple way to insert a table on post
ReplyDeleteu r right attri......
DeleteWow! I never knew this was possible. But seeing myself adding table on my blog is really awesome. I owe you this appreciation. Thanks and thanks.
ReplyDeleteGreetings ! Do you own any writing skills or this is a natural gift ? Many thanks in advance for your answer.
ReplyDeleteCan you be more specific about where to place the tags to center my table on the page?
ReplyDelete