Writing captions for images

Caption may be any length

[Hagstrom]

Is there a preferred way of writing captions for an image?
One that will break the caption at image width and will work for all browsers?

My personal solution is like this:

<table align="center" width="1">
<tr><td><img src="img.gif" height="100" width="100" alt="alt-tekst">
</td></tr>
<tr><td>Here is my beautiful picture. I made it all by my little self and yada yada yada yada yada</td>
</tr></table>

The trick is that when the table has a width of 1, the browser will expand the table (and the following text) to the actual width of the image.

Is there a better solution?

[Purple Martin]

You could put them in a 1 pixel wide div instead of a table. I haven't tried it, but I think you'd get the same result, and avoid some of the rendering problems that tables can cause.

[Hagstrom]

No, a DIV with a width of 1 will write 1 word per line. It will work if you use the actual width of the image but that means you have to specify the width twice - once in the IMG-tag and once in the STYLE section.
And then you would need one DIV-class per image.

[Longhaired Genius]

And then you would need one DIV-class per image.

Not if you use inline styles.

You can put most of the styles in the stylesheet and then use an ad hoc inline style for the width, like this:

<div class="picture" style="width: 127px;"></div>

But, frankly, I think your table method works fine.

[dingman]

Frankly, I think that images are a great time to use inline styles, specifically for this width issue. I've got a slide show app where I use something much like what is described here to set image width and height, along with table width to keep the caption contained. I know my users have varying size screens, and don't want the images too puny or too huge to really see, so I actually use inches in inline styles to set them to the orriginal scanned size. Might be the only place where I use an absolute measurement unit anywhere...

[Hagstrom]

Unfortunately DIV-width doesn't work well together with align - e.g. <div align="right" style="width:150px;"> will right-align the image within the first 150 pixels of the screen. This is true for IE6, NS6, and IE4, but NS4 will place the last line of the text on the right side of the screen!

Another problem is that DIV-tags terminate the P-tags, so you can't float the text around the image. I assume all this could be fixed by using FLOAT, but FLOAT gives rather strange results with NS4.

The TABLE-solution has served me well - I just thought tables were cumbersome for browsers and sight-impaired persons.

[dingman]

Why use the 'align' attribute? There's got to be CSS to achieve that.