html-5: 테이블 태그

테이블 태그

---

---

일반적 테이블 태그

태그	설명	비고
<table>	테이블
<caption>	표 설명 또는 제목	선택사항
<tr>	테이블의 행
<td>	테이블의 데이터 셀

<table>
      <caption></caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>

*emmet: table>caption+(tr>td*3)*3

---

___

헤더가 있는 테이블 태그

태그	설명	비고
<thead>	테이블의 헤더 부분	<tbody> 앞에 와야 함
<tbody>	테이블의 본문	본 내용을 담음
<tfoot>	테이블의 푸터 부분	<tbody> 뒤에 와야 함
<th>	열 또는 행의 헤더	scope 속성으로 row, col 중 선택
<scope>	헤더가 열인지 행인지 컴퓨터가 알게끔 해주는 것	육안으로 달라지는것 없음.

    <table>
      <caption></caption>
      <thead>
        <tr>
          <th scope="col">과목</th>
          <th scope="col">월</th>
          <th scope="col">화</th>
          <th scope="col">수</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">HTML</th>
          <td>60</td>
          <td>60</td>
          <td>0</td>
        </tr>
        <tr>
          <th scope="row">CSS</th>
          <td>0</td>
          <td>30</td>
          <td>60</td>
        </tr>
        <tr>
          <th scope="row">JS</th>
          <td>0</td>
          <td>0</td>
          <td>0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">총시간</th>
          <td>60</td>
          <td>90</td>
          <td>120</td>
        </tr>
      </tfoot>
    </table>

*emmet: table>caption+(thead>tr>th*4)+(tbody>(tr>th+td*3)*3)+(tfoot>tr>th+td*3)

---

___

셀 병합

속성	설명
colspan	열 병합
rowspan	행 병합

    <table>
      <tr>
        <td>1</td>
        <td colspan="2">2</td>
        <td>1</td>
      </tr>
      <tr>
        <td rowspan="3">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td rowspan="2" colspan="2">4</td>
      </tr>
      <tr>
        <td>1</td>
      </tr>
    </table> 

*emmet: tale>(tr>td*4)*4