HTML4 - Table (테이블)

◎ 테이블요소

​

▼ caption 표의제목

기본값이 표의 바깥 위에서 가운데 정렬 (표의크기에서)

<table> <caption>표의 제목</caption> </table>

​

▼summary 표의요약글

시각장애인 전용 속성

브라우저에 시각적으로 표현되지는 않음

표의양이 얼마인지 가늠도안되고 양이 방대하니 요약글을 먼저 듣고 넘길지 아님들을지 선택할수잇게 요약글을 넣어주는거다

<table summary="요약"> <caption>표의 제목</caption> </table>

​

▼<colgroup>,<col> 열의 그룹

<caption> 요소 다음에 위치함

첫번째 <col>요소는 표의 좌측 첫 번째 셀부터 적용됨

가로사이즈 (width)만 지정가능

<table> <colgroup> <col width="200px"> <col width="20%"> </colgroup> </table>

​

▼테이블 그룹 (thead , tfoot , tbody)

표는 유동적인 사이트로 관리하기위해서 (반응형)

그래서 표는 px보다 %로 입력해주는게 좋다

테이블의 행의그룹 thead -> tfoot -> tbody 순으로 제공

모든 행의 그룹을 제공하지 않아도 된다. - 콘텐츠의 구성에 따라 유동적으로 달라진다.

<thead> 에는 제목셀인 <th>만 제공할 수 있다.

<tfoot> <tbody> 에는 제목셀 <th>,내용셀 <td> 을 복합적으로 제공할수있다.

<table> <thead> <tr> <th>수강생 </th> <tr> </thead> <tfoot> <tr> <th>합계</th> <td>10명</td> </tr> </tfoot> <tbody> <tr> <td>10명</td> </tr> </tbody> </table>

▼tr , th , td

tr (table row = 행)

​

th (table header cell 제목셀)

기본 css : 가운데정렬 , 굵은글씨 , 세로 가운데 정렬

​

td (table data cell)

기본 css : 좌측정렬 , 세로 가운데 정렬 , 기본글씨

---

◎ rowspan , colspan

​

▼rowspan

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공

▼colspan (column 의 약자)

<th> , <td> 병합. 병합하려는 첫 번쨰 행의 셀에 제공

---

​

​