This Blogger tutorial (Blogspot tutorial) explains
how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors.
We
will start with a basic table and gradually add CSS styling to the
table to improve the look and functionality until we have built the
table pictured directly below. No knowledge of CSS and HTML is assumed
so this Blogger tutorial is suitable for absolute blogging beginners.
A Blogger Table Caption
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
Tables
are a useful way to display information particularly tabulated
information. Tables are good whenever you want to align information so
that it is easy to read and understand. You can add text, hyperlinks and
even images to a table which makes them very useful for presenting
information.
There is no easy way to add tables in Blogger yet.
Even if you are using the new editor you will note that no table button
is provided. Fortunately it is easy enough to use a bit of CSS styling
to spruce up a table and enter this manually into a Blogger post.
How to Add a Table to Blogger Posts
First
you will learn how to add a simple table to Blogger. We are going to
start with a table with 3 columns and 4 rows including a header row.
Then I will show you step by step how to add different features to the
table including how to add extra rows, a background color to the header,
a border, a caption, change the size of the table, center align the
table and more.
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
- In Blogger open either a new post or an existing post that you wish to add a table to
- Click on the Edit HTML tab on your Blogger editor
- Copy the following code into your Blogger post which will produce the basic table as shown above:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- Make changes to the table to suit your own Blogger template if necessary by changing the following:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
- Border width (blue)
- Border color (black)
- Background color (red)
- Table width (orange) Can be a percentage or actual width eg 500px
- Now
we are going to fix an annoying problem in Blogger which renders too
much white space above the table. We do this by adding the following
styling denoted in red directly above the table tag and adding a closing
</div> at the end of the table code
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table></div>
- Let's
add some further styling to our table header to improve the look of our
table as denoted in red. Change the background color and color
attributes to suit your own color scheme if you wish
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- Now let's add another row to our table for Blogger so you can see how this is done
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- In
this step we are going to center the contents of our Blogger table.
This can be done in several ways but we are going to take a short cut
here by assigning a style to every table row
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
- Now we
are going to jazz up our Blogger table by adding alternating colored
rows to improve readibility and appearance. By far the easiest way to do
this is to assign a class.
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- It
is also easy to add a caption to your Blogger table. For a caption
above the table simply add the caption line as shown in red. For a
caption below the table add the caption line in red and a style as shown
in blue
A Blogger Table Caption
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<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" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- One
more important property needs to be addressed in our new Blogger table
to improve the look. We can reduce the double border into a single one.
The easiest way to do this is to change the cellspacing to zero as
denoted in red. Or, alternatively we can apply the border collapse
property to our table as shown in blue. Note: Border collapse may not be
supported by all browsers particularly if the cellspacing attribute is
defined also)
A Blogger Table Caption
| Table Header | Table Header | Table Header |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell |
<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" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
<caption>A Blogger Table Caption</caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
- Now
go ahead and add your data to your new Blogger table. Filling in each
instance of "Table Header" and "Table Cell" with your own data. The
information you add to the Blogger table can be text, hyperlinks or even
an image
- Save your changes to the Blogger table by saving and publishing your post
Please
feel free to use this Blogger table as a template whenever you need to
add a table to your Blogspot post. If you want to regularly add a table
to your Blogger posts that consistently looks the same you could
consider adding the table CSS styling to your Blogger template.
In
this Blogger tutorial (Blogspot tutorial) I have demonstrated how to
build a complex table in HTML and CSS to insert into a Blogger post. You
have learned how to manipulate a variety of table properties and
attributes to create a table for Blogger that matches the color scheme
of your blog and is functional and appealing.
Upload
your button to a hosting service such as Photobucket and change the URL
address of the image in the CSS styling section. The following example
will render a smaller blue button. Note I have reduced the font size to
accommodate the change. You may need to play around with the settings to
get the font sizing right for your image.
