메뉴 보이기
Profile
이온디

2013.09.13

Table

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

조회 수 7988 추천 수 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 126
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19189
공지 [미분류] 관련 링크 2010.05.23 33820
160 [Script] 부모창 닫고 새창 띄우기 (by zero) 2004.05.13 5015
159 Show-Hide Layers(2) (by 태그매니아) 2009.02.10 8744
158 [Form] 입력 시 alt + S 먹히게 하기 2004.05.21 4853
157 [Form] 폼 이동 시(탭키 이용) 순서 정하기 (by 술도) 2004.05.21 5960
156 [미분류] 현재 필요한 팁(임시) 2004.05.22 5315
155 [HTML5] HTML 태그 그대로 노출하기 2004.05.22 8347
154 [Form] 새창에서 '확인' 누르면 부모창 리로드 시키기 (by 지진) 2004.05.22 6659
153 [HTML5] HEAD에 CSS, JS(자바스크립트), META 넣기 2004.05.24 19660
152 [PHP] <?echo($list_height)?> 의 쓰기 쉬운 변형 (by Hyunee) 2004.05.26 6144
151 [HTML5] 프레임 나누기 (좌/우, 상/하) 2004.05.28 10120
150 [Script] 웹페이지에서 특정 부분 감췄다보여주기 (by 위쯔) 2004.05.30 6008
149 [Script] 마우스를 올리면 레이어 뜨고 내리면 레이어 사라지는 스크립트 1 2004.06.08 6496
148 [CGI] Space Checker - 계정 하드용량과 DB용량 동시확인 2003.06.06 6385
147 [Form] form 태그의 기본적인 사용방법 2015.08.31 90
146 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
145 [Script] 클릭하면 경고창 뜨는 스크립트 1 2004.12.14 5634
144 [Script] ~한지 **일 되었습니다 (by kihwa) 2004.12.14 4857
143 [Script] 마우스 올렸을 때 바뀌는 커서 (by kiwha) 2004.12.14 4358
142 [Script] 클릭하면 닫히는 창 2005.04.28 5501
141 [HTML5] 자바스크립트와 CSS를 넣는 방법 2005.04.28 5778