HTML 테이블을 Div로 바꾸기

HTML 테이블을 Div로 바꾸기

---

좋아, html 테이블을 사용해서는 안되며 div가 사용되어야한다는 생각을하려고합니다. 그러나 종종 다음과 유사한 코드가 있습니다.

<table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>

레이블을 정렬하고 컨트롤을 정렬하고 싶습니다. 테이블을 사용하지 않고 어떻게해야합니까?

---

이것은 트릭을해야합니다.

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

나는 당신이 개념을 얻길 바랍니다.

---

표는 페이지 레이아웃의 주요 수단으로 사용하지 않는 것이 좋지만 여전히 그 자리를 차지하고 있습니다. 테이블은 적절한시기와 장소에서 사용할 수 있고 사용해야 하며, 더 많이 사용되는 일부 브라우저 (ahem, IE, ahem)가 더 많은 표준을 준수 할 때까지 테이블이 솔루션에 대한 최상의 경로 가 될 때가 있습니다.

---

나는 쉬운 해결책을 찾아 보았고 나를 위해 일한 이 코드 를 발견 했습니다. rightDIV 내가 가독성을 위해에서 왼쪽 세 번째 열입니다.

다음은 HTML입니다.

<div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>

그리고 CSS :

.container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }

---

유동적 레이아웃을 잃지 않고 간단한 플로트 기반 양식을 만들 수 있습니다 . 예를 들면 :

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

그러나 여러 고정 및 유연한 너비 열로 구성된 그리드가있는 복잡한 양식 레이아웃이있는 경우에는 이러한 문제가 발생하는 경향이 있습니다. 이 시점에서 모든 것을 고정 된 픽셀 위치에 놓기 위해 div를 고수하고 유동적 레이아웃을 포기할지 아니면 테이블에서 그렇게할지 결정해야합니다.

개인적으로 유동적 레이아웃은 양식을 레이아웃하는 데 사용되는 정확한 요소보다 더 중요한 사용성 기능이므로 일반적으로 테이블을 사용합니다.

---

기본적으로 고정 너비 페이지를 사용하고 해당 레이블 및 컨트롤의 너비를 설정하는 것으로 요약됩니다. 이것은 테이블없는 레이아웃이 구현되는 가장 일반적인 방법입니다.

너비를 설정하는 방법에는 여러 가지가 있습니다. Blueprint.css 는 열 / 너비를 설정하는 데 도움이되는 매우 인기있는 CSS 프레임 워크입니다.

---

이를위한 매우 유용한 온라인 도구가 있습니다. 자동으로 테이블을 div로 변환합니다.

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

그리고 그것을 설명하는 비디오 : https://www.youtube.com/watch?v=R1ArAee6wEQ

나는 이것을 매일 사용하고있다. 나는 그것이 도움이되기를 바랍니다;)

참조 URL : https://stackoverflow.com/questions/702181/replace-html-table-with-divs