Skip to main content

How to Add a Table to Blogger Blogspot Post

Image
By Admin
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


  1. In Blogger open either a new post or an existing post that you wish to add a table to

  2. Click on the Edit HTML tab on your Blogger editor

  3. 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>


  4. 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

  5. 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>

  6. 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>


  7. 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>


  8. 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;">

  9. 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>


  10. 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>


  11. 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>


  12. 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

  13. 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.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Bullet Point Style in Blogger (Blogspot)
How to Remove Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts
How to Add CSS Styling to Blockquotes in Blogger
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template
Labels:

Comments

Post a Comment

Popular posts from this blog

Panjang Maksimum Deskripsi Video Youtube dan Pesan Kesalahan

By Admin
Ada banyak diskusi di sekitar tentang menambahkan Caption teks ke deskripsi video YouTube Anda. YouTube secara otomatis akan mengkonversi konten audio dari streaming video Anda ke teks biasa - sehingga dapat digunakan untuk teks tertutup. Anda tentu saja harus cek dan edit ini sebagai hasil yang sedikit aneh dari waktu ke waktu! Anda kemudian dapat menambahkan teks keterangan ini untuk deskripsi video YouTube Anda. Sehingga akan diindeks juga oleh mesin pencari. Masalahnya adalah bahwa itu sangat mudah untuk menemukan kesalahan pada YouTube di mana dikatakan bahwa pengaturan video Anda tidak bisa diselamatkan alasan adalah bahwa baik deskripsi terlalu panjang atau berisi karakter ILLEGAL.  Ini adalah pesan kesalahan yang sangat tidak membantu. Oke. YouTube Anda memberitahu bahwa deskripsi terlalu panjang? Atau apakah itu mengandung karakter ilegal? Atau keduanya? Setelah mengalami masalah ini beberapa kali, saya mengatur tentang bereksperimen dan melihat apa yang sejauh des...
Post a Comment
Read more

How to Add Internal Links Within Blogger Posts

By Admin
In the Blogger tutorial I discuss how to add internal links within your Blogger posts (Blogspot posts) to point to either another section within the same post or to another post. There are lots of times when you may want to direct a reader to a different part of your Blogger post depending on what their needs and interests are. Or you might want to alert the visitor to something significant in a related post. In this article I will show how to make use of internal links both within posts and in Blogger generally. Why bother with internal linking you may be wondering? Well the answer is to improve SEO. Blogs with a good internal linking structure will fare better than blogs that don't link posts. Plus you will be creating an aid to navigation for your reader. On longer posts jumps links to different sections within your post or to other posts mean readers can quickly find the information they are looking for. How to Create Internal Links To Sections Within the Same Blogger Posts How...
2 comments
Read more

How to Add a Subtitle to Blogger Posts

By Admin
This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post. I also discuss the benefits of adding subtitles to Blogger articles. This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes. Benefits of Using Subtitles in Posts Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be: Title: Add a Subtitle to a Blogger Blog Subtitle: Make Your Posts More Search Engine Friendly and User Friendly If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a...
Post a Comment
Read more