D
dorayme
....
It is better because it gets you the look you want, it uses the
crucially relevant shrink-to-width of cells *without* this feature being
nullified by interactions with cell widths in different rows. There are
no other rows! And it is less code if you count the elements, the saving
summing to greater and greater economy the more the rows of pics. Plus a
bit more flexibility in that you have more control over spacing between
rows of pictures via CSS.
Nevertheless, it was quite intelligent of you to use tables within a
table. Because the inner table shrinks to width and gets you the look
you want, the cell it is in acts merely as grid space, the latter's size
can happily be left to width itself by both content (the inner table)
and the interactions of rows.
When I suggested getting rid of the inner table, replacing with a div,
we get simpler code but lose the crucial feature of shrink to fit where
it is needed when multi rows are used. A div will (by default) fill its
container, in this case a table cell. If the cell's width is determined
by outside forces like having to line up with other cells in other rows,
this rather buggers things up because you are depending on the divs'
border to roughly respect the aspect ratio of the images! Hence my
suggestion to be rid of multi row tables.
....
If there are a lot of pictures and someone has a big screen, be *nice*
for them to be able to take advantage of it and not have just three
items per row and this fact would not constrain others with smaller
screens. In fact, mobile phone and other small screen users would surely
appreciate seeing one per row - so they scroll vertically (that is
always a given) - no need for horizontal scrolling. This would happen if
you made some compromises but yes, it would be harder to do given your
fancy border requirements. To stop snagging on browser width reduction
would require careful management and dimensioning. And you would not get
*so easily* the rather nice feature you are obviously wanting with
table, the easy vertical aligning.
....
Well, if you really want that inner silver line border, you can do the
one table per row option I suggested above (with its code saving
surprisingly enough!). Or you can do what you have done above but run
the pics through a graphics editor and put a thin silver border and
slight grey padding/mounting-board as part of the image. With just these
pics, it would take very little time.
It is better because it gets you the look you want, it uses the
crucially relevant shrink-to-width of cells *without* this feature being
nullified by interactions with cell widths in different rows. There are
no other rows! And it is less code if you count the elements, the saving
summing to greater and greater economy the more the rows of pics. Plus a
bit more flexibility in that you have more control over spacing between
rows of pictures via CSS.
Nevertheless, it was quite intelligent of you to use tables within a
table. Because the inner table shrinks to width and gets you the look
you want, the cell it is in acts merely as grid space, the latter's size
can happily be left to width itself by both content (the inner table)
and the interactions of rows.
When I suggested getting rid of the inner table, replacing with a div,
we get simpler code but lose the crucial feature of shrink to fit where
it is needed when multi rows are used. A div will (by default) fill its
container, in this case a table cell. If the cell's width is determined
by outside forces like having to line up with other cells in other rows,
this rather buggers things up because you are depending on the divs'
border to roughly respect the aspect ratio of the images! Hence my
suggestion to be rid of multi row tables.
....
If there are a lot of pictures and someone has a big screen, be *nice*
for them to be able to take advantage of it and not have just three
items per row and this fact would not constrain others with smaller
screens. In fact, mobile phone and other small screen users would surely
appreciate seeing one per row - so they scroll vertically (that is
always a given) - no need for horizontal scrolling. This would happen if
you made some compromises but yes, it would be harder to do given your
fancy border requirements. To stop snagging on browser width reduction
would require careful management and dimensioning. And you would not get
*so easily* the rather nice feature you are obviously wanting with
table, the easy vertical aligning.
....
Well, if you really want that inner silver line border, you can do the
one table per row option I suggested above (with its code saving
surprisingly enough!). Or you can do what you have done above but run
the pics through a graphics editor and put a thin silver border and
slight grey padding/mounting-board as part of the image. With just these
pics, it would take very little time.
It goes without saying that I meant: