It seems that a lot of people have trouble migrating their sites over to CSS in place of tables when they run into simple gallery-like issues. The problem of getting 5 rows of items to all look even and function like they would in tables without using tables. Some of course would argue that a gallery is tablature data, I would disagree. Tables should be avoided for pretty much everything. Especially simple row/column galleries. When I have to create such a thing I will use lists in place of the tables.

Why should I use a list instead of a table?

Basically, a list of course is a bunch of li’s in a ul. You can use ordered lists but for this example’s purpose it isn’t important or necessary to use them. The simplicity of using lists rather then tables is quite wonderful once you get the hang of how they work. Especially when it comes down to the mark up you use, nearly 1/3 of the markup you would need when using a table for the same task.

So, lets take a look at the mark up necessary for making a row/column gallery or products page with lists instead of tables.


<ul class="myGallery">
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
<li><img src="imgname.jpg" alt="image" /><br />Some text to describe this image</li>
</ul>

It is all pretty simple to setup, there are other things that you would probably want to include inside of this markup such as a link to a detail or expanded size page. Those i’m sure you can figure out on your own when you are setting this all up. The most difficult part of this CSS exercise is of course, the CSS. So lets take a look at the CSS you would use to make this all work.


.myGallery li {list-style: none; display: inline; float: left;width: 150px;margin: 10px;}


It is that simple, not a whole lot required and if you need to you can even setup a generic framework for this in your CSS files so you can use it over and over again. The main thing to remember about this CSS being used for your gallery is that you need to figure out how wide each item in the list is going to be and how much space you have to put these images in your site. This will help you to determine how wide you want them to be in order to get a certain number of images per a row.

Another technique you may want to apple to this setup is to set a fixed height also. This can be beneficial if you are having some “flow” issues with your gallery. In cases like this you want to be sure you know what the max height of the image will be and how much text will be in the gallery item on average. This information can help you to determine what the fixed height you need to set will be.

I hope this helps anyone out their struggling with gallery or product lists and trying to avoid using tables in their sites. Web standards are a great thing to embrace, especially if cross-browser compatibility is important to you and the visitors of your site.

Popularity: 5%