Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

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