HTML - 표2 : 구조 및 병합

table의 구조는 HTML과 유사하게,

<thead>~</thead>, <tbody>~</tbody>, <tfoot>~</tfoot>의 3구조로 나누어 집니다. 표를 작성할 때에 각 부분에 해당하는 내용들을 넣으면, 표의 내용의 위치를 변경하더라도 thead의 내용은 head위치에 tfoot의 내용은 foot위치에 표시가 됩니다.

 

이름	성별	학년	회비
이미남	남자	4학년	10000
이미녀	여자	4학년	5000
합계			15000

 

전체 표를 <table>로 감싸고 제목에 해당되는 부분은 <th>, 내용에 해당되는 부분은 <td>로 항목 하나하나 감싸줍니다.

 

표 테두리를 두께를 지정할 때에는 border라는 속성을 이용합니다.

 

그리고 태그 자체의 가독성을 높이기 위해 헤드 부분은 <thead>, 주 내용 부분은 <tbody>, 그 외의 내용 부분은 <tfoot>으로 감싸줍니다. 이것은 각 구조의 위치를 결정하기도 합니다.

 

이름	성별	학년	회비
이미남	남자	4학년	10000
이미녀	여자		5000
합계			15000

 

표를 병합하고자 할 때에는 첫 번째 <td>속성에 rowspan, colspan을 넣어줍니다.

rowspan은 행을 기준으로 병합을 하는 것이고, colsapn은 열을 기준으로 병합을 하는 것입니다.

 

table태그는 표를 삽입하기 위한 태그이지만 예전에는 웹페이지의 레이아웃을 구성할 때에도 사용되었습니다.