Question

我的网站上有一个包含缩略图，文章名称等的产品列表。乍一看它看起来像你的基本表。但随后会弹出文章名称和状态。只是感觉很脏，用col-和rowpans创建这个标记。

所以我想在每个li和dt中创建一个带有dl的ul作为display：none。感觉更加语义，但是我如何格式化头部？

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

Answer 1

对我来说看起来像一张桌子，为什么不使用桌子呢？您可能会创建一些dl / ul / ... monstrosity来模拟表格，但是您必须手动调整所有内容的大小并失去理智，使浮动和大小在多个浏览器中正常工作。

HTML有一整套表格元素。你有表格数据。将表格数据放入表中听起来像是语义标记。

Answer 2

绝对是一张桌子。我无法想到dt显示的dl / dt / dd的任何方式：none都可能导致语义错误。

我会尝试这些方面:(造型不重要）

<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 个答案: