Blogspot image captions

Why is it so hard to do image captions on blogs?

Apparently because it's strangely hard to do image captions in HTML*.

Google it and you get "hems" and "hahs" and "TIMTOWTDI" responses.

This site recommends tables or CSS. Unfortunately CSS is awkward with blogs since the blog usually already has a bunch of styles defined, and some HTML (like "<br clear="all" />") gets stripped by blogspot as soon as it's posted. Grr.

So here's their recommendation, tweaked by me:

<table align="center">
<caption align="bottom">  caption text  </caption>
<tr><td>  <img ...>  </td></tr>
</table>

And it looks like this:

A weird moth we saw on our Varsity/Venture High Adventure Campout

"What is that mess? Code?!" - Love, Mom.

Okay, mom, I'll admit us computer types haven't made it perfectly easy for you yet...

Yes, that's a simple table in HTML code, which is the way we make web pages look better than just a bunch of words strung together. To use it in Blogspot, just insert your image like you always do (with no alignment), then switch to "Edit HTML" mode and copy/paste my code up there into your blog. Then replace the <img ...> tag in my code with the mess that blogspot entered in there for you (probably starting with "<a onblur...." and ending with "</a>").*

Change the caption and you're set.

This guy is just a little bigger than a quarter...

Other tips

When you're in HTML editing mode, you'll probably want to enter a word or two in front of the <table> tag, and also after the </table> tag. This will make it easier when you switch back to "Compose" mode to just click on the text and continue typing.

Also, if you change that align="center" to align="right" in the table tag, you can push it off to the right (or left) of the flowed text.

Hope that helps -- enjoy!

---

* 10 second HTML tutorial: HTML is mostly just plain text with "tags" mixed in to change the formatting. Tags start with "<" and end with ">", and usually come in pairs, e.g. to bold some "text", you'd enter this in html: <b>text</b> (that's how I bolded my image caption). The closing tag is differentiated with a "/" in front of the tag name.