1. 테이블 구성
1) 테이블 기본 태그
<table>
테이블의 시작과 끝을 정의
<body>안에 있어야 하고 테이블의 헤더, 행을 넣을 수 있음
<tr>
새로운 행의 시작과 끝을 정의
<table>안에 있어야 하고 셀을 넣을 수 있음
<td>
새로운 셀의 시작과 끝을 정의
<tr>안에 있어야 하고 컨텐츠와 다른 테이블을 넣을 수 있음
<th>
<td> 대신 사용하여 제목셀 정의
2) 셀 병합 : 열 병합을 위한 colspan, 행 병합을 위한 rowspan
<table border="1">
<tr>
<td colspan=“2”>1행1열</td>
<td 1행3열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
</tr>
</table>
| 1행1열 | ||
| 2행1열 | 2행2열 | 2행3열 |
<table border="1">
<tr>
<td rowspan=“2”>1행1열</td>
<td> 1행2열</td>
<td> 1행3열</td>
</tr>
<tr>
<td>2행2열</td>
<td>2행3열</td>
</tr>
</table>
| 1행1열 | 1행2열 | 1행3열 |
| 2행2열 | 2행3열 |
3) 열 그룹화 요소
col
- 스타일을 지정할 목적으로 열을 그룹 지을 때 사용
- 빈 요소
- width 속성으로 각 열의 너비 비율 조정 가능
colgroup
- 논리적으로 열을 그룹 짓기 위해 <col>을 묶을 때 사용
4) 행 그룹화 요소
- 열 그룹화 요소 뒤에 지정
<thead>, <tfoot>
- 한번만 사용하여 헤더 행과 푸터 행 정의
- 종이에 인쇄 시 각 페이지 상단과 하단에 헤더와 푸터 영역을 반복해서 표시
- IE에서는 지원하지 않으므로 CSS를 사용
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
<tbody>
- 여러 번 사용 가능
- <thead>, <tfoot>, <tbody>의 순서로 사용
예제)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML lang="ko" xml="ko">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<table border=1 summary="영미웹에서 출판된 책">
<caption>영미웹에서 출판된 책</caption>
<thead>
<tr><th>출판사</th><th>책이름</th>
<th>출판일</th><th>페이지수</th></tr>
<tfoot><tr><td colspan="4">관련 도서가 계속 출간중입니다.</td></tr></tfoot>
<tbody>
<tr><td rowspan="2">영미웹</td>
<td>드림위버</td><td> 2012.09.01 </td><td>455쪽</td></tr>
<td>begin HTML</td><td> 2012.10.20 </td><td>303쪽</td></tr>
</tbody>
</table>
</BODY>
</HTML>
2. 테이블의 웹 접근성 요소
1) 테이블 제목과 요약
caption 요소
- 테이블 제목
- <table> 시작 태그 바로 뒤에 입력
summary 속성
- 테이블 요약문
- <table> 태그에 사용
- 브라우저에서 렌더링 되지 않음
- HTML5에서 제외됨
2) scope가 사용된 테이블
3) 셀 테두리 병합
- border-collapse 프로퍼티 사용
- 속성값은 separate, collapse
예제)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>테이블 만들기</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
padding: 20px;
font-family: 'Nanum Gothic', serif;
color: #333;
font-style: normal;
font-size: 13px;
line-height: 28px;
}
table {
width: 600px;
border-collapse: collapse;
}
thead{background:rgb(0,97,178);color:white;}
table.mine td{padding-left:10px;}
tbody tr:nth-child(odd){background:RGB(231,234,242);}
caption{font-weight:bold;padding-bottom:10px;}
</style>
</head>
<body>
<table class="mine" border="1">
<caption>영미웹의 책 목록</caption>
<colgroup>
<col width="20%">
<col width="45%">
<col width="20%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th>출판사</th>
<th>책이름</th>
<th>출판일</th>
<th>페이지수</th>
</tr>
</thead>
<tbody>
<tr>
<td>영미웹</td>
<td>드림위버</td>
<td>2012.09</td>
<td>455쪽</td>
</tr>
<tr>
<td>영미웹</td>
<td>Begin HTML</td>
<td>2013.12</td>
<td>303쪽</td>
</tr>
<tr>
<td>영미웹</td>
<td>HTML5 프로그래밍</td>
<td>2013.04</td>
<td>478쪽</td>
</tr>
<tr>
<td>영미웹</td>
<td>HTML5 IOS WEBAPPS</td>
<td>2013.11</td>
<td>303쪽</td>
</tr>
</tbody>
</table>
</body>
</html>
'웹접근성과 웹표준' 카테고리의 다른 글
| 사이트 제작시 웹 접근성 고려 사항 (0) | 2013.07.23 |
|---|---|
| 폼(FORM)의 웹 접근성 요소 (0) | 2013.07.22 |
| 배경: 백그라운드 (background) (0) | 2013.07.20 |
| CSS 박스 모델의 이해 (0) | 2013.07.20 |
| CSS 규칙과 선택자 (0) | 2013.07.20 |
