Thumbnail gallery without tables?

[Barry Pearson]

Nik Coughin wrote:
[snip]

Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontally and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.

[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.

In the gallery below, I believe that using tables is sensible. The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photography/portfolios/lrps.htm

 

[Steve R.]

Andrew Urquhart wrote in message ...

it's a bit big -128KB of markup alone.

Dial-up users won't be looking at your pages then.

I'm sure the HTLM for tables would have loaded much more quickly.

 

[Steve R.]

Craig wrote in message ...

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/

Many of your thumbnails are very poorly web-optimised, especially on a page
which carries so many images. Pity the poor dial-up user (60% or more of
all users)

This one for example is 19K ..
http://www.amd-m.com/guys/thumbs/jonathanh_jpg.jpg

and this one 19K ...
http://www.amd-m.com/guys/thumbs/tomwastintime_jpg.gif

Thumbnails that pixel size can easily be around 3K - 4K maximum.

 

[Sid Ismail]

On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways


<td>
<img.... ><br>
Caption goes in the same TD cell
</td>

Sid

 

[Els]

Hmmn, in your implementation for each thumbnail image you've got a div
containing a 1 cell x 2 row table. I think it's unlikely that the caption
and image are ever going to get pulled apart from each other as they might
do in a multi-celled table, so it'd be quite difficult not to associate the
caption text with the image. That said, the table does actually seem
somewhat redundant to me.

It's not redundant. Try taking it out
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.

Looking at the information you're representing in the page you have a
collection of images with caption data, there are no categories or
sub-categories in the gallery so you don't need any additional structural
markup to order and partition your thumbnails - the reason why I used
multiple lists of various types. The only thing you could do different
AFAICS is use a single list, but you wouldn't gain too much by doing that. A
list would allow a user to know how many items are in the gallery and to
jump from thumbnail to thumbnail without being forced to jump over the
captions as well, plus the user could more easily find the end of the list
and skip to any following content, but in your example there only is the
gallery and no other content, it would be hard to recommend implementing a
list in such a case.

True, and on the actual page, the only other content is the
menu, both before and after the thumbnail collection. But if
I were to make it a list, are you suggesting having each div

As an alternate method I built a photo gallery as a collection of nested
lists, although it doesn't have explicit captions it might make more
semantic sense, but I'm still trying to decide:
http://homepage.ntlworld.com/andrewu/photo/ [it's a bit big: 128KB of markup
alone]

Looks very nice, but why did you put all these widths and
heights in? The heights are all equal, and the widths don't
matter, as far as I can see.

If the browser knows the dimensions of the content (in this case the images)
during download it can in theory render and layout the page as it downloads
instead of having to wait for each image to download and then calculate the
image dimensions from the image file data and then re-draw the page.
True.

It's also valid markup that way as well!

That I knew

And you are saying 128kb of
markup, well, that might have to do with the length of your
uri's :-D

) I know! The reason that the URIs are written out in full is rather off
topic! It's because the page was actually created using a mirroring script
that I built (http://www.andrewu.co.uk/tools/mirroragent/mirroragent.zip
[9KB, zipped HTA]). That entire page is actually mirrored from
www.andrewu.co.uk/photo/ in an attempt to save that sites megre bandwidth!
The mirroring script changed the relative links in the original page during
the mirroring process so that the web page would work on a different domain,
it's just that I haven't gotten round to making it use relative URLs during
this process. So, that's why their absolutely referenced! )

If they're all on the same domain, making them relative will
only take about 1 second with search and replace

 

[Els]

Nik Coughin wrote:
[snip]

Also, a table is going to be a fixed number of cells wide. This
means that your gallery is a fixed number of thumbs wide. The above
will fit as many thumbs as possible into the space available
horizontally and wrap the rest onto the next line. If you *want* it
to be a fixed number of thumbs wide then you wrap it in a div that
only has room for that many thumbs.

[snip]

I build my thumbnail galleries in the basis of balanced rows of 5 photographs.
I also wanted a regular spacing, even though my thumbnails are not all the
same width. (They all have 1 dimension 125 pixels, and the other the same or
less). So I want that level of inflexibility, and I want it whether or not the
user has CSS.

