나라디자인

HTML 4 규격 > table

표는 보이지 않는 장치(스크린 리더, 점자 출력기 등)에서 문서를 표현 할 때 문제를 일으킬 수 있으므로 문서 내용의 배치(레이아웃) 만을 위하여 사용해서는 안된다. 배치용 테이블은 그래픽과 함께 사용 될 때, 수평으로 넓은 화면을 보기 위하여 좌우 스크롤 하도록 강요될 수 있다. 문제를 최소화 하기 위하여, 제작자는 배치를 위한 표 대신 스타일쉬트를 사용하여야 한다.

WCAG 5.1

데이터가 들어있는 표에는 제목 행과 제목 열(통칭하여 header)을 명시한다. [중요도 1]

WCAG 5.2

두 개 이상의 논리적인 제목 행이나 제목 열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다. [중요도 1]

WCAG 5.3

표 내용을 펼쳐서 순서대로 나열했을 때에 의미가 없는 경우 또는 내용물의 자리 배치만을 위해 표를 사용하지는 말것. 내용물을 배치하려는 목적으로 표를 쓴다면, 대안적인 대체 정보(표를 풀어서 순서대로 나열한 것(linearized version) 등)를 제공한다. [중요도 2]

WCAG 5.4

만약 자리 배치를 위해 표를 사용한다면, 시각적인 형식을 맞추기 위해 구조 표시용 마크업을 사용하지 말것. [중요도 2]

WCAG 5.5

표의 요약 정보를 제공하라. [중요도 3]

KWCAG 3.1

데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

일단, 표를 레이아웃용으로 사용하고 있는 국내의 현실은 매우 크게 잘못된 행태로서 그것은 HTML 규격에 맞지 않고 접근성 지침에도 위반 됩니다. 지침을 위반하는 것은 곧 웹 문서에 대한 접근성을 훼손하는 행위인데 아직까지 학원과 학교에서는 이렇게 가르치고 있는 경우가 태반입니다. 보따리 싸들고 다니면서 말릴 수도 없고 이 땅의 교육을 짊어진 분들의 책임의식이 필요 합니다.

레이아웃용 표를 사용한 경우 표를 볼 수 없는 장치(스크린리더, 점자출력기)에서는 표를 읽을 때 셀과 셀 사이의 논리적인 흐름과는 관계없이 표의 좌측 상단부터 우측하단으로(Z 형태) 읽어내려가게 됩니다. 따라서 표를 이용한 레이아웃 배치 습관은 콘텐트를 분할(division)하기 위한 전용 태그인 <div> 마크업과 CSS 코딩 행태로 바뀌어야 합니다. 그렇게 되면 콘텐츠의 배치를 논리적인 순서에 맞게 읽혀지도록 정렬 할 수 있습니다. 표는 행과 열을 이용하여 데이터를 표현하기 위한 경우에만 마크업 합니다.

드림위버에서 표를 삽입할 때에는 표에 관련된 접근성 관련 속성을 함께 입력할 수 있고 다음과 같은 순서를 갖습니다.

1. 표 삽입 단축키 Ctrl+Alt+T 를 누릅니다.
2.  테이블 삽입 대화상자가 열립니다.
   
3. Table Size 항목을 작성 합니다. Rows(행) 갯수, Columns(열) 갯수 등등… (이 부분은 굳이 설명 안해도 되겠지요?)
4. Header 항목에서는 머리글의 위치를 결정 합니다.
   Left, Top, Both 가운데 하나를 선택하게 되면 해당 셀은 <th> 태그로 마크업 되고 헤더 셀에 대한 scope 속성이 자동으로 삽입 됩니다. (예: <th scope="col">, <th scope="row">) scope 속성은 현재의 셀이 다른 셀과 논리적인 관계를 가질 때 그 유효범위를 지정하는 속성 입니다. scope 속성은 스크린 리더기를 이용하여 표를 읽을 때 무조건 좌우상하로 읽지않고 논리적인 순서를 유지하면서 읽도록 도와주기 때문에 접근성 측면에서 매우 중요한 속성 입니다.
   • None : 헤더셀을 사용하지 않는 경우
   • Left : 헤더셀을 왼쪽에 두는 경우
   • Top : 헤더셀을 위쪽에 두는 경우
   • Both : 헤더셀을 왼쪽과 위쪽에 모두 두는 경우
