table 태그 중첩 코딩 하기

보통 사용 하는 홈 페이지 모습을 테이블(table)태그속에 테이블 태그를 중첩 사용 해서 테이블을 만드는 html 코딩과 css 스타일 선언 입니다.

html 코딩 입니다.

<table class="loot">

  <tr>

    <td  colspan="3" class="looa">home</td>

  </tr>

  <tr>

    <td colspan="3" class="loob">navi</td>

    </tr>

        <tr>

    <td colspan="2" class="looc">본문광고</td>

          <td class="lood">블로그 설명</td>

          </tr>

  <table>

  <tr>

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

    </td>

    <td class="loof">사이드바1

      </td>

    </tr>

    <tr>

    <td class="loog">광고1

      </td>

      </tr>

  <tr>

 <td class="loof">사이드바2

   </td>

    </tr> 

<tr>

  <td class="loog">광고2

    </td>

  </tr>

    <tr>

      <td class="loof">사이드바3

      </td>

    </tr>

  <tr>

    <td colspan="2" class="looj">foot

      </td>

    <td class="look">하단 광고

      </td>

    </tr>

  </table>

      </table>

 

아래는 스타일 시트 입니다.

<style>

  .loot{table-layout:fixed;width:auto;height:auto;text-align:center;

    }

  .looa{width:370px;height:80px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:orange;border:1px solid gray;

    }/*home*/

   .loob{width:370px;height:50px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:lime;border:1px solid gray;

    }/*navi*/

   .looc{width:290px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;color:white;

    }/*본문광고*/

   .lood{width:80px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:rgb(230,200,230);border:1px solid gray;

    }/*블로그 설명*/

   .looe{width:290px;height:500px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:gray;border:1px solid gray;

    }/*본문*/

   .loof{width:80px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

    }/*사이드바1,2,3*/

  .loog{width:80px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

    } /*광고1,2*/

    

 .looj{width:290px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

    }/*foot*/

  .look{width:80px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

    } /*하단광고*/ 
</style>

아래는 결과 입니다.

home
navi
본문광고		블로그 설명

본문		사이드바1
		광고1
		사이드바2
		광고2
		사이드바3
foot		하단 광고