Yep, that's what I did too, with tables, on various pages of
http://www.rachelrijsdijk.com/ (forgive me about the splash
screen, it is too big, but it wasn't my design)

In the gallery below, I believe that using tables is sensible.

I agree.

The problem is
having extra rows for the extra links, which means it doesn't linearise well,
and causes problems for people using speaking browsers. (I didn't design my
photography pages for people needing speaking browsers, although I have tested
them to see how they behaved).

http://www.barry.pearson.name/photography/portfolios/lrps.htm

That's what I call a good way of using tables for layout
purposes. It's difficult to do that with divs. I'd say
impossible too, unless you use little tables inside the
divs, but as this is fixed width, I'd say a table is far
easier to maintain and much less code too.

 

[Els]

However, if you want to see what the html source looks like, copy the code
below and paste it into notepad (or any other plain text editor), then save
it as tables.html and open it in your browser. Below that, I have included
my code for doing it with CSS. Notice that the table version is fixed
width, the CSS version scales to your browser window.

[snip code]

I did copy and paste that, and it looks okay, but it won't
work if you don't carefully put them in order of height..
Try it with alternating heights, or with a double line
caption here and there. It will break up and not look at all
the way you want, I'm sure

 

[Els]

Each div is float: left; with the same height and width.
http://www.amd-m.com/guys/

I personally don't like the pictures and their captures
'floating' to the top of each div.
Which is why I used tables (2 rows each) inside the floating
divs myself.
Example page:
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptions.html
I don't think that visual effect can be gained with divs only?

 

[Els]

On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"

: With either method (tables or divs) there could be a loss of semantic
: information depending on the implementation. For example if captions are a
: seperate table row then the connection between the image and the caption may
: not work very well for browsers rendering the content in non-visual ways

<td>
<img.... ><br>
Caption goes in the same TD cell
</td>

Which only will look 'okay' if all thumbs have the same
height. They don't at least on my pages

 

[Andrew Urquhart]

Andrew Urquhart wrote in message ...

Dial-up users won't be looking at your pages then.

I'm sure the HTLM for tables would have loaded much more quickly.

Hi Steve, I agree with you that the page is not dial-up friendly and it is
my intention to remedy that in the future.

However, I very much disagree when you say "tables would have loaded much
more quickly". I'm sure that it would load more slowly and here are my
reasons:

1. If my gallery was table-based then the instead of an <li> and <ol> I'd
need at least <td>, <tr> and <table> (I'll omit <tbody> and summary
attributes etc.) I calculate that if I make my gallery table-based I would
use 285 extra characters of HTML (225 for <tr> and 60 for the extra chars in
<table>). In reality this figure would be larger as I'm viewing 10
thumbnails per line in my 1024px-width viewport and I would need to reduce
this to not larger than 800px, hence more rows would be needed. It should be
noted that I could never accommodate every viewport size with a table-based
layout - if I fix the number of thumbnails per line then it's not going to
fit in someones display and would look too small in someone elses.

It should also be noted that:
2. This gallery has a DHTML-based display mechanism (for those that support
it, for those that don't there's an alternative) so each image has a rather
large onclick handler attached that really beefs-up the markup.
3. There simply are an awful lot of thumbnails in the gallery - 184 to be
exact each with very descriptive alt and title attributes.
4. The URIs used are absolute and not relative due to the process in which
the page was created via a robot, this is explained in an earlier post in
this thread. Correcting the absolute URIs would reduce the gallery by at
least 8832 characters.

 

[Andrew Urquhart]

It's not redundant. Try taking it out
If you use two divs inside the div instead of two table rows
inside the div, the picture can't be vertically aligned with
the other pictures and the caption ditto.

Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd not
say it couldn't be done, but it would certainly make the CSS less trivial!
)

But if
I were to make it a list, are you suggesting having each div
as a <li> item?

Yes, it just has extra semantic meaning than a div ("Here is a
catalogue/list of something" vs. "Here are some blocks"), but can be styled
to do everything that your div can do.

So, that's why [the URIs are] absolutely referenced! )

If they're all on the same domain, making them relative will
only take about 1 second with search and replace

Very true! Although the mirroring process is all automated so I'd have to
manually intervene, open an editor, go find the processed page, etc., etc.,
and that would take a bit longer than 1 second! )

 

