HTML - 테이블 scope 속성에 대하여

아주 기본적인 사항이라 웹표준과 마크업 좀 공부하신다 하는 분들은 이미 다 알고 계시겠지만 그래도 포스팅 해볼까 합니다 ^^

scope="row" 와 scope="col" 을 붙이는 이유는 쉽게 말해 스크린 리더기를 사용하는 사용자가 오직 귀로만 테이블의 정보를 얻어야 할 경우,

테이블의 데이타를 인식하고 읽는 순서를 결정하기 때문입니다.

웹표준, 접근성을 고려해서 홈페이지를 제작 하신다면 반드시 준수해야 할 사항입니다.

흔히 쓰이는 data table 기본 폼입니다.

구분1	구분2	구분3	비고
구분 A
구분 B
구분 C

이럴때 구분1,구분2,구분3 등 thead 영역에 해당하는 라인에는 scope="col" 이 붙습니다.

ex) <th scope="col">구분1 </th>

<th scope="col">구분2 </th>

그리고 구분1 아래 구분 A,b,c열에는 scope="row" 가 붙는게 맞습니다.

ex) <th scope="row">가 </th>

가나다 열의 경우, 필요에 따라서 th가 아니라 td 로 써도 무방합니다.

내용을 적는 하얀 공백에는 scope=""를 넣지 않습니다.

아래와 같은 좀더 복잡한 구조의 데이타 테이블의 경우도 있습니다.

전체 구분1	구분 1
	구분 1-1	구분 1-2	구분1-3
구분 A	내용 1-1-A	내용 1-2-A	내용 1-3-A
구분 B	내용 1-1-B	내용 1-2-B	내용 1-3-B
구분 C	내용 1-1-C	내용 1-2-C	내용 1-3-C

테이블의 전체소스를 공개하자면

<table width="100%" summary="데이타테이블 설명" class="datatable">
<caption>표제목</caption>
<thead>
<tr>
<th rowspan="2" scope="col">전체 구분1 </th>
<th colspan="3" scope="colgroup">구분 1 </th>
</tr>
<tr>
<th scope="col">구분 1-1 </th>
<th scope="col"> 구분 1-2 </th>
<th scope="col">구분1-3</th> 
</tr>
</thead>
<tbody>
<tr>
<th scope="row">구분 A</th>
<td>내용 1-1-A</td>
<td>내용 1-2-A</td>
<td>내용 1-3-A</td>
</tr>
<tr>
<th scope="row">구분 B</th>
<td>내용 1-1-B</td>
<td>내용 1-2-B</td>
<td>내용 1-3-B</td>
</tr>
<tr>
<th scope="row">구분 C</th>
<td>내용 1-1-C</td>
<td>내용 1-2-C</td>
<td>내용 1-3-C</td>
</tr>
</tbody>
</table>

구분 1에는 scope="colgroup" 를 넣어줘야 합니다.

만약 구분1 처럼 병합셀이 행이 아닌 열에 있다면 반대로 scope="rowgroup" 이라고 표시하면 됩니다.

이런 형식의 form table도 자주 쓰이는 기본 테이블 중 하나입니다.

이름	홍길동
아이디	hong
비밀번호	****
휴대전화	010-0000-0000

이름, 아이디, 비밀번호 등은

<th scope="row">이름</th> 로 쓰는게 맞습니다.

그리고 역시 오른쪽 열의 홍길동, hong에는 비워둬야 합니다.

 

 

출처 : 

영의 귀 있는 자는 들으라. - 마태복음24장 (daum.net)

Table th 와 scope , 그리고 scope="row", scope="col"