[HTML5] 표 태그 <table> / 셀 병합 속성 colspan, rowspan

• <table>, <tr>, <td>, <th> 은 함께 작성해야 표가 만들어 짐.
• <table> : 테이블 작성 시 시작을 알리는 태그
• <tr> : 테이블의 행(줄)
• <th> : 테이블의 셀(칸). 셀의 소제목
• <td> : 테이블의 셀(칸). 일반적인 셀
  1. * 셀 안의 컨텐츠는 세로 중앙 정렬이 기본.
  2. * 셀 안의 컨텐츠 경우 th는 가로 중앙 정렬, td는 가로 왼쪽 정렬
  3. * table 요소에 width 값 적용시 각 셀의 제어가 어려움
  4. * 셀 하나에 가로, 세로 값을 주면 일반적으로 나머지 셀들도 따라감

---

  <table border="1"> <!--border 태그는 표 구현을 위해 사용. html에서는 더 이상 쓰지 않음.-->
    <tr>
      <th>소제목</th>
      <td>셀</td>
      <td>칸</td>
    </tr>
    <tr>
      <td>1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>테이블 셀의 크기는</td>
      <td>다른 셀의</td>
      <td>크기에 영향을 받는다</td>
    </tr>
  </table>

 

---

열 병합 colspan

• column + span의 합성어
• colspan은 속성이며 값을 가져야 한다.
• 뒤에 오는 셀(th, td)과 병합. 즉 다른 열과 합치는 속성
• <td colspan="값">으로 작성하며 값에 입력된 수만큼의 열을 병합한다.
• colspan은 값만큼의 셀 수를 가지기 때문에 병합당하는 셀 태그를 맞춰서 삭제해줘야 한다.

  <h1>열 병합 colspan</h1>
  <table border="1">
    <tr>
      <th></th>
      <th>9am</th>
      <th>10am</th>
      <th>11am</th>
      <th>12am</th>
    </tr>
    <tr>
      <th>월요일</th>
      <td colspan="2">UI 디자인</td>
      <td>html</td>
      <td>css</td>
    </tr>
    <tr>
      <th>화요일</th>
      <td colspan="3">체육</td>
      <td>디자인</td>
    </tr>
  </table>

열 병합 colspan 속성

---

행 병합 rowspan

• column + span의 합성어
• rowspan은 속성이며 값을 가져야 한다.
• 아래에 오는 셀(th, td)과 병합. 즉 다른 행(셀)과 합치는 속성
• <td rowspan="값">으로 작성하며 값에 입력된 수만큼의 행(셀)을 병합한다.
• rowspan은 값만큼의 행(셀) 수를 가지기 때문에 병합당하는 행(셀) 태그를 맞춰서 삭제해줘야 한다.

  <h1>행 병합 rowspan</h1>
  <table border="1">
    <tr>
      <th></th>
      <th>넷플릭스</th>
      <th>티빙</th>
      <th>apple TV</th>
    </tr>
    <tr>
      <th>6pm - 7pm</th>
      <td rowspan="2">영화</td>
      <td>코미디</td>
      <td rowspan="3">뉴스</td>
    </tr>
    <tr>
      <th>7pm - 8pm</th>
      <td rowspan="2">스포츠</td>
    </tr>
    <tr>
      <th>8pm - 9pm</th>
      <td>다큐멘터리</td>
    </tr>
  </table>

행 병합 rowspan

---

표 영역의 그룹화

• <thead></thead> : 표의 머릿말.
• <tbody></tbody> : 표의 본문.
• <tfoot></tfoot> : 표의 바닥글. HTML4까지는 thead 바로 아래 작성했지만 HTML5부터는 tbody 아래에 작성해야 한다. 
• <caption></caption> : table 전용 캡션. 꼭 table 태그와 함께 작성하며, 표의 영역에 맞춰 가운데 정렬 출력