모범 사례 담당자에게이를 어떻게 표시합니까?

Question

나는 프런트 엔드에이 테이블을 가지고 있으며 DIV를 코딩하는 더 좋은 방법이라고 읽었습니다. 어떻게 DIV에서 동일한 구조를 나타낼 것입니까?

<table> 
     <tr> 
      <td colspan="6" class="title"><strong>Choose Dates</strong></td> 
      <td colspan="2" class="title"><strong>Search by Name</strong></td> 
      <td class="title"><strong>Status</strong></td> 
     </tr> 
     <tr> 

      <td><input type="text" id="dateFrom" /></td> 
      <td><strong>To</strong></td> 
      <td></td> 
      <td><input type="text" id="dateTo" /></td> 

      <td><input type="checkbox"id="pendResCheckID" />Pending</td> 
      <td><input type="checkbox"id="ConfResCheckID" />Confirmed</td> 
      <td><input type="checkbox"id="CancResCheckID" />Canceled</td> 

     </tr> 
</table> 

Answer 1

당신은 neccessarily 단지 기존의 폼 요소를보다 효율적으로 사용하는 데, 어떤 <div>들 필요가 없습니다;

<form> 
    <fieldset> 
     <legend>Choose Dates</legend> 
     <input> To <input> 
    </fieldset> 
    <fieldset> 
     <legend>Status</legend> 
     <label><input type="checkbox"> Pending</label> 
     <label><input type="checkbox"> Confirmed</label> 
     <label><input type="checkbox"> Canceled</label> 
    </fieldset> 
</form> 

이제 실제 작업은 CSS를 작성하여 원하는대로 표시되도록합니다. 나는 <fieldset>에서 경계선을 제거하고 서로 옆에 떠 다니는 것으로 시작할 것입니다.

fieldset { 
    float: left; 
    border: none; 
} 

체크 아웃 http://jsfiddle.net/ZqQRh/1/

(I는 필수 세부 사항의 일부를 떠나 문제는 구조에 대해 주로 같은 속성을 한)