Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

3 Answers 3

up vote 1 down vote accepted

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;
}
share|improve this answer
add comment

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;
   }
share|improve this answer
add comment

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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