각 *요소들이 모여 table을 구성하기 때문에 구성요소 중 하나인 caption이 absolute가 될 경우 위와 같은 문제가 생깁니다. absolute의 문제는 셀을 구성하는 요소(th,td)들에게도 영향을 미칩니다.

(*요소 = table을 구성하는 기본 요소 자세한 내용은 w3c 기술문서참고http://trio.co.kr/webrefer/html/struct/tables.html#h-11.2.1)

Caption 자식 요소로 제어할 경우, 문제를 해결 할 수 있습니다.

두 번째 자식요소로 제어하는 방법 이외에 직접 caption을 숨기는 방법.

직접 선언했을 때 문제가 되었던 position속성을 선언하지 않습니다.

.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}

è    caption{overflow:hidden;width:1px;height:1px;*height:0;padding:0;margin-top:-1px;font-size:0;line-height:0;text-indent:-999px}

자식요소제어 CSS속성과 직접 caption숨김 CSS속성이 왜 다른지 설명하겠습니다.

1.      width 0;height:0; -> width:1px;height:1px;*height:0;

width 와 height 값이 1px 영역을 가지게 됩니다,

리더기가 특정 브라우저에서 caption의 영역이 0일 경우 음성 출력이 지원되지 않는 문제가 있습니다.

2.      padding:0;margin-top:-1px

새로 추가된 속성입니다.

Font의 크기를 0으로 제어했음에도 IE7에서 영역이 나타납니다. (background: red 선언한 화면)

Padding으로 넓어진 caption의 영역을 제거합니다.

전체 height가 1px의 영역을 가지고 있기 때문에 1px의 공간을 margin으로 올려줍니다.

IE7에서는 margin속성이 적용이 안되기 때문에 height 값을 0으로 분기 처리합니다.

3.      text-indent:-999px

padding으로 영역을 제거하였지만. IE7에서 font가 점처럼 나타납니다. (color: red 선언한 화면)

text-inent 속성으로 보여지는 텍스트를 제거합니다.

마지막 Caption의 정보를 화면의 표현하는 방법입니다.

table상단의 타이틀을 제공하는 경우가 있습니다.

예시로 든 아래 화면은 테이블의 정보가 다르기에 상단의 타이틀을 제공한 경우입니다.

Caption의 정확한 사용은 table, 즉 표의 내용을 설명해 주는 제목 요소입니다.

그럼에도 h요소로 마크업 되는 경우가 많습니다.

h2로 교환사유를 구현한 후 caption을 숨김 처리한 경우

마크업을 확인하면 중복된 정보가 제공됩니다.

Table 상단에 h 요소가 아닌 caption요소가 정보를 제공 한다면

정보의 전달도 중복되지 않고, table을 이해하는데 더 명확하지 않을까요?

 

타이틀을 의미하는 요소로 h요소만 있는 것은 아닙니다.

Table의 caption을 숨기는 요소로만 생각하지 말고, 상황에 맞는 caption을 잘 적용하길 바랍니다.

[출처] http://blog.hivelab.co.kr/textyle/9687