HTML 기초, <caption><th>태그와 테이블 속성 지정하기 align, border (16번째)

HTML 기초, <caption><th> 태그와 테이블 속성지정하기 align, border

 

◎ 테이블 제목과 셀 제목을 지정하는 <caption>, <th> 태그

 

<caption> 태그를 사용해 테이블의 제목을 표시할 수 있습니다. 테이블의 제목은 align 속성을 사용해서 테이블의 위 (top) 

또는 아래 (bottom)에 작성할 수 있습니다.

 

예문)

 

<caption align="top"> </caption>

<caption align="bottom"> </caption>

 

<th> 태그는 "table header"의 약자로 테이블의 셀 제목을 지정해 줍니다. <th> 태그로 나타낸 셀의 제목은 <td> 태그로 나타낸 내용에 비해서 글자가 강조되어 나타납니다. 그래서 다른 셀과 구별되어 표시됩니다.

 

 

 

 

◎ 테이블에 속성 지정하기

 

<table> 태그에 속성을 지정하면 다양한 형태의 테이블을 만들 수 있습니다.

 

태그	속성	속성값	설명
table	align	문자열	테이블 정렬 방식 지정
	border	숫자	테이블 외부 테두리의 두께를 지정하는 속성, 생략하면 0이 설정됩니다.
	width	숫자 or 퍼센트	테이블의 너비
	height	숫자 or 퍼센트	테이블의 높이
	cellpadding	숫자	셀 테두리와 셀 내용 사이의 간격
	cellspacing	숫자	셀과 셀 사이의 경계선 굵기
	background	URL 문자열	테이블 배경이미지 넣기
	bgcolor	색상명 or 색상코드	테이블 전체 색상
	bordercolor	색상명 or 색상코드	테이블 테두리의 색상을 지정하며, 생략하면 회색으로 설정됩니다.

 

◎ 테이블을 정렬하는 align 속성

 

HTML 문서에서 테이블을 정렬하기 위해서는 다른 태그에서 사용되던 정렬방식과 마찬가지로 'align' 속성으로 지정하면 됩니다. 왼쪽으로 정렬하기 위해서는 <table>태그 안에 align="left" , 오른쪽으로 지정할려면 align="right"

 

예문)

 

<table align="left"> </table>

<table align="right"> </table>

 

 

 

◎ 테이블의 테두리 두께 지정하는 border 속성

 

<table> 태그에서 'border' 속성에 픽셀 수를 지정해 주면 지정한 픽셀크기만큼 테이블의 테두리선이 결정됩니다.

지정한 픽셀값이 클수록 테이블 테두리선의 두께는 두꺼워지지만 테이블 내부에는 영향이 없습니다.

 

예문)

 

<table border="픽셀 수"> </table>

 

tip.

테이블 가운대 정렬은 어떻게?

 

테이블을 가운데 정렬할 때는 'align' 속성으로 불가능합니다. 그래서 <table> 태그를 <center> 태그 또는

<p align="center"> </p> 태그로 둘러싸는 방법으로 테이블을 가운데로 정렬해야 됩니다.