표 만들 때 사용하는 태그
<table>: 표를 만듭니다.<tr>: 행을 만듭니다.<th>: 열의 제목이 들어가는 셀을 만듭니다.<td>: 내용이 들어가는 셀을 만듭니다.-
<thead>,<tbody>,<tfoot>: 각 열의 의미에 따라 구분지을 수도 있습니다. - 가로로 이웃한 셀을 병합할 때에는 colspan 속성을 사용합니다.
- 세로로 이웃한 셀을 병합할 때에는 rowspan 속성을 사용합니다.
-
표 제목은
<caption>으로 만듭니다.
목차
기본적인 표 만드는 방법
표를 만들 때에는 여러 태그가 함께 사용되기 때문에 표 만들기를 연습하다 보면 태그들이 혼동되곤 합니다. 표를 만들 때는 순서가 있습니다. 그 순서를 기억해 두면 표 만들기가 한결 쉬울 것입니다.
우선 <table> 태그를 이용해 표 전체 윤곽을 잡은 후 행(row)을
먼저 만들고 행마다 몇개의 셀(cell)이 들어갈지 결정합니다. 예를 들어 행이
2개이고 열이 3개인 표를 만든다면 다음과 같은 순서로 만듭니다.
1. <table> 태그로 전체적인 틀을 잡습니다.
<table>
</table>
2. <tr> 태그로 2개의 행을 만듭니다.
<table>
<tr>
</tr>
<tr>
</tr>
</table>
3. <td> 태그로 각 행마다 셀을 3개씩 만듭니다.
<table>
<tr>
<td> ... ... </td>
<td> ... ... </td>
<td> ... ... </td>
</tr>
<tr>
<td> ... ... </td>
<td> ... ... </td>
<td> ... ... </td>
</tr>
</table>
4. 각 셀에 들어갈 내용은 <td> 와
</td> 사이에 입력합니다.
<table>
<tr>
<td> 내용01 </td>
<td> 내용02 </td>
<td> 내용03 </td>
</tr>
<tr>
<td> 내용01 </td>
<td> 내용02 </td>
<td> 내용03 </td>
</tr>
</table>
th - 표에 제목 셀 추가
표를 만들다 보면 첫번째 행이나 열에 셀의 제목을 넣는 경우가 많습니다. 제목의
경우, 보통 다른 글자보다 굵게 표시하고 셀의 중앙에 배치하는데
<td> 태그 대신 <th> 태그를 사용하면 이런
과정을 간단히 줄이면서 제목 셀을 만들수 있습니다.
<th> 태그도 <td> 태그와 마찬가지로 셀을
만드는 태그입니다. 해당 셀에 들어가는 내용은 셀의 중앙에 배치되고 텍스트도
굵게 표시됩니다.
thead, tbody, tfoot - 표의 구조화
일부 표에서는 제목과 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약 내용을 표시하기도 합니다. 이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋습니다.
이때 사용하는 태그들은 table의 t와 제목 부분(head), 본문(body), 요약
부분(foot)이란 말이 합쳐진 <thead>,
<tbody>, <tfoot> 태그입니다.
colspan, rowspn - 행 또는 열 합치기
여러 셀을 하나로 병합하려면 <td> 태그나
<th> 태그 안에서 colspan, rowspn 속성을 사용해 몇 개의 셀을
합칠지 정합니다.
- rowspn : 가로로 병합할 셀의 개수를 정합니다.
- colspan : 세로로 병합할 셀의 개수를 정합니다.
<td rowspan="합칠 셀의 개수"></td>
<td colspan="합칠 셀의 개수"></td>
<th rowspan="합칠 셀의 개수"></th>
<th colspan="합칠 셀의 개수"></th>
예제
지금까지 위에서 설명한 내용을 모두 포함하는 간단한 예제입니다. 정렬이나 셀 병합의 결과를 명확히 나타내기 위해 CSS로 표의 너비을 정하고 테두리를 만들었습니다.
<table>
<caption>Lorem</caption>
<thead>
<tr>
<th></th>
<th>Ipsum</th>
<th>Ipsum</th>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td rowspan="2">Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Foot</td>
</tr>
</tfoot>
</table>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.