Friday, August 03, 2007

HTML for table

Had some queries that need to use the HTML <table> tag (see How to display pictures side-by-side which require a little bit of knowledge of HTML. It also require to prepare your post in the EDIT HTML mode rather than the COMPOSE mode. I will try to explain the <table> tag so that you better understand what you are trying to do when you do something like that above. It is not difficult if you have some patience.

The standard HTML for a single row 2 column table is

<table><tr><td>first column content</td><td>second column content</td></tr></table>


Nearly all HTML tags must occur in pairs, an opening tag and a closing tag. The HTML thus started off with a <table> tag and closed with a </table> at the end of the HTML (Note: you have to type the HTML all in the same row without using the ENTER key to start off a new line (using the ENTER key to format the HTML for table to make the in a format to make the HTML easier to read is standard practice but cause problems if used in Blogger). See the way the HTML for a table is written in Testing posting tables in Blogger Beta (now New Blogger). If you see a large empty space in the post, scroll down for there is content after the empty space).

After the </table> tag is the <tr> which signal the start of a new row (tr=table row). This is followed by a <td> tag signaling the start of the content of a table column (td=table data). The content of what you want displayed is typed after the <td> tag. At the end of the content, you put the closing </td> tag. if you want to start off a new column, you will put another <td> tag followed by the content of what you want displayed in the second column, closed by another </td> tag. The above shows a single row, 2 column table. If you want a single row, 3 column table, all you have to do is to add a <td> </td> tag pair, with the content to be displayed between the opening and closing tags. If you want a fourth column, just add another <td> </td> tag pair, and so on. The row have to be closed with a </tr> tag, followed by the closing </table> tag.

A 2 row, 2 column table HTML will take the following form:

<table><tr><td>first row, first column content</td><td>first row, second column content</td></tr><td>second row, first column content</td><td>second row, second column column content</td></tr></table>


Note that you have to signal the start of a new column with another <tr> tag and close it with a </tr> tag. Also, all the above must be typed without touching the ENTER key if you want to avoid large space above the table. If you want to format the HTML for the table for easy reading, you will have to refer to Testing another way of avoiding large spaces above table in Blogger

13 comments:

GDAEman said...

Thanks for the info.

you've misspelled "table" in the initial line of HTML

Peter Chen said...

Hi GDAEman,

Thanks for pointing out the misspelling. It has been corrected. Very much appreciated.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

Richard Parker said...

I just want to be able to show tabbed (columned) content or a small table on my blog

How do I do it?

Peter Chen said...

Hi Richard,

I am afraid I don't understand your question. Can you try a clearer explaination or if you can, do some kind of graphic to illustrate what your want?

Peter (Blog*Star)
Blogger Tips and Tricks

Richard Parker said...

I have just put a 4 column, 10 row table on my weblog at: http://smallislandnotes.blogspot.com/2007/09/pidgin-in-making-boronglish.html following your instructions, but it was not too easy to do.

I ended up making the columns in Excel, putting in intervening columns with all the td and /td and trs in, then transferring the whole thing to a text file, then to Word, where I took out all the blank spaces, then pasted the final thing into the blog's HTML.

The major problem was that I kept on using the Compose mode, which immediately upset all that careful 'blank space' removal.

Surely there must be some simpler way of cutting and pasting a table into a blog?

Peter Chen said...

Hi Richard,

Once you are used to HTML, hard coding by hand is not difficult. However, if you want easy methods, refer to
Testing embedding Zoho sheet into Blogger post

Testing embedding Google spreadsheet in Blogger post

Testing embeding Google spreadsheet in Blogger post again

Peter (Blog*Star)
Blogger Tips and Tricks

Crafty Mamas said...

Many Thanks, this was exactly what I needed to make my table!

Wandertales said...

Peter,

Thanks heaps for providing the answer to solve a puzzle that has baffled me for hours.

Nicole up North said...

Is it possible to have multiple lines in one row? My problem is I've got a large picture that I'm trying to add information beside. The picture formats a very large row within one column. The next column won't recognize a "", it just wraps the text within the cell just like Excel would. I need 3 distinct lines beside the picture.

Here is a manual version, I'd like to make this easier to do using the table.
http://nicolelovesbooks.blogspot.com/2008/11/december-customer-specials.html

Manjunath said...

Hey i found another cool way of writing a table in the blogger

http://www.ceveni.com/2009/01/how-to-create-table-in-blog-or-website.html

Can you suggest is there any catches using it?

Peter @ Enviroman said...

I don't think that is a good idea as WORD introduces too many formatting tags

Alternative is to create ZOHO spreadsheet and embed into blog post

or upload EXCEL spreadsheet to Scribd and embed into blog post (method same as PDF cile)

dega said...

Can that HTML example for 2 row 2 column table be correct? I can only see one td but two /td markings? One td is missing, or am I missing something?

Peter @ Enviroman said...

Thanks for alerting me. I got to check what happened as it looks like the first codes for the table looks incomplete.