기본적인 표 만들기
우선 기본적인 표를 만드는 태그는 아래와 같다.
1. <table> 태그: 표 자리를 만든다.
2. <tr> 태그: 행을 만든다.
3. <td> 태그: 각 행마다 셀을 만든다.
4. <th> 태그: 셀에 표의 제목을 만든다. (해당 셀에 들어가는 내용은 셀의 중앙에 배치되고 굵은 글씨로 표시된다.)
(기본형)
<table>
<tr>
<th> 제목1 </th>
<td> 내용1 </td>
<td> 내용2 </td>
</tr>
<tr>
<th> 제목2 </th>
<td> 내용3 </td>
<td> 내용4 </td>
</tr>
</table>(결과물)
셀 합치기 (행 또는 열 합치기)
rowspan 속성과 colspan 속성을 <th> 태그나 <td> 태그 안에 사용하면 원하는 개수의 셀만큼 합칠 수 있다.
(기본형)
<td rowspan="합칠 셀의 개수"> 내용 </td>
<td colspan="합칠 셀의 개수"> 내용 </td>
표의 제목 붙이기
표의 제목을 붙이는 태그로는 <caption> 태그와 <figcaption> 태그가 있다.
먼저 <caption> 태그를 사용하면 표의 위쪽 중앙에 표의 제목이 표시되고, <caption> 태그는 <table> 태그 바로 다음에 사용해야 한다.
<caption> 태그 안에는 다른 태그를 사용해서 텍스트를 꾸미거나 표의 제목을 여러 줄로 표시할 수도 있다.
(기본형)
<caption> 표의 제목 </caption>
<figcaption> 태그는 <figure> 태그 안에 사용되는데, 이 태그를 이용해 표의 제목이나 설명을 넣을 수 있다. <caption> 태그와 달리 표의 위쪽 중앙에 제목이 표시되지 않고, <table> 태그 이전에 사용하면 표의 위에 제목이 표시되고, </table> 뒤에 사용하면 표의 아래쪽에 제목이 표시된다.
(사용 예시)
<figure>
<figcaption>
<p><b>인적 사항</b></p>
</figcaption>
<table>
<tr>
<th> 이름 </th>
<td></td>
<th> 연락처 </th>
<td></td>
</tr>
<tr>
<th> 주소 </th>
<td colspan="3"></td>
</tr>
<tr>
<th> 자기 소개 </th>
<td colspan="3"></td>
</tr>
</table>
</figure>
(결과물)
열 묶어서 스타일 지정하기
하나의 열 또는 여러 개의 열을 묶어서 스타일을 지정할 수 있다.
<col> 태그를 이용하면 한 열에 있는 모든 셀의 스타일을 지정할 수 있다. 참고로 <col> 태그는 닫는 태그가 없다.
여러 개의 열을 묶어 같은 스타일로 한 번에 지정하려면, span 속성을 이용해 몇 개의 열을 묶을지 지정하거나, <colgroup> 태그 안에 묶고 싶은 열의 개수만큼 <col> 태그를 넣어 지정할 수 있다.
주의할 점은 <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤, 그리고 <tr> 태그와 <td> 태그 앞에 사용해야 한다는 것이다.
(기본형)
<col><colgroup>
<col>
<col>
...
<colgroup>
(사용 예시)
<table>
<caption><b>colgroup 연습</b></caption>
<colgroup>
<col>
<col span="2" style="background-color: chocolate;">
<col style="background-color: darkkhaki;">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
(결과물)
