표 만들 때 사용하는 태그

• <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>