How to Insert Tables into your Blog Part 1 {Code and Tutorial}

Pin It

Part 1: The Basic Table

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.

If you’ve done some looking, you’ve already noticed that there isn’t a table button on the editing list in Blogger.  It isn’t hard to add a table, however, and I’m going to show you how to do it with ease.

I’m going to start with the most basic table to cover today, and we’ll expand from there.

This first table will have 3 columns and 4 rows, one of which is a header row.  This tutorial will teach you how to do this basic column and how to add additional rows and columns. 

In part two of this tutorial, you will learn how to add a background color, a border, change the size of the table and how to align the table.

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

^ This is the table we will be creating ^

So let’s get started!!!

Step 1:  In Blogger, open the post that you wish to have the table.

Step 2:  Click on HTML next to compose in the upper left of the post to edit directly in HTML

Step 3:  Insert the following code into your Blogger post where you want the table to appear.

<table border="2" bordercolor="#000000" style="background-color:#FFFFFF" 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>

Step 4:  At this point, you can flip back to the Compose section of blogger, and you will see something that looks like this:

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Now, in the Compose section, you can click right into your table and edit the values within.   If you need more rows or columns, follow along on to step 5.

Step 5:  If you need more more rows, simply do this: 

<table border="2" bordercolor="#000000" style="background-color:#FFFFFF" 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>

<tr>

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

</table>

If you notice, the text in red is just a repeat of the section before it, and you can do this as many times as you need to add a new 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

If you would like to add another column, just edit the HTML as such:

<table border="2" bordercolor="#000000" style="background-color:#FFFFFF" width="100%" cellpadding="3" cellspacing="3">

<tr>

<th>Table Header</th>

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

<td>Table Cell</td>

</tr>

<tr>

<td>Table Cell</td>

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

<td>Table Cell</td>

</tr>

</table>

If you notice, this time the text I’ve added is within each section, in order to add another column.  You can add the text in red as many times as you need columns. 

Table Header	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

And here's what that will look like.

So there’s the quick and dirty about inserting tables into your Blogger posts.  Come back tomorrow for part 2, further customizing your table!