제품 목록에 대한 의미 마크 업

-1

썸네일, articlename 등이있는 제품 목록이있는이 웹 사이트가 있습니다. 언뜻 보면 기본 테이블처럼 보입니다. 그러나 articlename과 상태 팝업. col - 및 rowspans를 사용하여이 마크 업을 작성하는 것이 더러운 느낌입니다.제품 목록에 대한 의미 마크 업

그래서 모든 li에 dl을, dt에 display : none을 사용하여 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

분명히 표. 어떤 식 으로든 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

제품 목록에 대한 의미 마크 업

답변

관련 문제