표 (테이블,table)
- 각 행과 열로 이루어져있다.
- 각각의 칸을 셀(cell)이라 한다.
- table을 만들때는 행을 먼저 나누고 원하는 만큼 열을 만든다.
행은(Table rows)로 <tr>태그를 사용한 후 열(Table data) <td>로 셀 개수만큼 사용하면 된다. 그리고 표의 머리 (table headings)를 정의할때는 <th>태그를 사용한다.
<th>태그는 셀의 제목글자를 강조하는 역할을 한다.
위의 테이블은 <th>,<tr>,<td>를 사용해 만든 테이블이다.
<th>는 설명처럼 셀의 제목글자를 강조하고
<tr>로 첫행을만들고 <td>홍민성</td> <td>90</td>로 두개의 열을 만들어 보여준다.
그 아래 역시 같은 방법으로 사용할 수 있다.
===>
<th>는 설명처럼 셀의 제목글자를 강조하고
<tr>로 첫행을만들고 <td>홍민성</td> <td>90</td>로 두개의 열을 만들어 보여준다.
그 아래 역시 같은 방법으로 사용할 수 있다.
1) 셀 병합
- rowspan : 셀을 세로로 병합한다. 속성값으로는 병합하고 싶은 행의 수만큼 지정한다.
- colspan : 셀을 가로로 병합한다. 속성값으로는 병합하고 싶은 열의 수만큼 지정한다
===>
왼쪽의 테이블구성을 이용해서 셀을 병합한 모습이다.
기존 <td>4</td>을 이용해서 <td rowspan="4">4</td>의 속성값을 주고난 후,
병합이 될 8,12,16 <td>태그를 지워주면 된다.
다음 6번 셀은 두가지 속성값이 들어갔는데 <td rowspan="3" colspan="2">6</td>
이렇게 두가지 속성을 넣어주고 이 역시 병합 될 셀의 <td>태그를 지워주면 병합이 가능하다.
마지막 머리말,본문,꼬리말 부분을 분류하는 역할이다.
- <thead> : 표 머리말 부분의 그룹 태그
- <tbody> : 표 본분 부분의 그룹 태그
- <tfoot> : 표 꼬리말 부분의 그룹 태그
위 표는 아래의 소스코드로 만들어진 표다.
다소 부족하지만 html의 table 태그 설명이다.