-
<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 를 사용
반응형'코딩스터디 > CSS' 카테고리의 다른 글
트랜지션, 애니메이션 속성정리 (0) 2021.04.22 [html,css 기초] Form 태그 정리 (0) 2021.04.20 반응형 작업(1) - 미디어 쿼리 (0) 2021.04.18 [css 기초] 포지셔닝(box-sizing, float, position, z-index) (0) 2021.04.18 [css기초] 블록요소, 인라인요소, display속성 (0) 2021.04.18 댓글