Sunday, September 27, 2009

How To Add Table To Blog Post

How to include table in blog post?
How to add boxes for text in blog post?

AB
CD

Here's the example of the code used to create a table with 2 rows and 2 columns.

<table align="center" border="1" cellpadding="5" cellspacing="1" width="400"><tbody><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></tbody></table>

As you can see, <tr> is the tag to begin a row, and the tag ends with </tr>.

While in between <tr> and </tr>, we have <td> to indicate a particular column in the row, and it ends with </td>. In between that, you can type the text you want. The example given is "A".

You can have as many <td> your text </td> you want in between the <tr> and </tr> tag.

Once you are done with a particular row, you can start another row my using <tr> again. And the process continues.

You can also modify the values of table align, border, cell padding and cell spacing. Changing the values will show different table styles. Try it out.

For the width, you can either use the pixel value (example "400") or the percentage (example "90%") to suite your preference.

Here's an example of another table with these values:

table align="center" border="10" cellpadding="10" cellspacing="10" width="90%"

And you might also want the values to be in the center. So just add <center>A</center> to the text.

A
B
C
D

Feel free to try it. Enjoy!

10 comments:

Wai Keong said...

Thanks for the code. Very useful! =)

cube said...

Thanks for the help :-)

Tigeriban said...

very useful code..tq

Adam Lee said...

Or you could make the tables in Microsoft Expression and simply insert the auto-generated html

kuya_gani said...

go blogger united. godbless.

ardianzzz said...

hehe.. nice code..
so classic

WongSF said...

Why no update to your blog. Continue the good tips. Thank You.

ch@el said...

very useful, tqvm

rs said...

nice info..simple but complete :)
from:-
BELAJAR BUAT BLOG

Deh said...

thanks.. that was very helpful...

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter