[html,css 기초] table태그 총 정리

 

 

<table> 태그

-테이블은 게시판, 데이터 관리 할 때 유용하게 쓰입니다.

-테이블은 기본적으로 줄(행 rows)과 칸(열 column)으로 구성되어 있습니다.

 

 

 

1. 테이블 기본태그

<tr>태그 : table row

테이블에서 하나의 줄에 해당하는 행(row) 을 정의하는 태그

 

<td>태그 : table data

테이블에서 데이터가 표시되는 표준 셀을 정의하는 태그

  - 반드시 <tr> 태그 내에서 사용

  - 셀 내용 > 왼쪽 정렬로 표시

 

<caption> 태그

테이블 전체에 해당하는 제목을 표시

  - 테이블 레이아웃에는 아무런 영향을 미치지 않음

  - 반드시 <table> 시작 태그의 바로 다음에 위치

  - <table>과 <caption> 태그 사이에 다른 어떤 태그도 위치 불가

  - <tr> 또는 <td> 태그 내에서 사용하면 무시

  - caption 태그를 쓰면 숨겨주기 ex) .h { position: absolute;  top: -9999px;  opacity: 0; }

 

 

 

 

 

2. 테이블 그룹핑 태그

<thead> , <tbody> , <tfoot> 태그

테이블에서 행 단위 콘텐츠를 각각 헤더, 본문, 푸터 부분으로 구분하여 그룹핑하는 태그

  - 테이블 레이아웃에는 영향을 미치지 않음

 

<thead> : 테이블의 행 그룹 중 제목 셀 그룹 / 테이블 내에서 한번 사용

<tbody> : 테이블의 본문 행

<tfoot>  : 레코드 내용의 소계, 합계 등 정보에 해당하는 / 테이블 내에서 한번 사용

 

 

<colgroup> 태그

하나 이상의 열들을 모아서 한번에 스타일을 지정하는 태그

- <caption> 태그 앞, <thead> 태그 전에 사용

- 스타일링 때문에 col를 쓸 필요가 없다. -> 스타일링은 css파일에 직접하기

- 그저 의미론적으로 사용

 

<col> 태그

지정한 열에 대해 서로 다른 포맷을 정의하는 태그

- <caption> 태그 내에서만 사용, 종료태그 없이 사용

 

 

 

 

 

 

3. 테이블 병합 속성

인접한 여러 셀을 하나의 셀로 병합하는 경우

 

 

<colspan="합쳐지는 칸수">

가로칸을 합칠 때는 합쳐지는 칸은 삭제 후 시작칸에 colspan="합쳐지는 칸수"

 

<rowspan="합쳐지는 칸수">

세로칸을 합칠 때는 합쳐지는 칸은 삭제 후 시작칸에 rowspan="합쳐지는 칸수"

 

가로, 세로칸을 모두 합칠 때는

- 합쳐지는 칸 가로세로 모두 삭제 후 시작칸에 rowspan, colspan을 모두 적용

 

 

 

 

 

그 외 속성들

 

border-collapse : collapse;

- 테이블 선을 단선으로

 

 

summary 속성

- 테이블의 내용을 설명해주는 속성

- 일반 웹 브라우저에서 시각적 효과는 없지만, 화면낭독기에서 사용자에게 테이블 요약정보를 제공하는 용도

 

 

scope 속성

- 제목셀과 내용셀의 관계를 지정

- 데이터의 의미와 관계를 파악하기 쉽도록 만들어줌

- 주로 th요소에 지정해 각각 어느쪽 방향에 대한 표제인지를 명시하기 위한 속성

- 행(가로) 방향에 대한 표제일 경우 scope=row,  열(세로) 방향에 대한 표제인 경우 scope=col 이라 지정합니다.

 

 

 

id, headers

- 복잡하게 병합된 테이블일 경우

- th는 id로 설정

- td는 headers 를 사용

 

 

scope 사용예시