메뉴 보이기
Profile
이온디

2013.09.13

Table

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

조회 수 7980 추천 수 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 111
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19184
공지 [미분류] 관련 링크 2010.05.23 33799
160 [Script] iframe 자동 리사이즈 6 2007.04.16 13615
159 Table to DIV 5 2008.12.25 3580
158 [HTML5] 이미지 롤오버 2 2007.04.17 8594
157 DIV와 Table for Layout 에 대한 코딩 이야기 2 2009.01.03 4201
156 [Meta] IE6의 이미지(그림) 툴바 기능 막기, 이미지 도구 모음 막기 2 2003.09.21 5159
155 [HTML5] 레이어1은 보이고 레이어2는 감추기 2 2004.04.23 5503
154 [Script] 링크 자동으로 onfocus="blur()" 붙이기 (by 후니) 2 2004.05.05 4474
153 [Form] 인풋 폼 이미지로 대체하기 1 2004.05.21 5208
152 [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 1 2004.06.04 13645
151 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5881
150 [Script] Iframe 크기 내용에 따라 자동조절하기 (by konahn) 1 2007.04.17 9582
149 [PHP] 사이트 테마 기능 구현하기 1 2007.04.18 5553
148 [Script] DIV 레이어 토글 1 2007.04.21 7834
147 [Script] PNG 알파 필터 사용하기 1 2007.04.21 10392
146 [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 1 2008.12.31 12379
145 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5608
144 [Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4431
143 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5137
142 Show-Hide Layers 클릭한 걸 기억하는 (by 알릭) 1 1 2009.02.03 6868
141 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5648