Flowing table cells

[thotheolh]

Hi. I would like to create a table (width="100%") where the cells would keep on 'flowing' to keep adding columns to the table until it needs to flow into the next row. These are used to hold images.

Simply, the concept is to mimic textarea where the words would keep flowing until it have to go to the next line. I want the similar concept to be used in the table.

So when the user changes screen sizes, the table would table up the entire screen and images would be taken from a directory and place into table cells until it reaches the end of the first row and flow onto the next.

 

[adamblan]

#1 - Why tables? Use css divs instead

#2 - Depending on the level of complexity desired this effect could be done either server or client side, it's really up to you how you want it set up, but I think the best way would be to create an xml doc from db query, and display content based on that dataset...

#3 - Of course, you could always KIS and just float you images...

 

[thotheolh]

May I know how do you do use CSS divs for the flowing table cells ?

 

[jnjc]

I think you may be over complicating things. Check out:

http://www.solasit.com.au/sandbox/webdesign/imgGallery/

Try resizing your browser and you should see the content wrap depending on the size of your browser window.

If you view the source all I have done is as follows:

<div class="gallery">
<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>
<img src="5.png"/>
<img src="6.png"/>
.....
</div>

and the style is applied only to the div as follows:

div.gallery {
width:90%;
height:50%;
overflow:auto;
margin:auto;
border: solid 1px #000;
}


If you need to be able to click on the images etc. then you will have to wrap them in a link or enclose them in a div (look at using float:right in your css).

HTH,
JC

 

[thotheolh]

Thanks. Would look into the helpful codes