<TABLE>
Last updated
Last updated
table 태그는 행과 열로 구성된 표를 만드는 데 사용한다. 연관된 태그가 많이 등장하기 때문에 역할별로 구분하여 이해할 필요가 있다.
<table> - 테이블 영역
<thead> - 테이블 상단 제목 영역
<tbody> - 테이블 중단 데이터 영역
<tfoot> - 테이블 하단 보조 영역
<tr> - 줄 영역
<th> - 칸 영역(제목용)
<td> - 칸 영역(데이터용)
<thead>는 table header라는 의미로 테이블 상단 제목 영역을 표시하기 위해 사용한다. <tbody>는 table body라는 의미로 테이블 중단 데이터 영역을 표시하기 위해 사용한다. 경우에 따라서는 제목이 좌측에 있는 테이블도 있으나 흔치 않기 때문에 기본적으로 제목이 상단에 있는 테이블을 위하여 각각의 태그들이 존재한다.
border 속성을 통해 테이블에 테두리를 부여할 수 있다. 0으로 설정할 경우 테두리가 사라지며, 숫자가 커질 수록 두꺼워진다.
width 속성을 이용하여 테이블 또는 칸의 폭을 조절할 수 있다. 부여하지 않을 경우 내용에 맞춰 자동으로 설정되며, 단위 설정은 불가능하다. 기본적으로 픽셀(px)로 설정되며, 비율(%)로 지정 가능하다.
height 속성은 테이블 또는 칸의 높이를 조절할 수 있다. 부여하지 않을 경우 내용에 맞춰 자동으로 설정되며 width 속성과 동일하게 설정할 수 있다. 테이블에 작성된 행의 수에 따라 높이가 변하는 경우가 많아 설정하지 않는 경우가 많다.
align 속성을 이용하여 테이블 또는 내용에 대한 정렬을 설정할 수 있다.
left - 왼쪽 정렬
center - 가운데 정렬
right - 오른쪽 정렬
align 속성이 여러 개 지정되어 있을 경우 가장 가까운 영역에 부여된 속성이 적용된다.
colspan과 rowspan 속성을 이용하여 셀 병합 효과를 낼 수 있다.
colspan - 칸(th/td)을 작성된 숫자만큼의 칸에 걸쳐 자리할 수 있도록 설정
rowspan - 칸(th/td)을 작성된 숫자만큼의 줄에 걸쳐 자리할 수 있도록 설정
rowspan과 colspan을 동시에 사용하면 온전한 테이블 모양이 나오지 않을 가능성이 높다.
<tfoot>은 table footer라는 의미로 테이블 하단 영역을 표시하기 위해 사용한다. 테이블에 부가적인 도구들을 추가하고 싶을 때 사용한다.
글자는 반드시 칸(th/td)에 작성해야 한다.
table 부터 칸(th/td) 사이에 다른 태그나 글자를 넣지 말아야 한다.