테이블 태그
한 칸 한 칸의 셀로 행, 열을 이룬 표를 테이블이라고 한다.
< td></ td> : 셀을 표현하는 태그
< tr></ tr> : 테이블 행의 처음과 끝을 감싸는 태그
< table></ table> : 셀과 행열을 감싸서 테이블을 만드는 태그
- 이 태그들만으로 내용 입력 없이 테이블을 생성해서 브라우저로 확인해보면 아무것도 보이지 않는다. 테이블의 테두리가 없기 때문이다. CSS를 이용해서 스타일을 추가하면 테이블을 볼 수 있다.
위의 태그들만을 이용하여 짜면 코드가 너무 복잡해서 구조적으로 파악하기 힘들다. 표를 구조적으로 파악하기 위해 도움이 되는 태그들이 몇 개 더 있다.
- < caption></ caption> : 표의 제목을 나타낸다. < table>태그의 자식으로 가장 위에 선언되어야 한다.
- < thead></ thead> : 제목 행을 그룹화 하는 태그
- < th></ th> : 제목 행 셀을 나타낼 때 쓰는 태그. < td>태그보다 굵은 글씨로 표현된다.
- < tfoot></ tfoot> : 바닥 행을 그룹화하는 태그. 보통 표 내용의 합계를 표현할 때 쓰인다. thead와 tbody태그의 사이에 선언 되더라도 실제 브라우저에서는 가장 밑에 노출된다.
html 이전 버전에서는 tfoot이 thead와 tbody 사이에 위치하거나, 위치가 상관없었지만, 이번 버전은 키보드의 초점 이동 순서 항목에 문제가 있어서 tbody 뒤에 tfoot이 위치해야 한다.
- < tbody></ tbody> : 테이블 본문 행을 그룹화하는 태그.
테이블 관련 속성
colspan : 셀을 가로방향으로 병합. 속성 값에는 병합할 셀의 개수를 적어주면 td(셀 갯수)와 colspan수의 합만큼 된다.
<tr><td colspan="2">sum</td></tr>
<!--sum이라는 글자를 내용으로 가진, 셀 2개 길이의 한 행이 생긴다.-->rowspan : 셀을 세로방향으로 병합
<tr><td>February</td><td rowspan="2">$80</td></tr>
<tr><td>March</td></tr>