Balisage sémantique pour la liste de produits

Question

J'ai ce site qui a une liste de produits avec une vignette, articlename et ainsi de suite. À première vue, il ressemble à votre table de base. Mais alors l'articlename et le statut apparaissent. Il se sent juste sale en créant ce balisage avec col- et rowspans. Donc, je pensais à créer un ul avec un dl dans chaque li et le dt comme affichage: aucun. Cela semble plus sémantique, mais comment formater la tête?

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

Answer 1

Certainement une table. Je ne peux pas penser à un dl/dt/dd où le dt est affiché: aucun ne peut donner quelque chose de sémantique.

Je vais essayer quelque chose le long de ces lignes: (Le style n'a pas d'importance)

<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> 

Answer 2

ressemble à une table pour moi alors pourquoi ne pas utiliser une table? Vous pourriez probablement créer une monstruosité dl/ul/... pour simuler une table, mais vous devrez tout dimensionner manuellement et perdre votre santé mentale pour que le flottement et les tailles fonctionnent correctement dans plus d'un navigateur.

HTML a une suite complète d'éléments de table. Vous avez des données tabulaires. Mettre des données tabulaires dans une table ressemble à la marque sémantique jusqu'à moi.