표를 만드는 태그
이번에는 표를 만드는 태그에 대해서 살펴보도록 하겠다.
이번에 배우는 태그들 또한 당연히 <body> 태그에서만 사용할 수 있다.
<table>, <tr>, <td>, <th>
2행 3열의 표를 만들 때 다음과 같이 코드를 작성하면 된다.
<table>
<tr>
<td> 1행 1열 </td>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table>위 코드를 보면 <table> 태그는 표 자리를 만들 때 사용한다는 걸 알 수 있다.
<tr>은 표의 행을 구성하고, <td>는 행의 셀을 만들 때 사용한다.
위 코드에 제목 셀이 필요할 때 <th> 태그를 사용하면 된다.
<th> 태그는 <td>보다 글자를 굵게 표시하고 셀의 중앙에 배치한다.
<table>
<tr>
<th> 제목 1 </th>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<th> 제목 2 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table><td>, <th>의 다양한 태그 속성
- colspan 속성: 여러 열을 하나로 합치려면 colspan 속성을 사용하여 몇 개의 셀을 가로로 합칠지 지정한다.
- rowspan 속성: 여러 행을 하나로 합치려면 rowspan 속성을 사용하여 몇 개의 셀을 세로로 합칠지 지정한다.
<caption>
표에 제목을 사용할 때 사용하는 태그이다.
이 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다.
<table>
<caption><b> 표 제목 </b></caption>
<tr>
<th> 제목 1 </th>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<th> 제목 2 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table>
@dlacked