Table

table

동일한 key에 대한 여러 개의 value가 반복적으로 나타날 때, 즉 행과 열을 이용해서 데이터를 나타내고 싶을 때 table 태그를 이용할 수 있다. th와 td의 길이는 반드시 같아야 한다. 

 

tr | table row, 하나의 줄을 나타낸다.
th | table header

• scope 속성을 줄 수 있는데, col(월, 화, 수, 목, 금) 또는 row(1교시, 2교시...) 값을 갖는다. 

td | table data
thead | 브라우저에게 더 명확하게 "이 부분부터 테이블의 헤더임" 이라고 알릴 수 있다.
tbody | 브라우저에게 더 명확하게 "이 부분부터 테이블의 데이터임" 이라고 알릴 수 있다.
tfoot | 테이블의 마지막 데이터(ex.총계)를 나타낼 때 쓸 수 있다.

 

<table>
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">city</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>런던</td>
    </tr>
  </tbody>
</table>

 

table 기본

 

복잡한 형태의 테이블 만들기 | rowspan & colspan

여러개의 줄을 하나의 셀로 합치고 싶을 때 rowspan을 사용하고, 한 줄을 하나의 셀로 합치고 싶을 때 colspan을 사용한다.

n번째 tr에서 x번째 데이터의 rowspan 속성에 값을 3으로 지정하면, n+1, n+2번째 tr에서 x번째 데이터까지를 하나의 셀로 사용하는 것이기 때문에, 각각의 tr에서 x번째에 해당하는 데이터를 따로 지정하지 않는다. 

 

table 심화