메뉴 보이기
Profile
이온디

2013.09.13

Table

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

조회 수 7979 추천 수 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 109
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19181
공지 [미분류] 관련 링크 2010.05.23 33798
158 [미분류] 특정도메인으로 접속시 원하는도메인으로 리다이렉트 시키기 2010.01.31 19829
157 [HTML5] HEAD에 CSS, JS(자바스크립트), META 넣기 2004.05.24 19660
156 [Script] 부드럽게 슬라이딩 되면서 펼쳐지는 메뉴 (세로, 사이드메뉴) 10 2009.01.20 14209
155 [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 1 2004.06.04 13644
154 [Script] iframe 자동 리사이즈 6 2007.04.16 13615
153 [Script] 레이어컨트롤 마우스오버 드롭다운 메뉴 2 2009.02.10 12551
152 [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 1 2008.12.31 12379
151 [Script] 전체화면 레이어 팝업 소스 2013.08.09 12050
150 [미분류] 태터에 제로보드 넣기 & Next, Prev 버튼 감추기 (by SkyRejoice) 2007.08.27 11303
149 [Script] PNG 알파 필터 사용하기 1 2007.04.21 10392
148 자바스크립트 TAB 메뉴 2009.01.20 10251
147 [HTML5] 프레임 나누기 (좌/우, 상/하) 2004.05.28 10084
146 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 동철) 2009.02.23 9875
145 [Script] 페이지 이동 (메타태그, 자바스크립트, PHP) 2003.09.24 9803
144 [HTML5] dl, dt, dd 용례 2009.01.29 9762
143 [HTML5] pre 태그랑 xmp 태그의 차이점 1 2007.08.20 9668
142 [Script] 마우스오버 드롭다운 메뉴 (알릭님 수정본) 2009.01.30 9610
141 [Script] Iframe 크기 내용에 따라 자동조절하기 (by konahn) 1 2007.04.17 9582