5. Accessibility > Caption 항목에는 표의 제목을 입력 합니다.
   <table> 과 <tr> 사이에 <caption> 태그가 마크업 됩니다.
6. Accessibility > Align caption 항목에는 Caption 의 align(좌, 우, 중앙 정렬) 속성을 지정할 수 있는데 align 속성은 현재 폐기 되었습니다. 문서의 DTD가 Transitional(호환모드) 인 경우에는 이 속성을 사용할 수 있지만 가급적 스타일시트로 대체하거나 아예 사용하지 않는것이 좋습니다..
7. Accessibility > Summary 항목에는 표의 요약정보를 입력 합니다.
   <table summary="나라초등학교 1학년 1반 정아람의 성적표"> 와 같이 summary 속성과 값이 코딩 됩니다.
8. "OK" 버튼을 눌러 표를 삽입하고 표의 내용을 채웁니다.
9. 표의 헤더 <thead> 를 마크업 하기 위하여 첫번째 행을 모두 선택 하고 디자인뷰 하단의 태그선택기에서 <tr> 태그가 선택된 것을 확인 합니다. (태그선택기에서 직접 헤더 부분의 <tr> 태그를 선택해도 됩니다.)
   
10. 단축키 Ctrl+T 를 누르면 빠른태그편집기(Quick Tag Editor)가 실행되면서 Edit tag : <tr> 상태가 됩니다. 이 단계에서는 아무 작업도 하지 않고 바로 다음단계로 넘어 갑니다.
    
11. Ctrl+T 를 한번 더 누릅니다. 그러면 부모태그를 생성할 수 있는 Wrap tag : <> 상태가 됩니다. thead 를 입력하고 Enter 키를 눌러 빠른태그편집기를 빠져 나옵니다.
    
12. <thead> 를 제외한 나머지 셀은 여러개의 행을 선택하여 부모태그 <tbody> 으로 감싸주어야 하기 때문에 코드뷰 모드로 전환(Ctrl+` 뷰 모드 전환) 합니다. 남은 <tr> 행을 모두 선택한 다음 빠른태그편집기(Ctrl+T)를 이용하여 <tbody> 태그로 감싸줍니다.
13. 다음과 같은 표가 생성 되었습니다. (위에서는 표의 보더를 "0" 으로 설정 했지만 표가 보이도록 하기 위하여 border= "1" 으로 처리 하였음.)
    

    정아람의 2006년 성적표

    구분	1학기	2학기
    국어	88점	92점
    영어	80점	84점

스크린 리더 또는 점자출력기는 위 표를 다음과 같이 논리 정연하게 읽어주거나 출력할 것입니다.

• 표 제목 : 정아람의 2006년 성적표
• 표 요약 : 나라초등학교 1학년 1반 정아람의 성적표
• 표 머리글 : 구분, 1학기, 2학기
• 표 내용 : 국어 1학기 88점, 국어 2학기 92점, 영어 1학기 80점, 영어 2학기 84점

표가 못생겼다구요? CSS 보다는 시멘틱(의미론적)마크업이 웹 문서의 기초인지라 마크업을 먼저 다루었을 뿐 입니다. 예쁜것들은 꼭 나중에 나타난다는거~! 표의 외형은 곧 CSS 가 담당할 것입니다. CSS를 이용하면 표 제목에 해당하는 <caption> 의 위치를 원하는 대로 정렬한 다음 배경이미지 속성을 이용하여 블릿을 넣을 수 있습니다. 또한 표 셀의 border 및 background 속성으로 하여금 매우 쉽고, 아름답게 장식될 것입니다. 이 표는 10년은 너끈히 버틸만큼 튼튼한 명품 테이블 입니다. 표의 외형을 CSS 에게 맡기고 CSS 파일을 Import 하였을 때 수천수만개의 표 스타일도 한순간에 바꿔버릴 수 있다는점은 또다른 CSS의 매력이죠.

웹 표준은 여러분을 고달프게 하지 않습니다. 오히려 업무 효율을 크게 향상시켜 줍니다. 처음부터 쉽지는 않겠지만 웹 표준으로 전환하기 위하여 소모되는 시간과 비용은 곧 배가되어 연봉으로 다시 돌아올껍니다. 믿으세요.