Images out of control? Set a nice table!

If you blog….I don’t care what platform you use. At some point you’re going to find yourself wrestling with the placement of images. To save you from pulling your hair out…learn to set a nice, simple table.

Things are getting better all the time for noobies building websites and blogs, in the whole drag ‘n’ drop arena. Still, there’s a lot that can’t be done if you’re not willing to crawl in the back-end, and get your hands a little dirty with some code. Html can be a bloggers best friend. Especially when it comes to images!

THE BASICS

<table><tr><td></td></tr></table>

All you need to understand/remember is the basic structure of a table.

A table is the main housing for all the stuff that goes in it. What goes in it are rows and columns. Think of it as a BUILDING. Basically, it’s as simple as the code above. It always starts by OPENING a table, then opening a ROW, and columns go inside the rows. Like you’d start with a building, then ROWS of floors, then rooms on each floor (that need columns to hold them up). Just remember TABLE-TR-TD……………and then that you have to close each one of those in reverse. /TD-/TR-/TABLE. That’s all you have to know to get some of your images in check.

Your code will look something like this….

<table>

<tr>

<td><img src=URL TO IMAGE”></td>

<td><img src=URL TO IMAGE”></td>

<td><img src=URL TO IMAGE”></td>

</tr>

</table>

Pretty simple. You just need the URL for your images. You can use the one click “upload” to get all your images in your post (in the rich editor), then open the html editor, and build your table structure around them, but this can get confusing if you’re just getting started. Better to have your URLs on hand and build it from scratch in html. Then click on rich editor to view how it looks. The other way around, you’re going to see extra code that might confuse you, like <divs>, etc. And we’re not going to get into that 😉

The only other html elements you might want to add into your tables are borders, and alignment.

the simple code above will box everything together neatly, and without borders.

If you want your table and images to have borders…you have to say so…

<table border="1">

You can pick any number. 1 is 1px, and 2 is 2px. The higher the number the thicker the border. And the same applies for rows and columns. The color for the borders will automatically pull from your .css style sheet, or whatever borders are set in your template designer (blogger). Some templates in the new blogger flash designer, already have a built in option for image borders & background. So, you probably won’t need this.

<tr border="1"> OR <td border="1">

The image below shows a table with 2 ROWS….if you have many images you want lined up in a box/table. I won’t get into setting widths of columns and rows, bcuz it’s probably just easier to play around with things at first…and learn for yourself what works. Based on the width of your blog or post, you’ll only be able to get so many images on one row, before they fall off the page. If all your rooms don’t fit on one floor…….build a new floor (ROW=<tr>).

You can just keep at it. Just remember the simple rule….close each room, then close the floor, before starting a new one. When you’re done…close the table.

Tables can intense if you want more flexibility (as seen below). None of this you have to know to line up your images neatly, but I thought I’d include it as an example of what you can do, without that much more knowledge. I’m not going to explain it though. 😛 You can check out these sites to learn more about structuring tables. Quackit html table tutorial, or W3Schools.…they have a neat “try it” practice table that you can play around to get more comfortable with the code. When I first started, I used this to get the right look I wanted, then I simply copy the code from their editor and pasted it into place on my site, then added in the URLs I needed.

Share your thoughts...