-1

我有这个网站，其中包含带有缩略图、文章名称等的产品列表。乍一看，它看起来像您的基本表。但随后会弹出文章名称和状态。用 col– 和 rowspans 创建这个标记感觉很脏。

所以我正在考虑创建一个 ul，每个 li 中都有一个 dl，dt 为 display:none。感觉更语义化，但是我该如何格式化头部呢？

################################################# #####
#照片价格年份燃料类型#
################################################# #####
######
# #### 文章名称 | 地位 ＃
# #### 2000 美元 2007 液化石油气 #
################################################# #####
######
# #### 文章名称 | 地位 ＃
# #### 2000 美元 2007 液化石油气 #
################################################# #####
######
# #### 文章名称 | 地位 ＃
# #### 2000 美元 2007 液化石油气 #
################################################# #####
4

2 回答 2

2

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

HTML 有一套完整的表格元素。你有表格数据。在我看来，将表格数据放入表格听起来像是语义标记。

于 2011-03-28T20:49:48.267 回答
2

绝对是一张桌子。我想不出任何方式有一个 dl/dt/dd 其中 dt 是 display: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>
于 2011-03-28T21:06:10.967 回答