HTML 테이블 기본 태그
■ 테이블을 만들기 위한 기본적인 태그의 종류와 기능들에 대하여 알아 보도록 하겠습니다.
태그 |
설명 |
<TABLE> |
테이블을 선언하는 태그 입니다. |
<TR> |
테이블의 한 행을 정의 합니다. |
<TD> |
테이블의 각 행의 셀을 만들 때 사용합니다. |
<TH> |
테이블 헤더 행에 있는 셀의 제목을 지정 할 때 사용합니다. 제목을 강조되게 표시 합니다. |
■ 테이블의 조금 더 자세한 제어를 위한 <TABLE>, <TD> 의 속성들에 대하여 알아 봅시다.
태그 |
설명 |
ALIGN |
셀의 내용에 대한 좌우 정렬을 설정합니다.(LEFT, CENTER, RIGHT) |
VALIGN |
셀의 내용에 대한 상하 정렬을 설정합니다.(TOP, MIDDLE, BOTTOM) |
ROWSAN |
셀의 행을 합치기 위한 태그 입니다. |
COLSPAN |
셀의 열을 합치기 위한 태그 입니다. |
WIDTH |
셀의 넓이를 설정합니다. |
HEIGHT |
셀의 높이를 설정합니다. |
■ 예제
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH ALIGN="LEFT" WIDTH="80">제목1</TH>
<TH ALIGN="CENTER" WIDTH="30%">제목2</TH>
<TH ALIGN="RIGHT">제목3</TH>
</TR>
<TR>
<TD HEIGHT="200" VALIGN="TOP">태그는</TD>
<TD ALIGN="CENTER" COLSPAN="2">즐거워</TD>
</TR>
</TABLE>
※ BORDER 태그트 선의 두께를 설정합니다. 테이블 선에 대한 태그들은 다음 포스팅에서 하도록 하겠습니다.
■ 예제결과
제목1 | 제목2 | 제목3 |
---|---|---|
태그는 | 즐거워 |
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
HTML 프레임(FRAME) 만들기 (5) | 2017.12.28 |
---|---|
HTML 테이블 선 및 여백, 배경색 설정 (8) | 2017.12.27 |
HTML 이미지 삽입하기 - IMG 태그 (2) | 2017.12.16 |
HTML 링크(연결) 태그 (2) | 2017.12.11 |
HTML 이동 태그 (4) | 2017.12.10 |