본문 바로가기

Java Programming/HTML5+CSS3

[HTML] 테이블 만들기

펌 : http://cbkim.wkhc.ac.kr/htmlbox/hmf10.html#top


<TABLE>...</TABLE>
테이블의 시작과 끝을 알리는 태그입니다. 이 태그에서 테이블 선의 두께, 선의 색깔, 테이블의 배경색이나 이미지 등을 변경할 수 있는 속성을 지정할 수 있습니다.

Align="left", "right", "center"

표의 정렬 상태를 지정합니다.

Background="이미지 파일명"

표의 배경을 이미지로 지정합니다.

Bgcolor="색상명"

표의 배경을 색으로 지정합니다.

Border="숫자(픽셀)"

표의 테두리선의 두께를 지정합니다. 0으로 설정하면 테두리선이 보이지 않습니다.

Bordercolor="색상명"

표 테두리선의 색을 지정합니다.

Cellpadding="숫자(픽셀)"

셀 경계와 셀 안의 내용 사이의 간격을 지정합니다.

Cellspacing="숫자(픽셀)"

셀과 셀 사이의 간격을 지정합니다.

Height, Width="숫자(픽셀)"

표 전체의 높이나 너비를 지정합니다.

Hspace, Vspace="숫자(픽셀)"

표 상하와 좌우의 여백을 지정합니다. 생략하면 0으로 표를 여러 개 그릴 경우 붙어서 나타납니다.

   

<TR>...</TR>
Table Row의 약어로 테이블의 가로선(행)을 만드는 태그이다. 즉 이 태그가 삽입될 때마다 행이 바뀝니다. 이 태그 안에는 세로선(열)을 만드는 태그인 <TD>태그를 삽입하여 열로 나눕니다.

align="left", "right", "center"

행의 내용 정렬 상태를 지정합니다.

valign="top", "bottom", "middle"

행의 내용 정렬 상태를 행의 높이를 기준으로 지정합니다.

bgcolor="색상명"

한 행의 배경색을 지정합니다.

height="숫자"

한 행의 높이를 지정합니다.

   

<TD>...</TD>
Table Data의 약어로 <TR>로 나뉘어진 행을 열로 나눌 수 있습니다. 이 태그 사이에는 테이블 안에 들어갈 내용을 입력할 수 있습니다.

align="left", "right", "center"

셀의 내용 정렬 상태를 지정합니다.

valign="top", "bottom", "middle"

셀의 내용 정렬 상태를 행의 높이를 기준으로 지정합니다.

background="이미지 파일명", bgcolor="색상명"

셀의 배경을 이미지나 색으로 지정합니다.

colspan="숫자"

두 개 이상의 열을 하나로 병합할 때 사용한다. 즉 좌우로 된 칸을 합친다.

rowspan="숫자"

두 개 이상의 행으로 된 셀을 병합할 때 사용합니다. 상하로된 칸을 합칩니다.

height, width="숫자"

셀의 높이와 너비를 지정합니다.

   

<TH>...</TH>
<TD>태그와 같이 세로선을 삽입할 수 있습니다. 이 태그는 특별히 강조하고 싶은 열이 있을 때 사용합니다. 일반적으로 테이블을 작성한 다음 제목에 해당하는 열을 입력할 때 사용합니다. 사용할 수 있는 속성은 <TD>태그의 속성과 동일합니다. 차이점은 <TH>를 이용하면 글꼴이 두꺼워지고 자동적으로 가운데 정렬된다는 것입니다.

   

<CAPTION>...</CAPTION>
<TABLE>태그에서만 사용해야 하며, 테이블에 대한 설명이나 제목 등을 넣을 때 사용합니다. Align 속성에서 top, bottom, left, right의 값을 이용해 캡션 내용의 정렬 상태를 지정합니다.

   

테이블 관련 태그의 다양한 옵션들

다음은 익스플로러에서만 지원하는 옵션들로 테두리의 외곽선이나 셀 사이의 경계선을 숨기거나 나타낼 때 사용합니다. Frame 속성을 이용하여 외곽선의 형태를 지정하는 것으로 border의 값이 1이상 지정되어야 합니다.

void

표의 외곽선이 나타나지 않습니다.

border

기본적인 외곽선이 나타납니다.

above

바깥쪽의 외곽선 중 위쪽만 나타납니다.

bellow

바깥쪽의 외곽선 중 아래쪽만 나타납니다.

hsides

바깥쪽의 외곽선 중 위쪽과 아래만 나타납니다.

lhs

깥쪽의 외곽선 중 왼쪽만 나타납니다.

rhs

바깥쪽의 외곽선 중 오른쪽만 나타납니다.

vsides

바깥쪽의 외곽선 중 좌우만 나타납니다.

   

rules 속성을 이용하면 셀 사이의 경계선 형태를 지정할 수 있습니다. Border의 값이 지정되어야 합니다.

cols

열들 사이의 경계선만 그립니다.

rows

행들 사이의 경계선만 그립니다.

none

테두리의 외곽선을 제외한 셀 경계선을 지웁니다.

all

외곽선과 셀 경계선을 모두 그립니다.


'Java Programming > HTML5+CSS3' 카테고리의 다른 글

[CSS3] media query  (0) 2014.04.10
Input readonly 속성  (0) 2014.04.07
[CSS]display:block 와 inline  (0) 2014.02.25