티스토리 뷰
# table 접근성 코딩 (접근성코딩시 지켜야할 사항)
※ cospe="col , row" 접근성
<table summay="태이블 내용 설명" >
<caption>테이블 제목 입력</caption>
<colgroup>
<col width="13%" />
<col width="8%" />
<col width="*" />
<col width="31%" />
<col width="10%" />
</colgroup>
<thead> // 상단 제목줄
<tr>
<th scope="col" >세로 관련제목</th>
<th scope="col" >세로 관련제목</th>
<th scope="col" >세로 관련제목</th>
<th scope="col" >세로 관련제목</th>
<th scope="col" >세로 관련제목</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">가로관련 제목</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<th scope="row">가로관련 제목</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
<tfoot> // 하단 관련 구분이필요한경우
<tr>
<th scope="row">가로관련 제목</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tfoot>
</table>
※ id, headers 접근성
<table class="log" summay="학년 학기별 교과목 편성표 정보 입니다." >
<caption>공과대학 교과목 편성표</caption>
<colgroup>
<col width="5%" />
<col width="5%" />
<col width="15%" />
<col width="65%" />
</colgroup>
<thead>
<tr>
<th scope="col" class="first" id="grade">학년</th>
<th scope="col" id="term" >학기</th>
<th scope="col" id="divi" >교과구분</th>
<th scope="col" id="subj" >교과목명</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="year1_1" rowspan="9" class="first">1</th>
<th scope="row" id="term1_1" rowspan="9" >1</th>
<th scope="row" id="major1_1" rowspan="5" class="week">전공필수</th>
<td headers="year1_1 term1_1 major1_1 subj" >일반물리학개론</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >공학수학</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >조선해양공학개론</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >도면독도의 이해</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >조선해양 생산의 이해</td>
</tr>
<tr>
<th scope="row" id="culture1_1" rowspan="4">교양필수</th>
<td headers="year1_1 term1_1 major1_1 subj" >경제학원론</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >영어회화 I</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >한국사I</td>
</tr>
<tr>
<td headers="year1_1 term1_1 major1_1 subj" >동서양 고전의 이해</td>
</tr>
</tbody>
</table>
'HMLT&CSS&JS > 웹접근성' 카테고리의 다른 글
# img (alt , longdesc )설명글넣기 (0) | 2013.07.10 |
---|
- Total
- Today
- Yesterday