Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 13, 2007

Digg This Story

Tables – HTML Basics and Tutorial

In this article, we shall learn how to create tables in our Blog posts or as a part of our web design layout. This guide covers the usual HTML attributes and styles that can be applied to tables. Tables add a different dimension to displaying your contents and whether you have a football match fixture, menu, and song, price or grocery lists, putting them in a table format is certainly neater.

Most of us would have either used or come across tables that display data or information. If you have used word processor or spreadsheet softwares, you should be familiar with these terms, which apply as well to our discussion here:-

“row” - a horizontal line of units
“column” - a vertical line of units
“cell” - each unit or data compartment enclosed by the borders

Let us look at some examples to illustrate how the HTML table codes work and where you can place them.

Placement of the Table Code

To create a table in a Blog post, simply type in the HTML codes (mentioned below) when you are writing your post. See that you are in “Edit HTML” mode rather than “Compose” mode when the code is inserted.

Tables – HTML Basics and Tutorial

If you want the table to be displayed in your sidebar or elsewhere in your template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to paste the code.

Basic Table

Height:2.2m
Weight:185kg


The HTML for the above table is this.

<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody>
<tr>
<td>Height:</td>
<td>2.2m</td>
</tr>
<tr>
<td>Weight:</td>
<td>185kg</td>
</tr>
</tbody>
</table>


Note:

1. It should begin with a <table> tag and end with a closing </table> tag.

2. We have specified the border as 1px. You can set it to “0” to have no visible border or set it to any other value.

3. Try to specify a width at all times. This improves the speed of page loads since the browser would be able to set aside the space required for the table. When you view your template source code, the width allocated for your Blog posts should be found under #main or #main-wrapper and your table width will have to be less than that. If you do not set a width, the table will by default take up the full width.

4. The cellpadding is the amount of white space between the content and the borders. If there is no cellpadding, you will find the text very close to the border.

5. Cellspacing is used to define the distance between each cell.

6. Every row starts with a <tr> tag and ends with a </tr> tag. In this example, we have 2 rows, the portion colored blue being the first row, and the portion colored red being the second row.

7. Within every row, we have the contents governed by the <td> (table data) tags. You would notice that in the first row, the first data cell “Height:” begins with <td> and ends with </td>. Every data cell will have to be enclosed within such tags.

8. The contents in each data cell need not be plain text. You can insert pictures, images, links, videos, etc. For instance, we could replace “Height:” with a picture code that looks like this “<img src="Image URL" />” to insert a picture that we have uploaded onto a photo server. For more on the links and image codes to insert, you may refer to our guide at Hyperlinks and Image Links.

Text Formatting

You may want to change the text font face, font-size or color and make the text bold or italic. You can even align the text either to the left, center or right of the cell. We'll suggest a method that is easy for all of us to adopt, without having to learn complicated style codes. Create a new draft post. Choose “Edit HTML” mode and paste the above table code. Now, view the post under “Compose” mode. Using the rich-text editor, change the font, color and alignment to whatever you like. All the style codes will be automatically inserted and what-you-see-is-what-you-get.

If you want the table in your sidebar, do the same, create the table in a draft post and use the rich-text editor to insert the style codes for you. When you are done, click back to “Edit HTML” mode and copy the entire table code. Under Template -> Page Elements -> Add a Page Element -> HTML/JavaScript, paste this code (with all the style definitions) and save.

Table with Header

S/No.InventoryQty
1.Plate50
2.Cup22
3.Bowl30


The code for the above table is this:-

<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody>
<tr>
<th>S/No.</th>
<th>Inventory</th>
<th>Qty</th>
</tr>
<tr>
<td>1.</td>
<td>Plate</td>
<td>50</td>
</tr>
<tr>
<td>2.</td>
<td>Cup</td>
<td>22</td>
</tr>
<tr>
<td>3.</td>
<td>Bowl</td>
<td>30</td>
</tr>
</tbody>
</table>


Note:

1. The <th> tags are used to mark the content as headers and such text will be bold by default to distinguish them from the other contents. We intentionally included more rows and columns to let you see how you can insert more rows using the <tr> tags and more data cells using the <td> tags.

Row Span and Column Span

Sometimes, you may want to merge certain cells, such that the cell spans multiple rows or columns like this:-

Menu
StartersSalad$1.00
Soup$2.00
MainFish$3.00
Chicken$4.00
Lamb$5.00


The code for the above table is this:-
<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody>
<tr>
<td colspan="3">Menu</td>
</tr>
<tr>
<td rowspan="2">Starters</td>
<td>Salad</td>
<td>$1.00</td>
</tr>
<tr>
<td>Soup</td>
<td>$2.00</td>
</tr>>
<tr>
<td rowspan="3">Main</td>
<td>Fish</td>
<td>$3.00</td>
</tr>
<tr>
<td>Chicken</td>
<td>$4.00</td>
</tr>
<tr>
<td>Lamb</td>
<td>$5.00</td>
</tr>
</tbody>
</table>


Note:

1. For the top row, we merged 3 columns and named it “Menu”. In the <td> tag, we have therefore inserted a colspan="3" to indicate that the word spans 3 columns.

