[Html] 테이블안에 테이블 충첩하기
- Web/HTML, CSS
- 2018. 6. 23.
코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다.
테이블안에 테이블 넣기
<%@ 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) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] Margin, Padding 속성의 차이점과 사용법 (2) | 2018.06.25 |
|---|---|
| [Html] pre 태그 사용법 & 예제 (0) | 2018.06.24 |
| [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) (7) | 2018.06.22 |
| [Html] 문단을 나누는 P태그 사용법 (0) | 2018.06.21 |