How to layout 6 images in two rows

I want to use XHTML and CSS

[Digmen1]

Hi guys

I am a bit of a self taught newbie.

I have a website that layouts out some images with a brief description under them as in a product catalogue.

I would like to have six images 3 on each of two rows.

I have done it with a table in HTML.

But I would like to redo the page in strict XHTML and CSS.

Can anyone give me a quick guide as to how to do this or point me to a good tutorial on this (I have not been able to find one)

Kind Regards
Digby

[koan]

I'd do something like that:

div.clearer { 
clear: both;  
height: 0px; 
} 
<div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div class="clearer"></div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div style="float: left; width: 33%;"> 
<img ... /> 
</div> 
<div class="clearer"></div> 
</div> 

[encyclo]

Looks like tabular data to me - so use a table. Tables are just fine in strict HTML when you use them appropriately. :)

[penders]

Ok, I'm not completely disputing the table idea but... this looks more like a list to me. A list of images (and descriptions), a list of products... a sequential list of items one after the other. Why is this tabular data? What is the relationship between rows and columns?

A list can be styled to have 3 columns and 2 (or however many) rows in a similar way to koan's method... floating the LI's and setting width:33%. Or you could fix the width of your LI's (presumably your images are fixed width) and allow the list to flow - showing 3 columns at your optimum resolution/viewport size but perhaps more or less depending on the size of the users viewing device - depending how flexible your layout is. You can't do this with a table. A list is also easier to markup and output dynamically from a serverside script.

Have a read down this thread (includes some code for a list of images/descriptions):
Having Item name above thumbnails [webmasterworld.com]

[Digmen1]

Thanks guys

That gives me plenty to work on.

Pender - That thread you gave was also great thanks

It seems that the jury is still out on tables in HTML.

As I am a newbie and only have two websites, I decided a year ago to go for XHTML and CSS and Strict.

When I run them though the wsc validator my table throws up a few errors, this is what prompted me to try to lay out my images in XHTML.

But I suppose I could also lean how to style my present tables better.

Kind Regards

Digby

[swa66]

I think if you say "I would like to have six images" : that's what goes in your html. "[laid out] 3 on each of two rows": that's what goes in your css.

How to do it without tables depends a lot on what you know.
Do you know the width of the parent ? Do you know the width of the images themselves ? ....

And if you get many "no" anwers in there: do you know it will fit ?

Depending on that you can do a number of layout techniques, from centering text and having the images inline, to floating the images and aligning them left or right. Even absolute positioning them at any random spot is an option you have.

It's all limited by imagination and knowledge only.

[penders]

It seems that the jury is still out on tables in HTML.

As encyclo suggests, for tabular data use a table. That's what tables are good for. There is no big judicial debate against using tables. However, you should try to avoid using tables solely for layout (where they may have been used in the past) - use other elements and CSS instead.