HTML 테이블, 표 관련 태그(table, caption, thead, tbody, tfoot, tr, th, td, col, colgroup) 총정리
HTML 테이블, 표 구성 요소 관련 태그
table 태그, caption 태그
HTML 문서에 테이블을 추가할 때, 표의 구성 요소들을 <table></table> 안에 정의해줘야 합니다. 그리고 caption 태그를 사용해서 표의 제목을 달 수 있습니다.
표의 구조를 정의 thead, tbody, tfoot 태그
일반적인 표의 구조를 보게 되면 첫 행의 열에는 표의 열의 머리글이 위치하고 다음행부터는 본문의 내용들이 나오며, 표의 마지막 행에는 입력된 데이터의 전체 본문 영역 데이터의 합이나 TOTAL SUM값 등 표의 요약된 데이터가 위치하게 됩니다.
위에 설명된 것 과 같이 표의 구조상 표의 헤더 부분은 thead 태그로 선언하고, 표의 본문 영역은 tbody 태그로 표의 하단 요약부분은 tfoot 태그로 정의할 수 있습니다.
표의 구조를 태그로 구분 지었을때 얻을 수 있는 효과는 table 태그의 웹표준을 준수할 수 있으며, 자바스크립트 언어를 이용하여 thead 태그와 tfoot 태그로 지정한 부분은 고정으로 하고 tbody 부분만 스크롤 되도록 구현할 수 있습니다.
또, 인쇄할 때 각장마다 tbody와 tfoot으로 지정한 부분을 고정하여 출력할 수도 있습니다.
HTML 테이블, 표 본문 작성 tr, th, td 태그
HTML의 표의 행과 열을 만들 때는 우선 tr 태그를 선언해서 행을 추가 시키고 tr 태그 안에 td 태그를 넣어 각 열마다의 데이터를 넣어서 선언합니다.
이때, 열의 헤더 부분(머리글)로 지정하고 싶은 셀에는 th 태그를 이용해서 선언하고 th 태그로 선언했을 때는 일반 셀보다 굵게 표시되는 특징이 있습니다.
셀 병합 속성 rowspan, colspan 속성
테이블에서 셀 병합이 필요한 경우에는 병합이 시작되는 td 태그 및 th 태그에 rowspan이나 colspan의 속성을 사용하면 병합을 할 수 있습니다.
행 병합이 필요한 경우에는 rowspan="병합할 행 숫자" 열 병합이 필요한 경우에는 colspan="병합할 열 숫자"를 기입해서 사용하시면 됩니다.
특정 열을 그룹으로 묶거나 특정 열에 스타일 적용 col, colgroup 태그
col 태그를 사용하여 특정 열에 다른 스타일을 적용할 수 있습니다. 이 때 지정하는 열이 2개 이상일 때는 colgroup 태그 안에 col 태그를 선언해야 합니다.
colgroup 태그는 반드시 caption 태그 다음에 사용해야 하고, 셀이 4개 있는 표에 3개에만 특정 스타일을 적용할 때에도 적용되지 않는 셀까지 col 태그로 나열해야 됩니다.
즉 셀이 4개에 특정 스타일 적용 셀이 3개여도 col 태그는 4개 다 지정해주어야 합니다.
HTML 테이블, 표 태그 예제
<table>
<caption>과일 재고 리스트</caption>
<thead>
<tr>
<th>품목</th>
<th>품명</th>
<th>종류</th>
<th>수량</th>
</tr>
<thead>
<tbody>
<tr>
<td rowspan="2">사과</td>
<td>영동 사과</td>
<td>과일</td>
<td>100</td>
</tr>
<tr>
<!-- !rowspan으로 합병되는 셀을 제외하고 선언 -->
<td>청송 사과</td>
<td>과일</td>
<td>300</td>
</tr>
<tr>
<td>바나나</td>
<td>필리핀 바나나</td>
<td>과일</td>
<td>200</td>
</tr>
<tr>
<td>딸기</td>
<td>논산 딸기</td>
<td>과일</td>
<td>300</td>
</tr>
<tr>
<td>한라봉</td>
<td>제주도 한라봉</td>
<td>과일</td>
<td>400</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- !colspan으로 합병되는 셀을 제외하고 선언 -->
<td colspan="3">합계</td>
<td>1300</td>
</tr>
</tfoot>
</table>