Ever wonder how people get those perfect and fabulous rows of images or information? Well chances are, if they are WordPress Users, they probably use a plugin of some sort. But what if you want to create rows within a blog post, article, or even for items inside a widget or text box? Are there plugins for that? Well, probably for goodness sakes there are plugins for everything known to man…and them some.
For our purposes today, let’s say you want to organize images or buttons on your site or within a post and you can’t seem to get them to line up perfectly and space them out, or color code them by row for easier visual organization…
I will show you an easy way to whip your information into high gear and force it to submit to your organizational whims.
Take a peak at my buttons page for an example of rows with images all nicely tucked in their respective beds and snuggled up for the long haul. These are my “grab-able” buttons, for all of you to share with your friends, family, and readers (hint, hint).
If I wanted to organize photos in a blog post or as a gallery of thumbnails, the process I used there will work!
Let’s get down to business and dissect this bad boy.
Let’s break down the anatomy of a table, just in case you aren’t familiar with exactly how they orient.
The image above shows a table with it’s respective body parts, and we will use these body parts to create our own table in just a bit! Take note: Table, Table Row, Table Cells…
Tables aren’t used as frequently now as they used to be..but I’m not really sure why since they provide the visual functionality that most of us are seeking and they are extremely easy to create in any medium that accepts html.
We will create a Table:
The image above shows the code for creating one.
The code above will give you 1 table, 1 row, 1 cell…
My cellspacing =0 though you will most likely want this to be closer to 5 or 10 to space your items out enough to visually separate them if you aren’t creating a continuous block of info.
My cellpadding=6 and this refers to the amount of space between your info inside the cell and the cell wallx or imaginary structure itself…In other words, you may or may not want the items within your cell to span the entire width of the cell box or to touch the box walls that are containing them…though for some instances, you may want exactly that.
Now that we have our table structured properly, let’s see how this would change if you wanted multiple cells…
Ok so all we did above is copy and paste the code for the table cell (equal to the number of cells we are hoping for) in this case 3 total. We should have 1 table, 1 row, 3 cells… You will change the url, and image url for each cell (unless you want to repeat the same info for each cell, in which case…well don’t change it). The text in question for the cells themselves is the line of code that looks like this:
Simply add as many of this line above, as you would like to have cells in your row.
So how do you modify this to add multiple rows? Rather than simply copying and pasting the cell code, you will copy and paste the entire section that begins with:
Every time you open something, you need to be sure you close it, or the code won’t work properly. By open I am referring to starting something with <> and to close you simply add a / between your brackets:
< / >
Below I am outlining a pattern for creating 1 table, 2 rows, 1 cell per row.
That’s it, that’s all she wrote…I will expand on easy table creations in another article, so please stay tuned for more Tech Confidential articles…stay up to date and subscribe to my feed or leave me a sweet sweet comment below! I just love to hear from you!
