[HTML] 테이블 태그 와 속성 (table,tr,td)

웹문서 제작에 가장 숙련도를 요구하는 태그로 TABLE 태그가 있다. 웹문서에서 TABLE 태그는 내용물 전체의 배치를 위한 뼈대를 제공하고, 내용물을 직접 나타내기도 하며, 이미지와 더불어 디자인의 중요한 한 요소를 차지하고 있다. 웹문서 제작에 있어 많은 시간을 들이는 부분이기도 하고 문서내 태그중에 대부분을 차지하기도 한다. 실제 서비스되는 웹문서에서 모든 내용물은 테이블 속에 담겨져 있다고 가정하면 된다.

table 태그는 표의 시작과 끝을 정의하고 tr 태그는 표의 행을 정의하며 td 태그는 행을 이루는 열을 정의한다. 따라서 위의 태그들은 홀로 사용될 수 없고 <td> ~</td> 가 모여 <tr> ~ </tr> 을 구성하고 <tr> ~ </tr> 가 모여 </table>~</table> 을 이루게 된다. 가장 간단한 표라도 다음과 같이 한줄 한칸 짜리 표로 이루어지며 표에 들어갈 내용은 <td> ~</td> 사이에만 들어갈 수 있다.

<table> 표 <tr> 한줄 <td> 한칸 * 표 속에 들어갈 내용은 여기!!! </td> </tr> </table>

■ table ,tr, td 공통 속성

width	table ,tr, td 넓이
height	table ,tr, td 높이
bgcolor	table ,tr, td 바탕색
background	table ,tr, td 배경이미지
align	table ,tr, td 수평정렬
valign	table ,tr, td 수직

■ table~ /table 에만 있는 속성

border	테이블 경계선 두께
bordercolor	테이블 경계선 색상
bordercolorlight	테이블 경계선 색상의 밝은 부분
bordercolordark	테이블 경계선 색상의 어두운 부분
cellpadding	열(셀) 내부에서의 내용물이 경계선으로부터 떨어져야 할 여백
cellspacing	각 열(셀) 들간에 떨어져야 할 여백

■ td ~ /td * Table Data, 열

colspan	칸을 열로 합치기
rowspan	칸을 행으로 합치기