Add CSS Classes for Table Columns

I'm new to Zen-Cart, but as a longtime web developer who's been using divs and css-styled tables for years, I wanted to throw my two cents in.

The entire table can be simplified drastically, moving all presentational attributes into CSS and eliminating many of those redundant class names by putting one "parent" class name on the table and addressing everything through it. Besides making it easier to read the HTML code, it makes styling very, very flexible.

Also, using numbered class names isn't optimal, since the number of columns here can change; if you add another column like Manufacturer, your CSS would break. (My store has four columns, for example.) I like using class names that have meaning to what the column contains, and a second class that specifies whether the column is on the left, right, or is buried in the middle, for spacing purposes.

Here's what it looks like now:

HTML:

<table class="tabTable productListing">
  <tr>
   <th class="image left">Product Image</th>
   <th class="name middle">Item Name-</th>
   <th class="price right">Price</th>
  </tr>
  <tr class="odd">
   <td class="image left"></td>
   <td class="name middle"></td>
   <td class="price right"></td>
  </tr>
  <tr class="even">
   <td class="image left"></td>
   <td class="name middle"></td>
   <td class="price right"></td>
  </tr>
</table>


CSS:

/* If these first two rules are generic enough, maybe they should be to table.tabTable? */

table.productListing { width: 100%; border: 0; }
table.productListing td, table.productListing th { margin: 0; padding: 0; border: 0; vertical-align: middle; }

table.productListing th { text-align: center; }
table.productListing td.image { text-align: center; }
table.productListing td.price { text-align: right; }

/* If you want to put a small amount of padding between columns... */
table.productListing td.left { padding-right: 0.5ex; }
table.productListing td.middle { padding-left: 0.5ex; padding-right: 0.5ex; }
table.productListing td.right { padding-left: 0.5ex; }

This would open up an ENORMOUS amount of customization via CSS.

quentinjs:

Very cool. And I propose we do away with the table/TD and use DIVs....

I was looking at https://www.tigerdirect.ca and liked the product layout... but that means physically changing the files... where if ZC used CSS and templates, we could use positioning to allow moving of thhe content around in each product area......

What are the thoughts on this?

Tables are appropriate here, because the product list is actually, honestly, a table. It's data presented in rows and columns, with columns for name, picture, manufacturer (if presented), and price. Since it really is a table, the table element should be used with CSS to determine its presentation.

I am a big fan of replacing table elements with DIVs for everywhere they're used that aren't tables -- like, say, sideboxes and page regions. Those areas should definitely be reworked using DIVs and CSS.

Just the two cents of a newcomer here. :)