본문 바로가기
프로그래밍/HTML, CSS, JavaScript

HTML 테이블 만들기 기본 태그

by [바가지] 2017. 12. 21.
반응형

HTML 테이블 기본 태그

 

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
태그는 즐거워
반응형