Let me explain each piece of this code, then when I show you the more complicated one, you'll understand what you're seeing. First, the "center" does just that, centers our pictures. Remember from the previous Blogging 101 series', we need them in pairs with < > around them, we first tell blogger we want to center all that comes next by saying center (with < > around it), then at the end of what we want centered we put it's pair, telling blogger to STOP centering with /center (with < > around it), right? OK. (Please also remember this applies to many pieces of code, it mostly comes in pairs, start doing something, then stop doing something!)
The next part, table, tells blogger we're gonna make a table, notice it's pair is at the END of the sequence too with /table. Right after that is cellspacing, this can be set at whatever you want, from 0 to like 100 (although that would put some HUGE space between pictures), that's what cellspacing does, it puts space between each cell of the table we're creating. For instance, with the horizontal pictures above, I used a cellspacing of 10, sometimes I want a wider space so I'll use 20. Here, I want to mention that there's a similar code bit called cellpadding, it works similarly, you can use either or both. I tell you about it now because the more complicated code that blogger creates for us, (that I'll tell you about below soon), uses both padding and spacing. Cellpadding puts padding within each cell, between the picture and the cell's border. Cellspacing puts spacing around EACH cell. (Don't worry if you're confused, just put a number from 1-20 in either cellpadding or cellspacing until you get the distance you want between the pictures.)
 |  |
This is a visual example of cellpadding!
Each cell has padding around it. | This is a visual example of cellspacing!
A space is added between cells . |
Here's why I tend to use cellspacinging, if you look closely, comparing the two sets of pictures, you'll notice that the names (Albert Einstein, Author Unknown) are different distances from their requisite picture. With cellspacing, it puts the space ALL THE WAY AROUND the picture & caption, which keeps the caption close to the picture as opposed to cellpadding which tends to move the caption down.
Ok, onward...
Here's the code box again.
The next part is tbody, which tells blogger that next we're gonna be filling the body of the table with cells that we're going to create. Now into the nitty gritty of the code. We start with tr, which encompasses all the table cells, then the first td, which, in pairs, goes around each cell using < >. Notice that table, tbody, tr and td all have pairs of /table, /tbody, /tr and /td. These, if you remember from a previous Blogging 101 are called opening and closing tags. It's the opening and closing tag td that repeats with each cell. So, right after the opening tag td, we put the info for the first picture we want to see in our horizontal line. After putting in the picture info we use the closing /td tag, which closes that cell. We then put an opening td tag again, opening a new cell, saying we're adding another picture in this row, then add the picture info, then the closing /td tag cell. We continue until we can't fit more pictures across our blog post. (I'll talk about blog post width in a minute, let's just finish here...) Then, when we're finished adding pictures in a horizontal row we add all the requisite closing tags that go with our opening tags, so we're adding /tr, /tbody, /table and /center, all with the < > around each one.
Side Topic: Blog width and number of pictures you can get across a post.
My blog post section is about 600 pixels wide, some are more narrow, around 500-550 (they might have a sidebar on both the left and right side, making the post part narrower. Some are actually a little wider than 600. Your total width of pictures have to be at least 10-20 pixels smaller than your blog center width. Don't forget to include the cellpadding (or spacing) you add between each picture! For instance, if your blog post width is 600 and you want to have four pictures in a horizontal row, then each photo cannot be any wider then 140, assuming that you use only 5 cellpadding (which would be a total of 15 extra pixels added to the widths of the total width of pictures...
140+5(padding)+140+5(padding)+140+5(padding)+140=575 pixels
The great thing is that when you upload a picture to blogger and choose a size (I choose small usually) then blogger adds height and width functionality to the picture code for you! If you remember from previous Blogger 101 posts, you can tell blogger what width and height you'd like your pictures. So, choose whatever requisite width you've calculated will fit your blog and put that as the width, then you can calculate the height that will keep the ratio of height to width the same so the picture stays the same dimensions. (if this calculation is too complicated, you could try taking out the height= part and only changing the width, this should change the ratio as the width changes, although I've never tried it this way, lol, so don't quote me!)
Ok, back to the code...
So, let me show you what the code will look like with the two above pictures added where they should be added.
And this is what that code above will look like! (oh, and if you noticed, I tried using just the width code, and it WORKS, it changes the picture to the correct height ratio to go with that width.)
Now, if you don't understand the picture code that I added between the td and /td then you'll have to go back to Blogging 101 Part 1 & Part 2 to learn what you're looking at.
I'm going to go over the basic code one last time so when you see the complicated code you won't freak out, lol. Let me show you the basic code, in the most simple way, then you'll "see" what I see when I look at the jumble of code I'm about to show you.
There are several sections to the basic code. I've explained about Line 1 and Line 3, it's LINE 2 that we're really concerned about. This is what the basic code will look like when we have three pictures in a horizontal row. We're gonna start on the left orange arrow and move along, with up and down arrows, toward the right, explaining as we go.
First we open our table, that's tr, then we open our first cell with td and put the image code (our picture #1) then we close that cell, /td. Then open cell two with td, put the image code (picture #2) then close our second cell, /td. Finally, we open the third cell with td, put the image code (picture #3) and close our third cell, /td. Don't forget to close the table now, with the /tr. No matter what other code is added around this basic code, it's still just a simple table with three cells.
Now I want to teach you how to use the code that Blogger makes, no having to type in your own code, just moving code around, manipulating it's placement. Since you understand what you're looking at, this should make putting pictures in a row much easier and quicker than what you have to do above, making your own table.
So, imagine you open your new blank blog post and want to add a line of pictures horizontally across the screen. You want to do this easily, without having to build your own table. What you do is this...
- Center your cursor using the button in the header bar, it looks like a bunch of stripes, I've highlighted it in pink!
- Upload the first image you want in your row of pictures. It doesn't matter if it's from a URL or from your computer or some other way.
- Click the uploaded picture so it's highlighted. Choose "add caption" and type what you want in the caption. (later, if you don't want to use the captions, you don't have to use them. It's just that adding the caption adds the extra "table code". What blogger does is when you add a caption to a picture it makes a table with only one cell, putting one picture into that cell, and "attaching" a caption, which allows blogger to make sure the caption stays with the picture)
- Now, click just below that caption you've added and if you cursor isn't centered then start at #1, if it is centered then start at #2 of this list.
- Continue until you have enough photos in a vertical line that will fill the width of your post (about a total of 550 pixels). This is usually three or four pictures unless their seriously small.
- Now, click the HTML button on the very left of the header bar, next to the arrows. You're gonna now be able to see the code for the pictures you just added in your post. This is what you'll see...
Don't panic when you look at the extra code in this box, you'll get to mostly ignore it because it's unimportant. Let me show you what this code above would look like...
 |
| Einstein |
 |
| Nice People |
 |
| Sharing is Caring |
Now, we want to manipulate the code by dragging it around so the pictures will be horizontally aligned with the captions under the correct image. Below is the same code as above, just highlighted to teach you what we want to highlight and drag around.
The pink parts are the three coded pictures each in their own cell & table and the blue parts are the captions, also each in their own cell (a special kind of cell for captions). All the rest of the (black) code is making individual tables with each picture/caption combo. Notice that it's totally similar to the code I showed you that puts the pictures in a line, but each picture is in a table of one! We want to use this fact, use the first picture's table but add two more cells to it, for a total of three cells for our three pictures. Remember, each cell is opened by td and closed by /td with < > around each tag. If you notice, each pink section has it's requisite opening and closing td tag. Each caption, in blue, has it's own specially classed td cell that "goes" with the picture cell. Don't worry, separating the picture cells and the caption cells doesn't "break" anything, in fact, once we move all the pink sections to make lined up pictures, we can erase all the other code, if you don't want the captions.
We will be working with the pink parts first, then the blue parts. Let me go over what we're gonna do generally then I'll try and show you visually. We're going to use the first pink section of code as the place we build the entire horizontal line of pictures. We will be moving the other two pink parts up so they sit right after the first pink section. Then we'll do the same with the blue parts, putting the second and third blue sections right after the first blue section. Basically we'll be eliminating the second and third picture's non highlighted black text. We only need one set of tr and /tr tags for the pictures and one set of tr and /tr tags for the captions. The great thing is that we can just highlight sections of code and carefully drag them to the right place. No copy/pasting or typing new code!
So, lets start with the picture of the code again, but I'll highlight the first move...
What we're doing first is moving section B to right after the /td of section A. (NOTE: I can't put the < > before & after the /td as I type because that tells blogger it's a closing tag and then blogger looks for the opening tag! This applies to ALL tags I type. That's why code is either a photograph or within a textbox.)
Ok, so we highlight section B, just like I've shown you in pink, then click and HOLD down the mouse button and drag the code so it's right after the /td at A. Now "drop" the second pink section B. When you're moving text, you'll notice that Blogger will put a straight vertical line like this... | exactly where your code will go if you drop it. As you drag your code, the vertical cursor moves with you. We want that vertical line to be right after the /td (with no extra space) where A ends. OK?
We now want to do the exact same thing with the third pink part, let me show you what the code looks like after B is moved to right after A below.
Notice that A/B are now together, I'm pointing to A's closing cell tag /td and B's opening tag td. We now want to move C to the END of B, again, right after where B's closing /td tag is. Highlight and drag C just as I told you to drag B. You will notice that after B is moved that all the black code is left, same thing will happen with moving C. Soon, we'll go "rescue" the captions (if you want to use them!). This is what your code will look like AFTER you move C.
Okie Dokie Pokie! Now we've done the major moving, putting A, B & C in the SAME table. Notice that I've highlighted the captions for each picture. Look close, you'll see #1 says "Einstein", #2 says "Nice People" and #3 says "Sharing is Caring". If you want the captions under the picture they went with, all you have to do is move #2 and #3 to the back of #1, just like we did when we put our pictures A, B & C together.
(If you don't want any captions and were only using them to add the necessary code then you need to delete them and all the other superfluous code also. You have to eliminate all the blue captions and also 99% of the black code around them. The only black code we need to keep that's below the pink part is the closing /tr right after the pink part and the closing /tbody and /table that's just after the first blue caption. Remember, tags come in pairs and we have opening tags tbody and table above the pink part so we need to close our tags BELOW the pink part.)
But, let's assume we want those cute captions that go under each picture...
We want to highlight #2 and drag it to the end of #1, right after it's closing /td. Then highlight #3 and drag it to the end of #2, right after it's closing /td. This is what it'll all look like AFTER you move #2 & #3 so they snug up with #1 (just like we did with the pictures).
The pink part is the three picture cells making our pictures line up within the table. The blue part is the three captions that will now line themselves up below their own picture. The green part is the extra code that is left over after we move the pictures A, B & C and the captions #1, #2 & #3. This code must be deleted, it's the code that was making a table for each photo, to keep the picture and caption together when they were in a vertical line (in the beginning, before we started moving stuff.) If you notice, the green is made up of opening and closing tr's, tbody's, tables (with extra code that you don't need to understand, lol) etcetera.
You need to delete the GREEN, but make SURE you leave the closing tags /tbody and /table that are right under the blue captions, they close your table, remember? Guess what? You're nearly done, all the hard part is DONE. All we have to do is put a number in for the cellspacing!! If you have a lot of pics that you're trying to squeeze into a line, then use a small number like 2, but if you have more space to use up then use 10 or so. You can play and see what number makes the space you want. Oh, and to truly see what space you'll get, you have to preview your page which is beside SAVE above the header tools.
The other thing I want to mention is that your code may be wider or narrower and therefore the "cuts" to start a new line may break at different places. Just see the basic code then it doesn't matter where the line breaks happen. Here's what our completed horizontally aligned pictures with captions look like...
 |  |  |
| Einstein | Nice People | Sharing is Caring |
We've finished! Whew, that was some serious thinking work! Did you get it? I sure hope so! Because I couldn't come up with a better way to teach it. I know I used a lot of words but I wanted to make sure EVERYONE understood.
**One Last Note: One of the comments I received about this post mentioned the size of the pictures you can use to put in a row. I should have made that clear, the pictures DON'T have to be the same size, they can totally be a mix of long and wide and tall and small. I used three the same size because they LOOK better, lol. Hey, life if a series of looking good!
I'll be back soon with my artwork for this week's APR challenge (rainbow), until then, be good to one another and enjoy your Spring week.
Best,
P.S. I would really appreciate it if all my visitors who are enjoying this series would join up using my Linky Follower tool in the sidebar, that-a-way ----->
(if you'd like a follow back please leave me a comment requesting one, I'm always thrilled to discover new bloggy friends.)
