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?

Answer 1

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;
}

Answer 2

I would use a div tag. I would then use CSS to give them a specific height and width and float them to the left.

By controlling the height and width you have more control over the spacing in-between the divs.

For example, if you wanted a grid of 150x150 thumbnails.

   div.thumbnail {
      height: 150px;
      width: 150px;
      float: left;
   }

Answer 3

I understand the question was about tags only, however a thing I think you should consider using is a jQuery plugin called Isotope. It does all the tiling for you, allowing you to arrange elements of different dimensions and aspect ratios in a well-aligned and good-looking grid.

Link to the plugin: http://isotope.metafizzy.co/