테이블간에이 공간을 어떻게 잡을 수 있습니까?

Question

& CSS를 배우고 있는데 코드로 변환 할 PSD 파일을 다운로드했지만 약간의 문제가 있습니다.
내 테이블이 있지만 알아야 할 곳은 어떻게 하나의 공간을 사용할 수 있습니까? 내가 HTML과 CSS 코드가이 링크에서

: http://jsbin.com/rupih/1/edit

Answer 1

는 CSS를 사용하여 테이블에서 그 공간의 폭을 변경하려면 당신은 더 많은 정보

table { 
    border-spacing: 10px; 
    border-collapse: separate; 
} 

을 사용 참조 : Set cellpadding and cellspacing in CSS?

그러나 실제로 표 형식의 데이터와 더 많은 목록을 얻지 못했기 때문에 목록 :

HTML

<ul class="products"> 
    <li> 
     <h2>Abercrombie &amp; Fitch</h2> 
     <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" /> 
     <div> 
      <span class="price"><b>Price:</b> US $65</span> 
      <span class="COD"><b>COD:</b> AE001 </span> 
     </div> 
    </li> 
    <li> 
     <h2>Hollister</h2> 
     <img src="http://dotacionesindustriales.net/images/4002%20Camisa%20Manga%20Corta%20Hombre-Oxford.jpg" /> 
     <div> 
      <span class="price"><b>Price:</b> US $65</span> 
      <span class="COD"><b>COD:</b> AE001 </span> 
     </div> 
    </li> 
    <!-- etc --> 
</ul> 

CSS

ul.products 
{ 
    list-style:none; 
    margin:0; 
    padding:0; 
} 


.products li 
{ 
    float:left; 
    margin-right:1em; 
    margin-bottom:1.2em; 
} 

.products li img 
{ 
    padding:6px; 
    background-color: #e9f1f8; 
    border: 1px solid #d3e6f6; 
} 

.products li h2 
{ 
    color: #325A8C; 
    font-size:16px; 
    text-align:center; 
    font-family:serif; 
} 

.products li div 
{ 
    font-weight:bold; 
} 
.products li div .price 
{ 
    color: #349031; 
} 

.products li div .COD 
{ 
    color: #44403F; 
    float:right; 
    padding-right: 1.5em; 
} 

.products li div .price b, .products li div .COD b 
{ 
    color:#000; 
} 

원래의 질문에 관해서 가장 중요한 부분은 다음과 같습니다 외에도 더 의미되는

.products li 
{ 
    float:left; 
    margin-right:1em; /*Adjust this value to change the horizontal Spacing*/ 
    margin-bottom:1.2em; 
} 

HTML 유체 레이아웃의 추가 이점을 얻을 수 있습니다. 세 제품이 페이지 전체에 맞지 않으면 레이아웃을 적절하게 조정합니다. 마찬가지로 적합하면 더 많은 것을 수용 할 것입니다.

여기에 직접보기 : http://jsfiddle.net/b9evg/