How to arrange items in a tile like format in a web page?

Question

I've created a simple video & photo sharing website. I want to arrange the preview (thumbnail view) of photos and videos in a tile-like format (like windows 8 start screen) in the home page.

I'm confused as to which tag I should use: table or div. I think it's quite easy to do it using tables, but I don't want to use it because it's solely used for tabular data. I also think that it could cause problems down the road (perhaps getting messy during maintenance.)

The other option is to use a div tag, but I don't know how I would go about doing this with a div tag.

Which one should I go for? A table or a div? If I should use a div, how would I implement this?

Solution

The nice thing about tables is that they are very easy to define a grid with a fixed number of rows and columns. If the content in one cell is over-sized, the table will expand to accommodate it.

On the other hand, divs can be more dynamic. You can have 10 of them across when the window is maximized and 4 across when it is narrower with dynamic layout between the two. For divs, you will want to make each one a fixed size (both width and height), put some padding around them, and make sure they float left. Here is some CSS that I am using on my homepage to make a tile layout. Each div has a class=item on it. I'm using min-height rather than height so that the divs expand vertically if I put too much stuff in them. Older IE versions didn't support this, but I think it works ok now.

.item {
padding:.2cm;
float:left;
width:6cm;
min-height:5cm;
border:thin black ridge;
margin:.1cm;
font-size:medium;
}