I always develop sites using CSS but am aware that tables have their place when displaying tabular data, however I can't decide whether to use CSS or a table to display the products on the home page of a re-design I am doing and just want peoples opinions please (note I will be lining up the product descriptions vertically though they don't appear that way yet).

The layout is attached as a jpg.

What would you do??

It's always best to use a div layout when one can, but I guess a table could also be used to layout this design. Semantically speaking, either way would seem fine, but usually tables are a little more bloated in markup and css in my opinion.

@teedoff - I agree and I hate working with tables and you make a good point about bloat.

CSS

CSS is better anyday, since it is more flexible than tables. CSS has been designed to replace tables as a layout system and you can adjust your data more precisely and with lesser difficulty than you can do with tables. Imagine creating table cells of varying heights and widths all over a page in contrast to simply specifying it's location in terms of a few attributes. Hope you get my point! :)

@dantinkakkar, I think you misunderstand - I was looking for opinions only as I have been designing/developing using CSS for about 8 years now and already know its benefits. I only asked for opinions as it was a table format and in a sense contains tabular data.

Anyway I went with CSS as the first 2 responders confirmed my thoughts and all is done now.

Whats the website URL, if there is one.

This is a re-design for an existing client of mine which I am converting from PSD to HTML at the moment so the new design isn't live yet. If you want to see the current site though the domain is www.uniteddiesel.co.uk.

I know you already chose for CSS, but I want to add a point for others having to make a similar choice.

If you choose CSS you can allow your products to wrap around the width of the page. In the site where I used this I can set my browser to full screen width and have 8 div's next to each other. If I had chosen a table, it would always be 4 (the width at that time). If you have a lot of products/images on a single page, such choice may benefit your users because they see your products instead of a lot of whitespace.

@pritaeas - that is a good point as even though I haven't integrated the php yet, this area will dynamically load 8 products and all I have done is float each 'box' to the left and they just wrap down to the next line which saves me having to use php to calculate the number of products already showing so as to know when to create the next table row.

maybe a bit late, but:
CSS is ment to deal with the layout.
a table is ment to place certain data together, in the structure of a table.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.