[Html] 테이블안에 테이블 충첩하기

코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다.

 

테이블안에 테이블 넣기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <body>
 
  <table border="1" width="200px"><!--전체 윤곽 테이블 시작-->
   <tr valign="top"><!--첫째줄 tr 시작-->
    <td colspan="2"><!--첫째줄 td 시작 colspan 을 빼 먹지 마세요!!-->
     <table border="1" width="200" height="50" bgcolor="blue"> 
      <tr>
      	<td>
      	</td>
       <td>
       </td>
      </tr>
     </table>
    
    <tr><!--둘째줄 tr시작-->
     <td><!--둘째줄 왼쪽 시작 테이블-->
      <table border="1" width="200" height="100" bgcolor="red"> 
       <tr>
        <td>
        </td>
       </tr>
      </table>
     </td><!--둘째줄 왼쪽 끝 테이블-->
    
     <td><!--둘째줄 오른쪽 시작 테이블-->
      <table border="1" width="200" height="100" bgcolor="yellow"> 
       <tr>
        <td>
        </td>
       </tr>
      </table>
     </td><!--둘째줄 오른쪽 끝 테이블-->
    </tr><!--둘째줄 tr끝-->
    
    </td><!--첫째줄 td 끝-->
   </tr><!--첫째줄 tr 끝-->
  </table><!--전체 윤곽 테이블 끝-->
 
 </body>
</html>

테이블중첩

 

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] Pre태그 사용법 & 예제

[Html] Margin, Padding 속성의 차이점과 사용법

[Html] Div 태그 사용법 & 예제

[Html] Span태그 사용법 & 예제

 

댓글

Designed by JB FACTORY