테이블 안에 테이블 넣기

오랜만에 테이블 태그로 레이아웃을 꾸며 볼려고 해보니 꽤 어렵네요

한창 공부 할 때는 탄력을 받아 쉽게 작성 했었는데...

다시 공부 한다는 생각으로 테이블 레이아웃을 만들어 보도록 하겠습니다.

우선 그러기 위해서는 글쓰기 에디터를 html 전용으로 전환 해야 겠지요 

우측 상단부에 위치한 html 체크창을 클릭하면 되겠습니다.

좀 간단하게 꾸미기 위해 원격 stylesheet 방식으로 만드는게 좋겠네요

stylesheet는 html 문서 head 또는 body 어느 곳이든 배치 해도 상관 없습니다.

<style>

.atab {}

.btab {}

.ctab {}

.dtab {}

</style>

위 처럼 이런 식으로 stylesheet를 만들고 클래스 선택자를 먼저 선언 해 주었 습니다.

테이블 에는 클래스로 조절 하는게 더 효과적 이라고 생각 되어 클래스 선택자를 채택 하였습니다.

이번엔 생각 하고 있는 레이 아웃 갯수 만큼 테이블 태그를 조합 해 봅니다.

<table>

<tr>

<td>

<table><tr><td></td></tr></table>

</td>

</tr>

<tr>

<td>

<table><tr><td></td></tr></table>

</td>

</tr>

<tr>

<td>

<table><tr><td></td></tr></table>

</td>

<td>

<table><tr><td></td></tr></table>

</td>

</tr>

</table>

다음엔 각 레이아웃을 꾸며 주는 스타일 선언을 해 주도록 해 보겠습니다.

<style>

.atab {table-layout:fixed; border:1px solid red; width:100%; height:auto;}

.btab { boder:1px solid blue; valign:center; color:green; size:16px; width:100%;height:50px; background: lime; padding-left:105px}

.ctab { boder:1px solid blue; valign:center; width:50%;height:250px; background:pink;}

.dtab {boder:1px solid blue; valign:center; width:50%;height:250px; background:orange;}

.etab {boder:1px solid blue; valign:center; color:white; size:16px; width:100%;height:50px; background:skyblue; padding-left:100px;}

</style>

이번에는 테이블 태그 에도 클래스 네임을 지정해 주고 가로 행의 콜럼을 합치는 colspan으로 레이아웃을 생성 해 봅니다.

<table class="atab">

<tr valign="top">

<td class="btab" colspan="3">

<table>

<tr>

<td class="btab">HOME</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="etab" colspan="3">

<table>

<tr>

<td class="etab">네비게이션</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="ctab">

<table>

<tr>

<td class="ctab" colspan="2">본문</td>

</tr>

</table>

</td>

<td class="dtab">

<table>

<tr>

<td>사이드바</td>

</tr>

</table>

</td>

</tr>

</table>

에디터로 전환해 실행 하면 아래 처럼 테이블 레이아웃이 완성 된것을 확인 할수 있습니다.

HOME
네비게이션
본문		사이드바

이번에는 세로 열의 콜럼을 합치는 rowspan으로 레이아웃을 꾸며 보도록 하겠습니다.

스타일 선언

<style>

.atab {table-layout:fixed; border:1px solid red; width:100%; height:auto;}/*아웃 테이블*/

.etab {boder:1px solid blue; valign:center; color:white; size:16pt; width:400px;height:50px; background:skyblue; padding-left:70px;}/*네비*/

.btab { boder:1px solid blue; valign:center; color:green; size:16pt; width:400px;height:80px; background:lime; padding-left:75px;}/*홈*/

.ctab {table-layout:fixed; boder:1px solid blue; valign:center; color:black; size:16pt; width:300px; height:400px; background:pink;padding-left:130px;}/*본문*/

.dtab {table-layout:fixed; boder:1px solid blue; valign:center; color:white; size:16pt; width:100px; height:100px; background:orange;padding-left:15px;}/*광고*/

.ftab {boder:1px solid blue; valign:center; color:red; size:16pt; width:100%;height:100px; background:skyblue; padding-left:15px;}/*중*/

.gtab {boder:1px solid blue; valign:center; color:white; size:16pt; width:100%;height:100px; background:skyblue; padding-left:70px;}/*하*/

.htab {boder:1px solid blue; valign:center; color:white; size:16pt; width:100%;height:100px; background:lime; padding-left:70px;}/*상*/

.ktab {boder:1px solid blue; valign:center; color:white; size:16pt; width:100%;height:100px; background:orange; padding-left:70px;}

.tab {boder:1px solid blue; valign:center; color:white; size:16pt; width:100%;height:100px; background:orange; padding-left:70px;}

</style>

태그 정의

<table class="atab">

   <tbody>

     <tr valign="top">

       <td class="btab" colspan="3">

           <table>

             <tbody>

                   <tr>

                     <td class="btab">HOME

                     </td>

                    </tr>

                  </tbody>

               </table>

         </td>

       </tr>

       <tr>

         <td class="etab" colspan="3">

             <table>

               <tbody>

                  <tr>

                      <td>네비게이션

                      </td>

                  </tr>                 

                 </tbody>

              </table>

          </td>

      </tr>

      <tr>

          <td class="ktab" colspan="2">광고1

          </td>

          <td class="gtab">

          </td>

      </tr>

      <tr>

           <td class="ctab" colspan="2" rowspan="5">본문

           </td>

      </tr>

       <tr>

            <td class="dtab">광고2

            </td>

      </tr>

      <tr>

             <td class="ftab">사이드바

            </td>

      </tr>

       <tr>  

             <td class="dtab">광고3

              </td>

        </tr>

         <tr>

                <td class="ftab">

                </td>

           </tr>

            <tr> 

                <td class="tab" colspan="2">

                </td>

                <td class="gtab">

                </td>

           </tr> 

    </tbody>

 </table>

실행 한 테이블 레이아웃

HOME
네비게이션
광고1		사이드바1
본문
		광고2
		사이드바2
		광고3
		프로필
foot		사이드바3

테이블태그 안에 테이블태그를 조합해 레이 아웃을 해보았습니다.

이렇게 태그 작업을 진행 할때 나란한 행에 위치 하는 다수의 콜럼을 만들고자 할때 상위나 하위의 콜럼의 전체 넓이에 영향을 받게 됩니다.

행이나 열 모두 마찬가지로  콜럼의 갯수 만큼 colspan또는 rowspan 해 주어야 한다 는 걸 꼭 기억 하도록 해야 겠습니다.