Pretty photo albums and inline tables.

A table-like layout makes sense for a photo album. Most photo album software has images and captions, in a grid-like arrangement, which can be more or less mapped onto HTML's <table> tag and its children, <tr> and <td>.

The trouble with this approach is that the width of the table is at a minimum the number of cells in a row times the width of the images in that cell. This will have the result that on almost any display that isn't that of the designer, the table will either take up far too little of the screen, or too much, and the viewer will have to scroll to the right to see it.

You'll see my solution to this if you view one of my photo albums and resize your browser to make the viewing area more narrow. If your browser is graphical and reasonably recent (post 2000, say, or Mozilla 1.0+, or IE 5.0+ and others I assume) you will notice that when you make the viewing area more narrow, some of the images move onto the next line rather than forcing you to scroll to the right to see them.

This came about because Jeff suggested to me that rather than having a table something like:

which will have three images per row no matter what the width of the viewing area is, I could put all the images in spans, something like this:

Since <span> is an inline element in HTML (as opposed to <div> which is a block element, see CSS2's visual formatting model for more details) the contents of each span line up side-by-side until they won't fit on the screen.

This solution was fine until I tried to add the captions. The captions were enclosed in <p> tags, and paragraphs are rendered as blocks, not inline. This meant that the images were lined up underneath each other, because the line was broken by every caption.

My current solution to this problem, which appears to be reasonably portable, is to do the following:

and to use a CSS directive like this:

which causes the tables, which are normally rendered as block elements, to be rendered inline. And this achieves the desired effect, and still lets the images have captions above or below them, as you choose. CSS table styling will help in making the tables just so.

I haven't tested, but I suspect this degrades nicely in older browsers: the little tables will just be rendered as block elements, one by one in a vertical row, which isn't that bad.

I've used this technique in my album theme: Uptight, which will produce HTML 4.01 strict albums that you can style yourself with stylesheets, and also in my own album generator, which is part of backwards.