HTML 표 관련 태그

<table> → 표만들기
 <tr> → 행
  <th> 제목 </th> → 행의 제목 셀
  <tb> 내용 </tb> → 열
  <tb> 내용 </tb>
  <tb> 내용 </tb>
 </tr>
</table>

<table border="1"> : 셀 구분이 가능하도록 선을 추가

 

<td colspan="(합칠 셀의 개수)">, 

: 여러 열을 하나로 합치는 것

	colspan="2"

 

<td rowspan="(합칠 셀의 개수)">, 

: 여러 행을 하나로 합치는 것

rowspan="2"

 

- 표에 제목 붙이기

<table>
 <caption> 표 제목 또는 내용 </caption> → 중앙정렬
 ~
</table>


<table>
 <figcaption> 표 제목 또는 내용 </figcaption> → 왼쪽 정렬
 ~
</table>

figcaption은 표 앞이나 뒤에 붙일 수 있음

 

-표 구조 정의하기 thead, tbody, tfoot

<table>

 <thead> → 표의 제목부분 구분
  <tr>
   <th>구분</th>
   ~
  </tr>
 </thead>
 
 <tbody> → 표의 내용부분 구분
  <tr>
   <th>구분</th>
   ~
  </tr>
 </tbody>
 
 <tfoot> → 표의 요약부분 구분 (ex. 합계)
  <tr>
   <th>구분</th>
   ~
  </tr>
 </tfoot>
 
</table>

 

-여러 열 묶어 스타일 지정하기

<table>
 <colgroup>
  <col> → 열 개수를 맞추기위해 추가한 태그
  <col span ="2" style="background-color:blue;"> → 열과 스타일 지정
  <col span style="background-color:yellow;"> → 숫자가 없으면 기본으로 하나의 열
 </colgroup>

↓

	파란색	파란색	노란색
	파란색	파란색	노란색