2. In the left column, we wanted the word “Starters” to span 2 rows, and have inserted rowspan="2" into the <td> tag.

3. Similarly, to have the word “Main” span 3 rows, we inserted rowspan="3" into the <td> tag.

Border Color, Background Color, Background Images

Let us now insert some colors into our table code.

MusicVideos
Games


The above table HTML code is this:-

<table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody>
<tr>
<td bgcolor="#33ffcc">Music</td>
<td background="http://www.blogpulp.com/imagehost/images/381245101.jpg">Videos</td>
</tr>
<tr>
<td bgcolor="#ff66cc">Games</td>
<td><img src="http://www.blogpulp.com/imagehost/images/236728310.jpg" /></td>
</tr>
</tbody>
</table>


Note:

1. We have added a bordercolor to the table. Take a look at our Hexadecimal HTML Color Codes article for more color choices and the codes to use.

2. To add a background color to a cell, insert the bgcolor definitions.

3. Should you like, you can have a background image instead of color as we have done in the above “Videos” cell. Upload the image onto a free server and insert the relevant URL of that image.

4. In the bottom right cell, we have inserted an image rather than text, to show you how an image can be inserted into a table.

Alternative Method

We end this part of our introductory article on HTML table codes with an alternative method to insert tables into Blog posts. If you have a word processor - MS Word, OpenOffice writer, etc. - you can create a number in the processor. Format it, enter your text and when it is done, block copy the entire table. Go to your New Post and under “Compose” mode, paste the table.

When you view the post in “Edit HTML” mode, you can see the table code similar to what we have discussed above. While this method of inserting a table is easy for the layman, the final code may be cluttered with other styles and definitions that are brought over from the word processor. If you'd like, create a simple table using your word processor but use the Blogger text editor to format the fonts, colors and alignment. To insert background colors and images, it is still advisable to follow the above guide.

Remove White Spaces

You may see a lot of white space or gap at the top of the table. To remove this unnecessary space, you would need to compact the code and remove the line breaks. We have used a lot of line breaks in the above code so that you can better understand how the code works. Take the first example of a Basic Table, compacting the code will mean removing all the new line breaks like this:-

<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr><td>Height:</td><td>2.2m</td></tr><tr><td>Weight:</td><td>185kg</td></tr></tbody></table>


© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

13 comments:

天培 said...

Hi, Bizwhiz: I don't understand your last part of this post, to remove the white space above table? what do you do?

bizwhiz said...

Hi 天培

The white space refers to the line breaks when you press Enter or Return on the keyboard. Remove these so that the codes have no breaks in between.

said...

Hi bizwhiz!
Thanx for providing the HTML table basic tips!
It is really useful.
I used the HTML table code made shout out box!
It really work!
Thanx so much!

Welcome to visit my blog for free blog material!

Happy X'mas!

Zooomabooma said...

Greetings! First -- Thank you so much for this page! I've got some tables working and will have more up in the next day or so.

Question -- Is it possible to put a table in a table?

I tried to formulate the html but couldn't get it to work.

With a table in a table, you can have a nifty wide border color around your entire actual table.

Just wondering. Thanks!

iBall said...

Hi, Bizwhiz

I've inserted a html code into my blogspot post, why there will have a large spacing after I publish the post, I mean the spacing between the tables code.

You can see from this link,
http://flashmyeye.blogspot.com/2008/02/pay-per-post-turn-some-revenue-in-while.html

what should I do?
Pleas kindly give some advices, thank you.

your faithful reader,
mz

Almakos said...

Hi, this is a nice and detailed explanation, thanks for it.
but I still have question.
I have no problems to place two images side by side, but I cannot place three no matter what I am trying to do.
Please advise.

jamminjunkie said...

THANK YOU! I had created a table here and I could not figure out why I had so much blank space. Your site helped clarify it for me!

This is a great blog and I will continue to use it!

BabyLyons said...

Hi! I'm trying to write a tutorial on html myself, but I need to know how you get the code within a table so it doesn't read the code, I tried putting it in a table but it took out some of my code.

mitkey said...

hi bizwiz

i have problem arranging spacing between a paragraph and a table. Can you take a look at my site http://blooggoo.blogspot.com/
what is the best way to format them?

Anonymous said...

your explanation for creating tables is very useful. additional questions:

1 - how do i adjust the line width of the table border? i just want a narrow black line.
2 - how do i adjust cell width? i have two columns and want to expand one column and narrow the other.
3 - how can i change the alignment of text in a cell? i want to left align the text.
4 - i didn't understand your definition of "cell spacing"

thanks

Islam In Us said...

Hi thanks a lot. I 'd been trying things out with table bground color. Blogger always modified my "table bgcolor=xxx" and messed up my hex color code.

I tried your suggestion "td bgcolor" and works nice!

Ray W said...

How do I keep the HTML from having a huge space between them and the rest of my post ?
I.E.
http://whyray.blogspot.com/2009/03/test.html
Sorry I'm new to the whole HTML thing.

DALewis said...

Thank you!!! Exactly what I needed. :)