<table>,<tr>,<td>,<th>태그-기본적인 표 만들기

웹에서 표를 만들 때는 우선<table>태그를 만들어 윤곽을 잡은 후, 행을 먼저 만들고 행마다 몇개의 셀이 들어갈지 결정한다.

기본적인 표만들기(2행3열)

• 1. <table>태그로 표 자리를 먼저 만든다.

<table>


</table>

• 2.<tr>태그로 2개의 행을 만든다.

<table>
<tr>
      
</tr>
<tr>
      
</tr>/
  </table>

• 3.<tr>태그로 각 행마다 셀을 3개씩 만든다.

<table>
<tr>
  <td>	</td>
  <td>	</td>
   <td>	</td>
</tr>
<tr>
   <td>	</td>
   <td>	</td>
   <td>	</td>
      
</tr>/
  </table>
//각 셀에 들어갈 내용은 <td>와 </td>사이에 입력합니다.

• <th>태그- 표에 제목 셀 만들기

  표를 만들다 보면 첫 번째 행이나 열에 셀의 제목을 넣는 경우가 많습니다.
  제목의 경우,보통 다른 글자보다 굵게 표시하려고 셀의 중앙에 배치하는데<td>태그 대신<th>태그를 사용하면 이런 과정을 간단히 줄이면서 제목 셀을 만들 수 있습니다.<th>태그도 <td>태그와 마찬가지로 셀을 만드는 태그로 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.

colspan,rowspan속성-행 또는 열 합치기

이 기능은 셀을 합치는 것이므로 셀을 만드는 <td>태그나<th>태그에서 이루어집니다.
여러 열을 하나로 합치려면 <td>태그나 <th>태그 안에서 colspan속성을 이용해 몇개의 셀을 가로로 합칠지 지정합니다.

• <td colspan="합칠 열의 개수"> 내용 </td>
• <td rowspan="합칠 행의 개수"> 내용 </td>

<caption>,<figcaption>태그-표에 제목 붙이기

<caption>태그는 <table>태그 바로 다음에 사용합니다.<caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.<caption>안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있습니다.

<table>
  <caption>
    <strong>Morden Brower</strong>
    <p>국내에서 자주 사용하는 모던브라우져</p>
  </caption>
  <tr>
    <th>브라우저</th>
    <th>제조업체</th>
    <th>다운로드</th>
  </tr>
  <tr>
    <th>크롬(Chrome)</th>
    <td>Google</td>
    <td>https://www.google.com/chrome/</td>
  </tr>
 
</table>

• <figcaption>태그 사용하기

  표에 제목을 붙이는 두번째 방법으로 <figure>태그와 <figcaption>태그를 사용할 수도 있습니다.
  <figcaption>태그는 figure과 caption의 합성어로 설명 글에 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목이나 설명 글을 입력합니다.

• 이경우에는 <caption>태그를 사용하지 않으며 <caption>태그와 달리 중앙에 정렬되지 않습니다.

• <figcaption>을 <table>태그보다 앞에 사용하면 표 위에 제목이 표시되고,
  </table>뒤에 추가하면 표 아래에 제목이 표시됩니다.

  <table>
      <tr>
    <th>브라우저</th>
    <th>제조업체</th>
    <th>다운로드</th>
  </tr>
  <tr>
    <th>크롬(Chrome)</th>
    <td>Google</td>
    <td>https://www.google.com/chrome/</td>
  </tr>
 
</table>
<figure>
  <figcaption>
    <p>국내에서 자주 사용하는 <b>모던브라우저</b></p>
  </figcaption>
  </flgure>

<thead>,<tbody>,<tfoot>태그-표 구조 정의하기

일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약 내용을 표시하기도 합니다.이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋습니다.

• 이 때 사용하는 태그들은 table의 t와 제목부분(head),본문(body),요약부분(foot)이란 말이 합쳐진<thead>,<tbody>,<tfoot>태그입니다.

<col>,<colgroup>태그-여러 열 묶어 스타일 지정하기

표에서 하나의 열에 스타일을 저장하거나 열을 몇개 씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다.

• <col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 떄 사용하는 것으로 닫는 태그가 없습니다.

• <col>태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 이용해 몇 개를 함께 묶어 줄지 지어할 수 있습니다.

• <colgroup>태그를 사용해서도 여러 열을 묶어 스타일을 적용할 수 있는데 <colgroup>태그 안에 묶는 열의 개수만큼 <col>태그를 넣으면 된다.

• 주의해야 할점:
  -<col>태그와<colgroup>태그는 <catprion>태그 뒤와 <td>,<tr>태그 전에 사용해야 한다는 점이다.
  -<colgroup>태그 안에 있는<col>태그를 비롯해 단독으로 사용한 <col>태그의 개수와 표의 열의 개수가 같아야 합니다.