[프론트엔드][html5] 19. 표 만들기 - table

table

: 표를 만드는 태그, 표를 이용한 형태를 만들 때 사용하는 태그

기본적으로 몇줄(행) 몇칸(열) 이라고 말한다. (행, 열)

 

 

구조

table > tr > td

: 칸의 기본적인 성격은 y축 상의 middle로 되어있다.

 

 

관련태그

- table : table 전체를 감싸는 태그

- tr :  table row, 테이블의 행을 의미하는 태그  (자손으로 <th>나 <td>가 반드시 있어야 한다.)

- td : table data, 테이블의 일반 셀(칸)을 의미하는 태그  (부모인 <tr> 안에 위치해야한다.)

- th : table header, 테이블의 제목 셀(칸)을 의미하는 태그  (부모인 <tr> 안에 위치해야한다.)

         - base-style : text-align:center; (중앙정렬)

                          font-weight:bold; (두껍게)

- caption : table의 제목이나 설명을 작성하는 태그

         -  base-style : text-align:center; (중앙정렬)

          * figcaption : 표에 제목을 붙일 때 사용한다. 제목이 중앙에 표시되지 않는다.

 

 

 

 

 

병합 속성

- rowspan="합쳐지는 열의 개수" (가로셀의 합)

- colspan="합쳐지는 행의 개수" (세로셀의 합)

 

 

colspan과 rowspan을 할 때에는 위의 코드처럼 합쳐지는 영역을 비워(?)줘야한다.

 

 

 

 

표의 구조

- caption : 표의 제목

- thead : 표의 머리(내용의 제목)

- tbody : 표의 부분 (본문)

- tfoot : 표의 하단부분 (요약)