Семантическая разметка для списка товаров - PullRequest
Новая
       15

Семантическая разметка для списка товаров

0 голосов
/ 29 марта 2011

У меня есть этот сайт со списком товаров с миниатюрами, артикулами и так далее. На первый взгляд это выглядит как ваш основной стол. Но затем выскакивают артикул и статус. Просто кажется грязным создание этой разметки с помощью col- и rowspans.

Так что я думал о создании ul с dl в каждом li и dt как display: none. Это кажется более семантическим, но тогда как мне отформатировать голову? 

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

Ответы [ 2 ]

2 голосов
/ 29 марта 2011

Определенно таблица. Я не могу думать о том, чтобы иметь dl / dt / dd, где отображается dt: ни один из них не может привести к чему-то семантическому.

Я бы попробовал что-то вроде этого: (стиль не важен) 

<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>
2 голосов
/ 29 марта 2011

Для меня выглядит как стол, так почему бы не использовать стол? Вы, вероятно, могли бы создать какое-то чудовище dl / ul / ... для плохой симуляции таблицы, но вам пришлось бы вручную все масштабировать и потерять здравый смысл, чтобы плавающие и размеры правильно работали в более чем одном браузере.

HTML имеет полный набор элементов таблицы. У вас есть табличные данные. Размещение табличных данных в таблице звучит для меня как семантическая метка.

...