[Els]

Agreed, getting all images and captions to appear with the same vertical
positioning is likely to be a big problem without tables, although I'd not
say it couldn't be done, but it would certainly make the CSS less trivial!
)

Well, I've tried to do it, but it just got way to
complicated, which is why I used the tables.

Yes, it just has extra semantic meaning than a div ("Here is a
catalogue/list of something" vs. "Here are some blocks"), but can be styled
to do everything that your div can do.

That was easy!
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionslist.html

So this way it would be quicker to jump from thumbnail to
thumbnail? Good

So, that's why [the URIs are] absolutely referenced! )

If they're all on the same domain, making them relative will
only take about 1 second with search and replace

Very true! Although the mirroring process is all automated so I'd have to
manually intervene, open an editor, go find the processed page, etc., etc.,
and that would take a bit longer than 1 second! )

Make it 5 minutes then

 

[Sid Ismail]

:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: >
: > : With either method (tables or divs) there could be a loss of semantic
: > : information depending on the implementation. For example if captions are a
: > : seperate table row then the connection between the image and the caption may
: > : not work very well for browsers rendering the content in non-visual ways
: >
: > <td>
: > <img.... ><br>
: > Caption goes in the same TD cell
: > </td>
:
: Which only will look 'okay' if all thumbs have the same
: height. They don't at least on my pages


Have valign=bottom in your TD then?

Sid

 

[Els]

Well, I've tried to do it, but it just got way to complicated, which is
why I used the tables.

Oh, and it is (to my knowledge) simply impossible to have
the various thumbs (different heights) aligned - vertically
centered - without specifying exact height for each thumb
seperately.
Can be done automatically with Perl or maybe PHP, but it's a
hassle and a lot of extra code.

 

[Els]

:
:
: Sid Ismail wrote:
:
: > On Tue, 24 Feb 2004 01:08:36 -0000, "Andrew Urquhart"
: >
: > : With either method (tables or divs) there could be a loss of semantic
: > : information depending on the implementation. For example if captions are a
: > : seperate table row then the connection between the image and the caption may
: > : not work very well for browsers rendering the content in non-visual ways
: >
: > <td>
: > <img.... ><br>
: > Caption goes in the same TD cell
: > </td>
:
: Which only will look 'okay' if all thumbs have the same
: height. They don't at least on my pages

Have valign=bottom in your TD then?

That just aligns the lot to the bottom of the td instead of
centered. Which helps a little bit, if all the captions are
the same height ;-) It still won't look aligned nicely.
With seperate tablecells, the captions will be aligned with
each other, and so will the thumbs.

 

[Brian]

What in heaven's name is wrong with using tables for this application?

What in heaven's name is the data relationship between e.g., the photo
of "Coordinators" and that of "Hall of upper cottage?"

Especially if you have text captions under/above each image.

That would be the only use of table, thus 1 table for each
image/caption, floated left.

Tables is more universal than souped-up morse code.

10 tables? I think it's simpler the way it is.

 

[Paul Furman]

...it looks okay, but it won't work if you
don't carefully put them in order of height..
Try it with alternating heights, or with a double line caption here and
there. It will break up and not look at all the way you want, I'm sure

I took a stab at those issues. It gets a whole lot more complicated! It
has nested divs for the thumb and caption inside the same float left
span above.

http://www.edgehill.net/html/css/gallery2.htm

I was able to omit the width in Mozilla and it sized to the thumb if the
text was not too wide but the second one stretched to the end of the
earth in IE. The height has to be fixed to get the captions to line up
in the bottom. IE won't show the fixed height of the two-line caption
box unless there is enough text to fill it, Mozilla overflows if I write
a caption longer than two lines.

I don't think CSS is necessarily easier or more compact than tables. It
is nice to get the automatic wrapping though. If I was processing this
with php, I could calculate the largest height image for all and set the
width based on each image width (and set the caption box width to match)
then the caption height (and the container span) would have to be
calculated in ems for the largest caption in the set!

