Haven't done any of those in a while. Tedious.
Below is the code that makes a small table like the one above have photos side by side:
[Those of you wishing to cut to the chase quickly, start reading the large yellow-highlight area below, which is below the fourth straight red line.]
<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"http://3.bp.blogspot.com/_AVxLoZ0mR_0/R0tYGSDQasI/AAAAAAAAAcI/fNyWP--ziLI/s1600/twinkiebite.gif\" /> </td> <td><img src=\"http://3.bp.blogspot.com/_AVxLoZ0mR_0/R0tYGSDQasI/AAAAAAAAAcI/fNyWP--ziLI/s1600/twinkiebite.gif\" /> </td></tr></table> </center>
A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:
PREVENT LINE BREAKS:
In order for the Table not to cause extra line breaks in Blogger posts, there are two methods:
Method #1: You may need to copy it out like this (no line breaks of your own):
<table border=2><tr><td>PICTURE</td><td>OR TEXT</td></tr></table>
--To create additional row(s), add another set of "table records" such as
<tr><td>picture or text</td></tr>
as needed. Place them after the first table record and before the end tag, </table>.
--Remember that the photos cannot exceed the width of the area where you are placing them or else it will create problems, probably your sidebar being pushed down.
Method #2: This is something I've tried a number of times now. It does seem to be very effective, especially if you're going to use tables often. It is not good, though, for creating a table around a list (numbered or otherwise) because it will remove the page breaks and show the list as if it's a regular paragraph. It'll make the info resemble a traffic jam. This method makes the change in this way, using css:
My explanation of the Table Formatting (Method #2) which I learned from the site above is as follows--changing the table in the CSS: