HTML 기초, 테이블의 <tr><td><th>태그의 속성. align, valign (19번째)

HTML 기초, 테이블의 <tr><td><th> 태그의 속성. align, valign

◎ 테이블의 <tr>, <td>, <th> 태그의 속성

<table> 태그는 표 전체에 대해서 적용되지만, <tr><td><th> 태그에 속성을 지정하면 특정 셀에만 특징을 적용할 수 있습니다.

# <tr> 태그의 속성

<tr> 태그는 'table row'로 각 행(줄) 단위로 통일된 방식으로 정렬하거나 색상을 지정할 수 있습니다. 

<tr> 태그는 테이블에서 새로운 줄이 시작됨을 나타냅니다. 

속성	속성 값	설명
align	left (디폴트), right, center	행 전체의 수평 정렬 방식
width	"n" or "%"	행의 가로 넓이 지정
height	"n" or "%"	행의 세로 높이 지정
bgcolor	색상 or 색상코드	행의 색상
background	"url / 파일명"	행의 배경 이미지

* 디폴트 = 기본값

# <td> 태그의 속성

<td> 태그는 'table date'로 표 안에 들어갈 내용을 기술하는 태그입니다. 각 셀(칸) 마다 서로 다른 정렬과 색상 크기를

지정해 다양한 테이블을 작성할 수 있습니다. 그리고 테이블의 크기를 %로 지정하면 웹 브라우저 창의 크기나 상위 테이블,

프레임의 크기에 따라 테이블의 크기가 결정됩니다.

속성	속성 값	설명
valign	top, middle (디폴트), bottom	셀의 수직 정렬 방식
align	left (디폴트), right, center	셀의 수평 정렬 방식
width	"n" or "%"	셀의 가로 넓이 지정
height	"n" or "%"	셀의 세로 높이 지정
bgcolor	색상 or 색상코드	셀의 색상
background	"url / 파일명"	셀의 배경 이미지
rowspan	숫자	행 합치기
colspan	숫자	열 합치기

# <th> 태그의 속성

<th> 태그는 'table head'로 테이블의 각 셀의 제목을 결정하는 태그입니다. <th> 태그에 포함되는 속성은 <td> 태그에서

사용되는 각 속성들과 동일합니다.

속성	속성 값	설명
valign	top, middle (디폴트), bottom	셀의 수직 정렬 방식
align	left (디폴트), right, center	셀의 수평 정렬 방식
width	"n" or "%"	셀의 가로 넓이 지정
height	"n" or "%"	셀의 세로 높이 지정
bgcolor	색상 or 색상코드	셀의 색상
background	"url / 파일명"	셀의 배경 이미지
rowspan	숫자	행 합치기
colspan	숫자	열 합치기

◎ 셀 안의 내용을 좌우로 정렬하는 align 속성

<td> 태그에 기술한 내용이 테이블의 셀에 나타날 때 항상 왼쪽에 위치하는 것을 볼 수 있죠? 문자의 위치 기본값이 왼쪽으로 정해져 있기때문입니다. 위치를 바꾸기 위해서는 'align' 속성을 <tr>, <td>, <th> 태그 안에 지정하면 특정 셀에 대해 내부에 기술한 텍스트가 정렬됩니다.

예문)

<tr align="left / right"> </tr>

<td align="left / right"> </tr>

<th align="left / right"> </th>

 

 

tip.

셀 정렬을 확인하기 위해 테이블의 너비를 지정하기

문자가 정렬되는 것을 확인하려면 테이블에 여백이 있어야 됩니다. 그래서 'width' 속성을 사용해 테이블의 크기를 적절히

조절한 후에 정렬 방식을 지정해야 됩니다. align 속성이 <tr> 태그에 쓰이면 이에 속해있는 모든 <td> 태그에 적용이 되지만

<td> 태그에 쓰이면 그 셀에만 적용됩니다.

◎ 셀 내용을 상하로 정렬하는 valign 속성

'align' 속성은 수평 위치를 기준으로 왼쪽, 오른쪽으로만 테이블의 내용을 정렬합니다. 테이블안의 글자를 수직 위치를 

기준으로 정렬하기 위해서는 'valign' 속성을 사용합니다.

예문)

<tr valign="top / middle / bottom"> </tr>

<td valign="top / middle / bottom"> </td>

<th valign="top / middle / bottom"> </th>