메뉴 보이기
Profile
이온디

2013.09.13

Table

웹 접근성을 고려한 기본 테이블 구조 (html5, table, 웹 접근성, 웹 표준)

조회 수 7977 추천 수 0
소스 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table {width: 500px; margin: 10px; border-top: 2px solid red;}
.table table{width:100%}
.table caption {visibility: hidden; height: 0; }
.table thead th,
.table tbody th,
.table tbody td {border: 1px solid #DDD; vertical-align: middle; padding: 5px 10px;}
.table tbody > tr > th {font-weight: bold;}
.table thead {font-weight: bold; }

</style>
<body>

<div class="table">
<table summary="이 표는 부서, 번호, 이름, 전화번호 순서로 구성된 표입니다." border="0" cellpadding="0" cellspacing="0">
<caption><strong>명단</strong><details><p>일단은 2명만</p></details></caption>
<thead>
<tr>
<th scope="col">부서</th>
<th scope="col">번호</th>
<th scope="col">이름</th>
<th scope="col">전화번호</th>
</tr>
</thead>

<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>

<tbody>
<tr>
<th scope="row" rowspan="2">퍼블리싱</th>
<td>1</td>

<td>홍길동</td>
<td>010-0000-0000</td>
</tr>
<tr>
<td>2</td>

<td>이온디</td>
<td>010-2132-0000</td>
</tr>

<tr>
<th scope="row" rowspan="2">디자인</th>
<td>3</td>
<td>김순이</td>
<td>010-1234-1245</td>
</tr>

<tr>
<td>4</td>
<td>최철이</td>
<td>010-1234-1245</td>
</tr>

</tbody>



</table>
</div>


</body>
</html> 

이미지 1.png

다운로드 ]


행과 열이 제목과 내용으로 표현된 구성입니다.

제목행과 제목열이 포함된 테이블 구조입니다.


그리고 최상단에 빨간색 보더값을 준 이유는 div로 감싼 점을 보여드리기 위해 표현하였습니다.

보통 table이나 thead 에 보더값을 주지만 그럴 경우 IE에서 td의 세로 보더에 가려져서 안 이쁘게 됩니다.


그래서 최상단 줄을 표현하기 위해 따로 div로 감싸줬습니다.

만약에 부서, 번호, 이름, 전화번호 열마다 보더의 색상이 달라지는 구조라면 좀 더 연구를 해봐야겠네요. :)


summary를 표현하는데 최적화된 요약 설명입니다.

caption은 되도록이면 간단하게 설명하는 것이 좋습니다.

행제목, 열제목은 td가 아닌 th로 해야합니다.

th에는 scope="*"를 써 줍니다.

scope 값에는 row인지 col인지 구분해서 넣어줍니다.


Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 106
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19177
공지 [미분류] 관련 링크 2010.05.23 33744
159 [HTML5] HTML5 New Elements - New Semantic/Structural Elements 2018.01.07 35
158 [웹폰트] 모빌리어스 웹폰트 사용하기 2015.11.19 186
157 [Form] form 태그의 기본적인 사용방법 2015.08.31 84
156 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015.08.27 208
155 임시 이미지 생성 도구, 플레이스 홀더 placehold.it 2015.08.05 170
154 [Form] form 태그 안에서의 button 태그의 사용 방법(button, a, input type=submit) 2015.06.21 245
153 [jQuery] jQuery Image Slider and Gallery 2015.05.27 403
152 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 2014.09.29 1367
151 [Script] 슬라이드 이미지 2014.06.16 3246
150 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014.06.16 3232
149 [Script] marquee 태그 위에 마우스 올렸을 때 자동스크롤 일시정지.. event 2014.02.11 3851
148 [Form] 셀렉트박스 select 화살표 이미지로 바꾸는 스크립트 2014.01.14 8598
147 [HTML5] ie에서만 사용하는 if IE 사용법나의일 2013.11.07 4050
146 [Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4428
145 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
[Table] 웹 접근성을 고려한 기본 테이블 구조 (html5, table, 웹 접근성, 웹 표준) 2013.09.13 7977
143 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013.09.08 4376
142 [HTML5] [HTML5/CSS3] 멀티미디어 태그 (video, audio, embed, canvas) 2013.09.06 4250
141 [반응형 웹] 전진님의 반응형 웹 강좌 2013.08.18 5174