7. 표(table) 태그

Table 구조

 

Table 기본 태그

• <table> - 표를 만드는 태그로써, 표 전체를 감싸는 데 사용합니다.
• <caption> - 표의 제목이나 설명을 작성하는 태그입니다.
• <tr> - 표의 행을 의미하는 태그. 자식으로 <th>태그나 <td>태그가 반드시 있어야 합니다.
• <th> - 표의 제목 열을 의미하는 태그, 부모 태그인 <tr> 태그 안에 있어야 합니다.
• <td> - 표의 일반 열을 의미하는 태그, 부모인 <tr>태그안에 있어야 합니다.

 

Table 그룹 관련 태그

• <colgroup> - 열을 그룹으로 묶을 수 있도록 해주는 태그입니다.
• <col> - <colgroup>태그의 자식으로 열 단위를 나눌 수 있습니다. span 속성을 사용하여 열을 그룹으로 묶을지 설정합니다. 예) <col span="3"> → 세 개의 열을 그룹으로 묶음
• <thead> - 표의 제목 열들을 묶는 그룹 태그입니다.
• <tbody> - 표의 일반적인 데이터들을 묶는 그룹태그입니다. 기본적으로 행그룹태그를 사용하지 않으면 브라우저가 자동으로 tbody 태그로 묶어줍니다.
• <tfoot> - 표의 하단 영역을 묶는 그룹태그입니다.

 

<th>, <td> 태그 속성

• colspan - 열을 병합하는 속성입니다. 예) <td colspan="2">
• rowspan - 행을 병합하는 속성입니다. 예) <td rowspan="2">

 

---

실습

<table>
  <caption>시험점수</caption>
  <colgroup>
    <col class="col1">
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2">이름</th>
      <th colspan="3">과목</th>
    </tr>
    <tr>
      <th>국어</th>
      <th>수학</th>
      <th>영어</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>70</td>
      <td>90</td>
      <td>80</td>
    </tr>
    <tr>
      <td>김길동</td>
      <td>90</td>
      <td>60</td>
      <td>70</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>평균</td>
      <td>80</td>
      <td>75</td>
      <td>85</td>
    </tr>
  </tfoot>
</table>