div가있는 레이아웃

Question

테이블 레이아웃을 div 레이아웃으로 변환 할 수있는 사람이 있습니까?

<table> 
     <thead> 
      <tr> 
       <td colspan="3" bordercolor="red" width="1400px" height="50px"> 
       </td> 
      </tr> 
     </thead> 
     <tbody> 
      <td bordercolor="red" width="400px" height="500px"> 
      </td> 
      <td bordercolor="red" width="800px" height="50px"> 
      </td> 
      <td bordercolor="red" width="400px" height="500px"> 
      </td> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td colspan="3" bordercolor="red" width="1400px" height="50px"> 
       </td> 
      </tr> 
     </tfoot> 
    </table> 

덕분에 많은 :

표는 다음 구조를 가지고있다!

Answer 1

here is the design 
<div style="width:100%;"> 
    <div style="height:50px; background-color:#CCCCCC;"> </div> 
    <div style="height:500px;"> 
    <div style="width:30%;background-color:#0099CC;height:500px; float:left"></div> 
    <div style="width:40%;background-color:#0066CC;height:500px; float:left"></div> 
    <div style="width:30%;background-color:#009999;height:500px; float:left"></div> 
    </div> 
<div style="height:50px; background-color:#CCCCCC;"> </div> 
</div> 

Answer 2

이 그것을 시도 :이 http://www.w3schools.com/html/html_layout.asp

당신은 또한 배울 수있는 놀이터가 있습니다.