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 테이블 만들기 기본 태그 (8) | 2017.12.21 |
HTML 이미지 삽입하기 - IMG 태그 (2) | 2017.12.16 |
HTML 링크(연결) 태그 (2) | 2017.12.11 |
HTML 이동 태그 (4) | 2017.12.10 |
테이블 기본태그네요
필요한 분들이 보면 좋겠네요 ㅎ
좋은 저녁 보내세요^^
답글
네 좋은시간 보내세요~^^
포스팅할때 쓰면 유용하겠네요 ㅎ
답글
네 ㅎㅎ 그래서 저도 이번 포스팅은 테이블을 사용 해 보았습니다. 에디터로만 사용하면 % 설정이 안되기때문에 태그를 알고 사용하면 더욱 좋지 않을까 생각합니다.
컴맹인 저에게도 참 이로운 강좌입니다.. 한번 사용해봐야겠어요. 컴퓨터 쪽 일을 하시나요?
티스토리 블로그를 하면서 조금씩 배우고 있지만 컴퓨터를 좀 더 알면 좋겠다는 생각이 드네요.
답글
네 컴퓨터 쪽으로 일을 하고 있습니다.
쉽고 알차게 포스팅 하는 것이 생각보다 시간도 많이 걸리고 어렵네요. ㅎㅎ
하지만 더 열심히 해야 겠다는 생각이 드네요~^^
아... 컴퓨터 일하는 분은 존경스럽습니다. 프로그래머신가요?
포스팅이 생각보다 시간이 많이 걸리더군요...
답글
네 ㅎㅎ 저는 다른 일들 하시는 분들이 더 존경 스럽습니다. 생각보다 시간이 많이 걸리더라도 재밌다고 생각하면 그 또한 즐거움이 되는 것 같네요~^^