Captioned Photos In A Small Table

PICTURE1 PICTURE2 Caption1 Caption2 Caption1 Caption2 Below in red is the code for the two small tables shown above. The style definition NOBR is invoked to prevent a pile of line breaks on top of the table, which is something I use for every table. There are also some artificial line breaks that had to occur in the long url's; this was done to prevent the table margins from getting wacky! <div class=nobr> <table border=2> <tr> <td>PICTURE1</td> <td>PICTURE2</td></tr> <tr> <td>Caption1</td> <td>Caption2</td></tr> </table> </div> <div class=nobr> <table border=2> <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> <tr> <td align=center>Caption1</td> <td align=center>Caption2</td></tr> </table> </div>

Table for Horizontal Photos In Post

Ronald	Southern

Haven't done any of those in a while. Tedious.

[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.]

Below is the code that makes a small table like the one above have photos side by side:

<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaOEgOjpEK1oRv_I88gykcbl-wVKUiaG4nUQTbzGx7OYC3F7ugr-QGGpk7nkrUl9CmLjxGYJeuuwlbY_sHmShNTEHKfSvwho-qveJ9aXts9OR9qeLwErBJvBpwa4pmQ1LeSFP/s1600/twinkiebite.gif\" /> </td> <td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaOEgOjpEK1oRv_I88gykcbl-wVKUiaG4nUQTbzGx7OYC3F7ugr-QGGpk7nkrUl9CmLjxGYJeuuwlbY_sHmShNTEHKfSvwho-qveJ9aXts9OR9qeLwErBJvBpwa4pmQ1LeSFP/s1600/twinkiebite.gif\" /> </td></tr></table> </center>

---

[More below...]

A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:

PICTURE

OR TEXT

<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>

---

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:

Table Formatting In 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: Place the following line of code in your CSS: .nobr br { display: none } Then place the DIV tags around your table as below: <div class=nobr> <table border=2> <tr> <td>PICTURE</td> <td>OR TEXT</td> </tr> </table> </div>

Table In Blogger Post

There are two fixes below for tables in Blogger. The second one (highlighted in yellow) is the one I prefer--it's less work.

One trick is to type the whole table out on one continuous line; then you won't end up with a lot of extra line breaks imposed on it by Blogger. That's what produced the ONE TWO THREE FOUR below.

ONE	TWO
THREE	FOUR

Go to Blogger Article

---

This is something I learned about late, but it seems to be very effective, especially if you're going to use tables often. It's probably far better; at any rate it changes things another way, using css:

Table Formatting In CSS

My explanation of it is as follows, changing the table in the CSS:

Place the following line of code in your CSS:

.nobr br { display: none }

And place the DIV tags around your table as below:

<div class=nobr>
<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>
</div>

See also Table Used For Horizontal Photos.

END.