Table Dimensions

[ice78991]

I am designing a table and want to specify the exact dimensions of each cell so that I can insert some images.

I am going to set the width of a major cell as follows

<td colspan="2" height="550" width="973">

Is this figure ok for the width and can I guarantee that the cell will be of this width in all browsers or will some browsers collapse the cell? If I set its background attribute to a 1 pixel .gif will this act as a spacer?

 

[Vragabond]

No and no. AFAIK, you cannot have (or the browser will ignore it) width specified to table cells that span multiple columns. That makes sense to me, since you cannot say that you have two cells, one 200px and another 500px in the first row and a single cell of 800px in the second row. Your table would no longer be a table then.

Secondly, background images do not interfere with the dimensions of the element. They get cropped to fit the element not expand the element to fit inside. In that case, your background image will be visible to the extent of the rendered element.

Looking at your dimensions for the table I am however sceptical that you are using table for tabular data. If it is not tabular data you are rendering, I suggest you veer away from tables and go with other elements (namely divs) and css to style them accordingly. This will give you a lot more precision and control over what you're doing.

 

[ice78991]

I am using the table layout for a grid of images. I have been looking for tutorials on implementing this in css but the ones I have found so far do not work in ie7. Is the table structure the best way to render a grid of images centered on a page ?

<tr>
<td align = "center">
<img src =........ etc etc

is very easy to implement and lends itself well to coldfusion

 

[Vragabond]

I myself prefer floating the images. But if you give us more info than just "grid of images" we might be able to advise you better. When you mention it, I do not think of table at all.

 

[ice78991]

I've been trying to find an example. I'm thinking of a page which basically dynamically generates images in a grid. something like th efollowing

http://www.basemodels.co.uk/category_results.php?location=9&category=5&rows=6

Would you implement this with tables or floating images ?

It has been done with tables

 

[Vragabond]

No doubt in my mind, floating images. It is also much more flexible in terms of dynamic building (super easy if you want more or less items in a row). Here is a nice example of a similar grid:

http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm

 

[ice78991]

Interesting article. Why is it do you think that if you look at most image galleries on the web they are done with tables ?

 

[traingamer]

Why is it do you think that if you look at most image galleries on the web they are done with tables ?

Widespread ignorance of the power of css.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ice78991]

Using Float:left I can lay out images in a grid as discussed earlier

For example, below each image is represented by an x

x x x x x x
x x x x x x
x x x x x x

If I had only 2 more images to add and I wanted then to be centered on a row, what is the best way to achieve this - preferable dynamically. If I was using tables, I would nest a table in the last row and then I could dynamically add up to 5<td>s with content centered

ie

x x x x x x
x x x x x x
x x x x x x
x x

As opposed to (which I do not want)

x x x x x x
x x x x x x
x x x x x x
x x

 

[Vragabond]

I actually prefer your other option. But if you don't like it, it will not be as simple. I think you will have to calculate how many elements in the last row and then apply different margins to the elements to make sure they position themselves correctly. If you ask me, it is not worth it.

 

[traingamer]

One of the nice things about the float method is it's ability to adjust to different size widths. With absolutely no changes to code you get this with a narrow display:
x x x
x x x
x x x
x x x
x x x
x x

and this with a wider display:
x x x x x x
x x x x x x
x x x x x

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill