티스토리 뷰

HMLT&CSS&JS/웹접근성

# table 접근성 코딩

turfrain 2013. 10. 18. 17:01

# 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