Semantic markup for product list

Question

I have this website that has a list of products with a thumbnail, articlename and so on. At first glance it looks like your basic table. But then the articlename and status pop up. It just feels dirty creating this markup with col– and rowspans.

So I was thinking of creating a ul with a dl in every li and the dt as display:none. It feels more semantic, but then how do I format the head?

#######################################################
#    FOTO        PRICE    YEAR           FUELTYPE     #
#######################################################
#    ####                                             #
#    ####        Articlename | status                 #
#    ####        $2000    2007           LPG          #
#######################################################
#    ####                                             #
#    ####        Articlename | status                 #
#    ####        $2000    2007           LPG          #
#######################################################
#    ####                                             #
#    ####        Articlename | status                 #
#    ####        $2000    2007           LPG          #
#######################################################

For tabular data like that, it seems more semantic to use a table. Your list for each item seems unsemantic, as it will not a list of "something", it will be a list of a photo, a title, a price, a status, etc. Those items do not semantically belong together in the same list. Stick with a table. (IMO). — elwyn, Mar 28 '11 at 20:39

score 2 · Answer 1 · answered Mar 28 '11 at 20:49

Looks like a table to me so why not use a table? You could probably create some dl/ul/... monstrosity to poorly simulate a table but you'd have to manually size everything and lose your sanity getting the floating and sizes to work properly in more than one browser.

HTML has a full suite of table elements. You have tabular data. Putting tabular data into a table sounds like semantic mark up to me.

score 2 · Accepted Answer · answered Mar 28 '11 at 21:06

Definitely a table. I can't think of any way having a dl/dt/dd where the dt is display:none can possibly result in something semantic.

I'd try something along these lines: (The styling's not important)

<style>
  table { border:4px inset black; }
  td, th  {border:1px solid silver; padding:3px 20px }
  img { height: 100px; width: 100px; }
</style>
<table>
   <tr>
      <th rowspan="2">FOTO</th>
      <th id="articleName" colspan=2>ARTICLENAME</th>
      <th id="status">STATUS</th>
      <th rowspan="2">FUELTYPE</th>
   </tr>
   <tr>
      <th id="price">PRICE</th>
      <th id="year" colspan=2>YEAR</th>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Ford</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Honda</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Toyota</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
</table>

Semantic markup for product list

2 Answers2