產品列表的語義標記

-1

我有這個網站有一個縮略圖，articlename等產品列表。乍一看，它看起來像你的基本表。但隨後彈出了文章名稱和狀態。用col-和rowspans創建這個標記感覺很髒。產品列表的語義標記

所以我想在每一個鋰和DT作爲顯示創建一個與DI的UL：無。它感覺更加語義化，但是我該如何格式化頭部？

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

來源

2011-03-28 Fre

對於這樣的表格數據，似乎更多的語義使用表。每個項目的列表看起來都是非語義的，因爲它不會包含「某些東西」的列表，它將成爲照片列表，標題，價格，狀態等。這些項目在語義上不屬於同一列表。堅持一張桌子。（IMO）。 – elwyn 2011-03-28 20:39:24

絕對是一張桌子。我想不出任何有dt/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>

來源

2011-03-28 21:06:10 Alohci

看起來像一張桌子給我，所以爲什麼不使用表？你可能會創建一些dl/ul/...怪物來糟糕地模擬一個表格，但是你必須手動調整所有的大小並且失去理智，讓浮動和大小在多個瀏覽器中正常工作。

HTML有一整套表格元素。你有表格數據。將表格數據放到表格中聽起來像是語義標記。

來源

2011-03-28 20:49:48

產品列表的語義標記

回答

相關問題