테이블 태그

demun
티스토리스킨수정/스킨수정팁
2009. 6. 18. 10:41

이것도 태그를 배우려고 이곳 저곳을 돌아다니다 저장해 놓고 저만 보다가 유용한거 같아 공개합니다.

출처를 아시면 알려주세요. 출처표시하겠습니다. 지금은 출처를 모르겠네요.

<TABLE>
<TR><TD>...</TD>
</TR>
<TR><TD>...</TD>
</TR>
</TABLE>

이 3가지만 알면 기본적인 테이블 생성이 가능하다. 각 태그의 쓰임새는 다음과 같다.

<TABLE></TABLE>   테이블의 시작과 끝을 알린다.
<TR>...</TR>       TABLE 가로 단위의 처음과 끝을 나타내는 태그. 세로로 나누는 결과를 온다.
<TD>   </TD>        <TR> 안에서 CELL 단위, 즉, 칸을 나누는 태그이다.

(예) 가로가 2 세로가 2인 모두 4개의 CELL을 갖는 테이블을 생성해 보자.

각 테이블 태그의 속성
테이블에는 여러 속성을 부여할 수 있다. 위의 3개의 태그마다 사용 가능한 속성이 다르다. 밑에서 각 태그마다 사용 가능한 속성과 예제를 살펴보기로 하자.

1. <TABLE>에서의 속성

(1) ALIGN="LEFT, CENTER, RIGHT " : 테이블전체의 위치 지정. 기본값은 LEFT다.
(2) BGCOLOR="색상값/색상명" : 테이블내의 배경색을 지정합니다.
(3) BACKGROUND="파일명/URL" : 표에 배경 이미지를 넣을 경우에 사용한다.파일명 또는 경로.
(4) WIDTH="%/픽셀 값" : 테이블의 넓이(가로)를 지정. 전체페이지 크기에 대한 비율(%)과 픽셀
단위의크기로 나타낼 수 있습니다.
(5) HEIGHT="%/픽셀 값" : 테이블의 높이(세로)를 지정합니다. 표현방법은 WIDTH와 동일.
(6) BORDER="숫자" : 테이블 주위의 여백을 지정한다. 즉, 테이블 테두리 두께를 지정한다.
(7) CELLSPACING="숫자" : CELL(나누어진 칸) 사이의 간격을 조정한다.
(8) CELLPADDING="숫자" : CELL 안에서 내용과 CELL 경계사이의 간격을 조정한다.

(예)
<TABLE ALIGN=CENTER WIDTH=50% HEIGHT=1% BORDER=5 CELLSPACING=5 CELLPADDING=5>
<TR>
<TD>1234567890 Test - 1행</TD>
</TR>
<TR>
<TD>1234567890 Test - 2행</TD>
</TR>
</TABLE>

(화면에 출력된 경우)

123456789 Test - 1행

123456789 Test - 2행

2. <TR>에서의 속성

(1) ALIGN="LEFT/CENTER/RIGHT" : 표의 행을 수평으로 어떻게 정렬할 것인가를 설정.
LEFT(좌측), CENTER(중앙), RIGHT(우측)
(2) VALIGN="TOP/MIDDLE/BOTTOM" : 수직으로 어떻게 정렬할 것인가를 설정.
TOP(위로), MIDDLE(중간), BOTTOM(밑)
(3) BGCOLOR="색상값/색상명" : 배경색을 설정한다.

3. <TD>에서의 속성

(1) WIDTH="%/픽셀값" : 테이블 내에서의 CELL의 넓이를 지정.
(2) HEIGHT="%/픽셀값" : 테이블 내에서의 CELL의 높이를 지정.
(3) BGCOLOR="색상값/색상명" : CELL내의 배경색을 지정.
(4) BACKGROUND="파일명/URL" : CELL내의 배경이미지를 지정. 파일명 또는 URL경로
(5) ALIGN="LEFT/CENTER/RIGHT" : CELL내의 내용들의 수평적인 위치를 지정.
(6) VALIGN="TOP/MIDDLE/BOTTOM" : CELL내의 내용들의 수직적인 위치를 지정.

※ 실제 티스토리 스킨에 적용된 예제

개 개

demun(대문블로그)

테이블 태그

티스토리툴바