I couldn't figure out how to center the image but it's probably
something simple.

If the contents could be aligned to the bottom at a consistent baseline,
I wouldn't mind the top being ragged. I have no clue how to do that.

Here's another version where I just let things fall where they want and
the only width or height I fix is the caption width to match the image
width (plus padding/margin which shows differently in IE & Mozilla so
it's not perfect:
http://www.edgehill.net/html/css/gallery3.htm

 

[Els]

I took a stab at those issues. It gets a whole lot more complicated!

I know

It
has nested divs for the thumb and caption inside the same float left
span above.

http://www.edgehill.net/html/css/gallery2.htm

Almost what I want...

I was able to omit the width in Mozilla and it sized to the thumb if the
text was not too wide but the second one stretched to the end of the
earth in IE. The height has to be fixed to get the captions to line up
in the bottom. IE won't show the fixed height of the two-line caption
box unless there is enough text to fill it, Mozilla overflows if I write
a caption longer than two lines.

I don't think CSS is necessarily easier or more compact than tables.

True

It
is nice to get the automatic wrapping though.

Just in case you didn't see my message in a 'side-thread' of
this one, I made an example that has the ease of tables, and
the wrapping of divs:
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptions.html
I was told it's even better (for usability) to make it a
list, so I then changed it to
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionslist.html

If I was processing this
with php, I could calculate the largest height image for all and set the
width based on each image width (and set the caption box width to match)
then the caption height (and the container span) would have to be
calculated in ems for the largest caption in the set!

I couldn't figure out how to center the image but it's probably
something simple.

Horizontally: text-align:center to the div.
Vertically: only possible if you know the height of each
thumb, by using positioning and negative margin.

If the contents could be aligned to the bottom at a consistent baseline,
I wouldn't mind the top being ragged. I have no clue how to do that.

Me neither.
(in a div that is)

Here's another version where I just let things fall where they want and
the only width or height I fix is the caption width to match the image
width (plus padding/margin which shows differently in IE & Mozilla so
it's not perfect:
http://www.edgehill.net/html/css/gallery3.htm

That's exactly what will mess up the look of the page if you
have more than just two thumbs with different heights.
For me tables (one per thumb) is the answer to this problem,
and as there is no accessibility or flexibility issue (as
far as I know), I don't think it's bad coding or design to
do it the way I did.

 

[Barry Pearson]

Paul Furman wrote:
[snip]

I don't think CSS is necessarily easier or more compact than tables.

[snip]

I examined several layouts, using types of CSS positioning and also using
tables, and found that, on average, my table pages were perhaps 25 bytes extra
per item being positioned. So for 3 columns, it might be about 75 bytes. If
you add spacer GIFs, then you can possibly manage with just one (a single,
transparent, pixel) at less than about 50 bytes. These are just rules of
thumb, and depend on such things as the lengths of ID names, etc.

Somethings I haven't managed (yet) to do with CSS positioning. Some design
ideas are silly to try with tables. I'm currently trying to solve a design
idea that I don't know how to do with either, largely because of well known
problems with IE, but I think I know how to do with a combination of a simple
table and floats within it.

If all you have is a hammer, everything looks like a nail. (Traditional)

If all you have is a screwdriver, everything may get screwed up. (Barry
Pearson, 2004)

And sometimes you just place the screwdriver against some ice you want to
remove, and hit the end of it with a hammer!

 

[Paul Furman]

...
Just in case you didn't see my message in a 'side-thread' of this one, I
made an example that has the ease of tables, and the wrapping of divs:
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptions.html
I was told it's even better (for usability) to make it a list, so I then
changed it to
http://www.mediatech.nl/~rachel/Rachel/thumbswithcaptionslist.html

For me tables (one per thumb) is the answer to this problem, and as
there is no accessibility or flexibility issue (as far as I know), I
don't think it's bad coding or design to do it the way I did.

Ah ha!
I tried something like that too:
http://www.edgehill.net/html/css/gallery4.htm
http://www.edgehill.net/html/css/gallery5.htm

Then I boiled yours down to the basics and color coded to make sense of
it: http://www.edgehill.net/html/css/gallery6.htm