This page has moved to a new address.

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to use the Table Tag

Mommy Blog Designs: Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to use the Table Tag

Tuesday, August 23, 2011

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to use the Table Tag

I love using the Table Tag! It took me a while to figure it out ... but now that I understand it, I use it everywhere!! I find that Blogger likes to put things in certain places ... especially when it comes to pictures. It never seems to want to let you put 2 pictures ...or dare I say 3 pictures ... right next to each other.

But with the Table tag ... you can neatly organize all your info ... and have it perfectly lined up the way you want it!

Here’s how ...
To start ... decide what info you want to put where. Perhaps jot down your table on a piece of paper. Planning is important as we will need to know how many rows and columns you will need.

Here is the basic tag for the outline of the table ... (Note ... this table has 2 rows with 3 cells in each row)

<table border="0" cellpadding="1" cellspacing="4" width="600">
<tr><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE TOP LEFT CELL HERE
</td><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE TOP CENTER CELL HERE
</td><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE TOP RIGHT CELL HERE
</td></tr>
<tr><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE BOTTOM LEFT CELL HERE
</td><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE BOTTOM CENTER CELL HERE
</td><td align="left" valign="top" width="200">
INSERT WHAT YOU WANT IN THE BOTTOM RIGHT CELL HERE
</table>

So what does all this mean?

The first line sets the table border, how far a part the cells are spaced, and the width of your table (in pixels). You’re welcome to play around with this ... by simply changing the numbers around.

Next you’ll notice 2 other snippets - tr and td

tr defines a table row and td defines a table cell. When using HTML, whenever you start something (Like <tr> for a new row, you have to end it at the end of the row </tr>)

So ... you are welcome to add and remove rows (by adding or removing the tr) or cells (by adding or removing td)

Also ... make sure that your math works out ... so in the top row when you write the width of the whole table, make sure that the width of your cells combines equals the width of your table.

Another question is what can you put inside the table?  Absolutely anything!  You can use text, images, html ... or whatever else you want!  Be creative and have fun with it!

Other that that ... it’s just about trial and error. It took me a while of playing around with this tag before I really figured it all out. But now that I get it ... I really use this tag everywhere!

So give it a try! Have fun with it! Enjoy making everything neatly lined up and organized. And if you run into any problems ... you know where to find me! I’m happy to help!

Happy Blogging!
xoxoxo
Ro :)

ps ... Be sure to join me on voiceBoks.com!  We have a Blogger ED event over there where you're free to ask all the questions you want about Blogger ... and I'll be sure to answer you right away!

Labels: ,

2 Comments:

At August 25, 2011 at 11:26 AM , Blogger Spilled Milkshake said...

I really needed this tutorial. Tables always seem like so much work. Funny how I can be lazy about typing lol!! But it is an excellent tag for those of us OCD girls who can't stand it if things don't line up just perfectly!

Christina
http://spilledmilkshake.com
Stopping by from the Alexa Drop Hop!

 
At August 31, 2011 at 10:08 AM , Blogger GJT said...

Oh, Ro, you are amazing! You're like the Alton Brown of Blogger. I love that you explain what all that code MEANS, not just handing it out to solve a problem.

Gina
www.totallyfullofit.com

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home