icon_home

12_테이블 태그

테이블 태그란?
- 테이블 태그는 표를 만들기 위한 태그로서
- table, tr(줄, 행), td(칸,셀), th(셀제목, table header), caption(설명, 제목)태그로 구성되어 있음

- 달력, 로그인, 회원가입, 약관내용 페이지, 문의하기 게시판, 공지사항 게시판 등에서 많이 사용됨


1. 테이블 태그의 기본 작성 법

표제목
셀제목셀제목
셀내용셀제목

- th태그셀제목을 작성 할 때 사용하는 태그 요소로서 글자가 진하게, 가운데 정렬되는 특징이 있음

- caption태그표제목, 설명문구를 넣고자 할 때 사용하며, 기본적으로 가운데 정렬되는 특징이 있음


2. 테이블 셀 병합하기 - colspan(가로병합), rowspan(세로병합)

가로줄 병합
셀제목셀제목
셀내용_가로병합은 colspan 속성을 사용함
세로줄 병합
셀제목셀제목
셀내용

웹표준, 웹접근성에 맞는 테이블 제작

- 웹 접근성을 위해 tfoot을 tbody의 순서를 위로 올려,
스크린리더를 통해 장애인분들이 스피커로 음성을 들을 때 표의 본문 내용을 먼저 읽기 보다는 아래 내용을 먼저 일어서 전체 내용을 빠르게 파악할 수 있기 때문에 순서를 변경해준다.

- t02에 테두리 색상은 빨강, 3px 이중선, 가로500px 서식적용


2학년 2학기 성적현황
성명국어점수수학점수합계
합계150150300
이순신80100180
홍길동7050120

실습예제

실습예제
순번제목담당부서첨부등록일
222입지기준확인신청서(공장등)경제과문서첨부 아이콘2014-12-17
221창업사업게획승인서식경제과v파일 아이콘2014-12-17
220공동산설등승인신청서서식경제과v파일 아이콘2014-12-17
219공장등록(변경)신청서서식경제과v파일 아이콘2014-12-17