테이블 내부의 Div 사용

불멸의 적이라는 그들의 지위에도 불구하고, 당신이 필요하다면 디브와 테이블은 함께 일할 수 있다. 테이블에서 수직 중심을 사용할 수 있기 때문에 수평 및 수직 중심을 모두 갖춘 단세포 테이블을 사용하여 페이지 내용을 브라우저 창에 완전히 중앙에 배치하는 것이 다소 일반적인 기술입니다(대부분 고정 크기 콘텐츠에만 유용합니다.

테이블 안에 디브를 넣을 때 기억해야 할 한 가지 중요한 것은 디브가 특정한 테이블 셀 안에 있어야 한다는 것입니다. 즉, td나 tr 요소 안에 있는 요소 안에 있어야 한다는 뜻입니다.

무슨 말인지 보려면 다음과 같은 표를 보십시오.

<table border=1 width=200 cellpadding=10>
    <tr>
      <td>
        <p>I'm text in a cell.</p>
    </td>
    <td>
                <p>I'm text in a cell.</p>
    </td>
    <td>
                        <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
                              <td>
                                <p>I'm text in a cell.</p>
    </td>
    <td>
                                        <p>I'm text in a cell.</p>
    </td>
    <td>
                                                <p>I'm text in a cell.</p>
    </td>
  </tr>
</table>

이제 이 테이블에 다른 행을 추가하고 그 안에 디브를 넣으려면 다음과 같이 하십시오.

<table border=1 width=200 cellpadding=10>
    <tr>
      <td>
        <p>I'm text in a cell.</p>
    </td>
    <td>
                <p>I'm text in a cell.</p>
    </td>
    <td>
                        <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
                              <td>
                                <p>I'm text in a cell.</p>
    </td>
    <td>
                                        <p>I'm text in a cell.</p>
    </td>
    <td>
                                                <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
                                                      <div id="my_box">
                                                              <p>I'm text in a div.</p>
    </div>
  </tr>
</table>

하지만 그렇게 되면 배치가 깨져요! 이상하지만 사실이에요. 아래 참조:

div가 실제 테이블 셀, td 또는 th 요소 안에 있는지 확인해야 합니다. 이렇게 하십시오.

<tr>
    <td colspan=3>
          <div id="my_box">
                  <p>I'm text in a div.</p>
    </div>
  </td>
</tr>

그리고 테이블 안에 완전한 스타일의 디브가 있어야 합니다.

이것은 테이블 셀의 내부에 절대적인 위치를 지정하는 데도 도움이 될 수 있습니다. 이 기사를 보세요.