전문가 상담

HOME > 지식마당 > 온라인 자문서비스 > 전문가 상담
DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요?
DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요?
작성일 2017-05-16 오전 11:14:53 작성자 손동찬
첨부파일
  • 등록된 첨부파일이 없습니다.
DIV로 (display: table 이나 table-cell을 통한) 테이블을 구성하였는데
이러한 경우에 웹접근성을 맞추려면 어떻게 해야할까요?

//////////////////////소스/////////////////////////////////

<!-- DIV로 테이블 교체 -->
<style>
.table {
display: table;
border-collapse: collapse;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
padding: 10px;
border: 1px solid #666;
vertical-align: middle;
text-align: center;
}
.th {
display: table-cell;
padding: 10px;
border: 1px solid #666;
vertical-align: middle;
background: #6e6f73;
color: #fff;
text-align: center;
}
.table_inner {
display: table;
}
.table_inner .td {
padding: 0;
border: none;
}
</style>

<div class="table" style="width: 100%;">
<div class="tr">
<p class="th">학과명</p>
<p class="th">대상</p>
<p class="th">모집</p>
<p class="th">지원</p>
<p class="th">비율</p>
</div>

<!-- 임상병리과 -->
<div class="tr">
<!-- 학과명 -->
<div class="td">
<h3>임상병리과</h3>
</div>
<!-- 대상 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">일반</p></div>
<div class="tr"><p class="td">지역고교</p></div>
<div class="tr"><p class="td">리더쉽</p></div>
</div>
</div>
<!-- 모집 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">60</p></div>
<div class="tr"><p class="td">35</p></div>
<div class="tr"><p class="td">4</p></div>
</div>
</div>
<!-- 지원 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">391</p></div>
<div class="tr"><p class="td">104</p></div>
<div class="tr"><p class="td">4</p></div>
</div>
</div>
<!-- 비율 -->
<div class="td">
<div class="table_inner" style="width: 100%;">
<div class="tr"><p class="td">6.52</p></div>
<div class="tr"><p class="td">2.97</p></div>
<div class="tr"><p class="td">1</p></div>
</div>
</div>
</div>
</div>

전문가상담 목록
번호 분류 제목 작성자 작성일
10265 일반 DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요? 손동찬 2017-05-16
10267 일반  전문가 답변DIV로 테이블 작업시 웹접근성을 맞출 수 있을까요? 한정기 2017-05-16

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)

위로가기