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?


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 {
border:thin black ridge;

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;

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.