위 네가지중 꼭 필요한 세 가지가 가장 기본이다. 다만, TR과 TD는 순서가 바뀌면 안 되는 게 특징이다. 사람이라고 치면 뼈대라 보면 된다. <TBODY>는 꼭 필요친 않지만 최신 버젼에는 자동으로 삽입된다. 테이블 몸통이 시작된다는 뜻.
그러면 사각형의 테이블(액자)에 여러가지 태그(살)를 붙혀보자. 이 테이블(액자)안에는 몇 가지가 기본으로 들어간다.
- 여기까지가 기본 - ※ bgColor 와 background 를 같이 넣는 건 이미지 주소가 없어졌을 때 색상으로 표현되기 때문.
- 테이블 테두리를 두가지로 표현할 때 - borderColorDark=영문칼라명, 또는 칼라색상표의 #RGB코드번호(테두리를 두 가지 색으로 표현할 때 사용, 상단과 오른쪽의 색상) bodrerColorLight=영문칼라명, 또는 칼라색상표의 #RGB코드번호(테두리를 두 가지 색으로 표현할 때 사용, 테두리 하단과 왼쪽의 색상)
- 그 외 TABLE 스타일 시트 적용할 때(css) - style="solid, double, dotted, dashed, groove, ridge, inset, outset" 이 중에서 하나를 사용/ 테이블을 어떻게 표현할 지 결정한다. style="테이블 테두리를 네 가지로 표현할 때, 아래 네 가지사용" BORDER-RIGHT: #ff9900 23px ridge; / 테이블 테두리 오른쪽의 색상과 두께, 각이 진 직선으로 표현 BORDER-TOP: #ff9900 23px ridge; / 테이블 테두리 상단의 색상과 두께, 각이 진 직선으로 표현 BORDER-LEFT: #ff9900 23px ridge; / 테이블 테두리 왼쪽의 색상과 두께, 각이 진 직선으로 표현 BORDER-BOTTOM: #ff9900 23px ridge; / 테이블 테두리 하단의 색상과 두께, 각이 진 직선으로 표현 FILTER: 를 사용할 때도 여러가지가 있음.
- 기타 - align=좌우정렬(left, center, right) title=테이블의 제목을 정의, 테이블에 마우스커서를 올리면 삽입된 글 내용이 나옴. id=자바스크립트를 이용 고유한 아이디로 불러내 사용하려 할 때. class=스타일 시트에서.. 여러개의 html을 만든 후 필요한 곳에서 하나를 끌어다 표현하고자 할 때. name=사용자가 임의로 지정, 프레임을 나눌 때 지정된 값을 호출할 때. 크기조정(px, pt, in, cm를 사용. 숫자만 적어줘도 됨) style="WIDTH: 500px; HEIGHT: 250px" 또는 width=500 height=250 이런식으로..
- 가운데 정렬의 개념 이해하기 - <TD align=middle> / TD 안 가운데서 수평정렬. <TD vAlign=center> / TD 안 가운데서 수직정렬. <P align=center> / TD의 전체지정을 무시하고 독립적으로, 그 안에서 가운데 정렬. <DIV align=center> / TD의 전체지정을 무시하고 독립적으로, 그 안에서 가운데 정렬. <TD style="PADDING-LEFT: 5px" align=left> / 테이블 모든 내용이 왼쪽에서 5px 만큼 떨어져서 배치됨 <P style="MARGIN-LEFT: 5px" align=right> / TD 지정을 무시하고 오른쪽에서 출발 5px 만큼 떨어져 위치함. <DIV style="MARGIN-LEFT: 5px" align=left> / TD 지정을 무시하고 왼쪽에서 출발 5px 만큼 떨어져 위치함.
objectlaunch("");
- 테이블 예제 -
cellSpacing=0 cellPadding=0 bgColor=red width= (가로크기를 지정하지 않거나 width 을 삭제했을 경우) height= (세로크기를 지정하지 않거나 height 를 삭제했을 경우) border=0 (테이블 테두리가 0일 때)
cellSpacing=0 cellPadding=0 bgColor=blue width=410 height= (세로크기 지정 안 할 때, 이 경우 TD안의 내용만큼 자동으로 길어짐) border=0 (테이블 테두리가 0일 때)
borderColor=blue cellSpacing=30 cellPadding=0 bgColor=black (빽그라운드 이미지를 사용하지 않았을 경우) width=480 height=310 border=9
borderColor=blue cellSpacing=30 cellPadding=8 bgColor=black (빽그라운드 이미지를 사용하지 않았을 경우) width=480 height=310 border=9
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD> (지정하지 않으면 왼쪽 정렬, cellPadding=6 만큼)
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD align=middle> (가운데 정렬)
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD align=right> (오른쪽 정렬)
borderColor=purple cellSpacing=2 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=top> (상단 정렬)
borderColor=purple cellSpacing=2, cellPadding=6, bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=center> (수직 중간정렬)
borderColor=purple cellSpacing=2 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=bottom> (하단 정렬)
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=orange background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=top align=right> (상단 오른쪽정렬)
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=black background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=middle align=right> (중간 오른쪽정렬)
borderColor=purple cellSpacing=1 cellPadding=6 bgColor=black background= (같은 크기의 이미지를 깔 때) width=480 height=310 border=9 <TD vAlign=bottom align=right> (하단 오른쪽정렬)
borderColor=pink cellSpacing=2, cellPadding=6, bgColor=black height=390 (원래 이미지 크기보다 세로크기를 더 크게 지정했을 경우) width=480 border=9일 때
borderColor=pink cellSpacing=2 cellPadding=6 bgColor=black width=520 (원래 이미지 크기보다 가로크기를 크게 지정했을 경우) height=310 border=9일 때
borderColor=orange, cellSpacing=2 cellPadding=6 bgColor=orange width=400 (가로크기를 원래 이미지 크기보다 줄일 경우) height=250 (세로크기를 원래 이미지 크기보다 줄일 경우) border=9일 때