Table태그

Table(표) 태그

<table> - 표

<tr> - 행

<td> - 열

---

Table 기본 태그

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

  <h1>Table 기본</h1>
      <table>
        <cpation>프로필 테이블</cpation>
        <tr>
          <th>이름</th>
          <th>취미</th>
          <th>특기</th>
        </tr>
        <tr>
          <th>홍길동</th>
          <th>도술</th>
          <th>축지법</th>
        </tr>
        <tr>
          <th>짐코딩</th>
          <th>헬스</th>
          <th>코딩</th>
        </tr>
      </table>
  

---

Table 그룹 관련 태그

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

<h1>Table 그룹 태그</h1>
    <table>
      <caption>
        학급 점수
      </caption>
      <colgroup>
        <col class="coll1" />
        <col class="coll2" />
        <col class="coll3" />
        <col class="coll4" />
        <col class="coll5" />
        <col class="coll6" />
      </colgroup>
      <thead>
        <tr>
          <th>반</th>
          <th>이름</th>
          <th>국어</th>
          <th>영어</th>
          <th>수학</th>
          <th>코딩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1반</th>
          <th>홍길동</th>
          <th>90</th>
          <th>100</th>
          <th>90</th>
          <th>81</th>
        </tr>
        <tr>
          <th>1반</th>
          <th>짐코딩</th>
          <th>85</th>
          <th>81</th>
          <th>95</th>
          <th>100</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>1반</th>
          <th>평균</th>
          <th>87.5</th>
          <th>90.5</th>
          <th>92.5</th>
          <th>90.5</th>
        </tr>
      </tfoot>
    </table>

---

Table 태그 관련 속성

• <table> 태그 속성
  • border: 테이블이 갖고 있는 테이블과 셀 모두 선을 표시한다. (웹 표준X)
  • width: 테이블의 가로 너비를 설정 (웹 표준X)
  • cellpadding: 셀의 안쪽 여백으로써, 셀과 콘텐츠와의 간격을 조절한다. (웹 표준 X)
  • cellspacing: 셀의 바깥쪽 여백으로써, 셀과 셀간의 간격을 조절한다. (웹 표준 X)
  → CSS로 대체해야함
• <th> 태그 속성
  • scope: 웹 접근성 관련 속성으로 스크린리더가 데이터를 인식하고 읽는 순서를 결정짓게 한다.
    • th가 열에 쓰일 경우 값을 “col”로 설정
    ex) <th scope="col">
    • th가 행에 쓰일 경우 값을 “row”로 설정
    ex) <th scope="row">
• <th>, <td>
  • colspan: 열을 병합하는 속성
  ex) <td colspan="2">
  • rowspan: 행을 병합하는 속성
  ex) <td rowspan="2">
• <col>
  • width: 열의 가로너비를 지정하지만 웹 표준이 아님
  • span: 열을 그룹화 함

<h1>Table 그룹 태그</h1>
    <table>
      <caption>
        학급 점수
      </caption>
      <colgroup>
        <col class="coll1" />
        <col class="coll2" />
        <col class="coll3" />
        <col class="coll4" />
        <col class="coll5" />
        <col class="coll6" />
      </colgroup>
      <thead>
        <tr>
          <th>반</th>
          <th>이름</th>
          <th>국어</th>
          <th>영어</th>
          <th>수학</th>
          <th>코딩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2">1반</th>
          <th>홍길동</th>
          <th>90</th>
          <th>100</th>
          <th>90</th>
          <th>81</th>
        </tr>
        <tr>
          <th>짐코딩</th>
          <th>85</th>
          <th>81</th>
          <th>95</th>
          <th>100</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="2">평균</th>
          <th>87.5</th>
          <th>90.5</th>
          <th>92.5</th>
          <th>90.5</th>
        </tr>
      </tfoot>
    </table>