[HTML] 표 만들기

• <table> : 표의 시작과 끝
• <caption> : 표의 제목
  제목은 표의 위쪽 중앙에 표시된다.
  
  <table>
    <caption>표 제목</caption>
  </table>
  
  
• <tr> : 행 만들기 (table row)
  하나 이상의 <td> 태그 혹은 <th> 태그를 포함해야 한다.
• <td> : 셀 만들기 (table data cell)
• <th> : 제목 셀 만들기 (table header cell)
  제목과 내용을 구분하기 위해 굵은 서체, 가운데 정렬로 표현된다.
  
  <table>
     <tr>
      <td>1행 1열</td>
      <td>1행 2열</td>
    </tr>
    <tr>
      <td>2행 1열</td>
      <td>2행 2열</td>
    </tr>
  </table>
  
  

• 구조를 지정해 주는 태그
  구조를 지정하면 편리하게 표의 제목, 본문 요약에 각각 다른 스타일을 적용하는 등 편리하게 구분할 수 있다.
  
  • <thead> : 제목 (table head)
  • <tbody> : 본문 (table body)
  • <tfoot> : 요약 (table foot)

    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</th>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>선물용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td>가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>가정용</td>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

• rowspan : 행 합치기
• colspan : 열 합치기 (colum span)
  행이나 열을 합치는 것은 <td> 태그나 <th> 태그에서 이루어진다.
  
  <td rowspan="합칠 셀의 개수">셀의 내용</td>
  <td colspan="합칠 셀의 개수">셀의 내용</td>

    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>

• <colgroup> :  다수의 <col> 태그 묶어주기 (column group)
  표의 내용이 시작되기 전에 열의 상태를 알려주기 위해 <caption> 태그 다음에 사용된다.
• <col> : 열 1개 지정하기 (column)
  닫는 태그 없이 단독으로 사용된다.
  스타일 속성을 지정하지 않은 열이 있을 경우에도 각각 태그를 명시해야 한다.
  
  <colgroup>
    <col>
  <colgroup>
  
  • span : 같은 스타일 속성을 사용하는 <col> 태그가 있을 경우 묶어주기

  <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col span="2" style="width:150px">
    </colgroup>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>