본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

테이블 요소의 의미적 작성

최초 작성일
최종 수정일
이번 시간에는...
HTML table 태그를 보다 의미에 맞는 시멘틱 마크 업을 하기 위한 방법을 살펴봅니다. thead, tbody, tfoot, colgroup, caption태그와 summary, scopt 속성을 이용해서 보다 의미있게, 보다 높은 접근성을 가질 수 있도록 합니다.

지난 강의에서는 table 요소의 기본적인 요소와 보여지는 형태에 대해서 살펴보았습니다. 이번에는 이 table 요소를 더 의미 있게 만드는 요소와 속성들에 대해 살펴 보겠습니다.

caption 요소

caption(캡션) 요소는 표의 제목을 나타냅니다. 이 표의 제목 만으로도 표를 쉽게 이해할 수 있게 작성하는 것이 좋습니다.

이 요소는 table 요소의 가장 첫 번째 자식으로 와야 합니다. 또한 만약 표가 레이아웃을 잡기 위한 용도가 아니라면 필수로 넣으시기 바랍니다. (표준에는 문제가 없으나, 접근성에 있어서 필수입니다.)

summary 속성

이 속성은 table 요소에 넣는 속성입니다. 이 속성은 웹 브라우저에 시각적으로 보이지는 않지만, 스크린 리더로 표를 접근하는 사용자에게 더 많은 설명을 제공합니다.

접근성의 항목 때문에 이 속성을 넣었지만, 어떻게 넣어야 할지 몰라 caption 요소와 동일한 내용을 넣어버리는 경우가 있는데, 이런 행동은 하지 마시기 바랍니다. 이렇게 되면 중복된 내용의 반복만 할 뿐이어서, 실질적으로 안 넣는 것만 못한 결과를 만들어 냅니다.

사실 대부분의 웹 사이트에서 summary을 실질적으로 도움되게 작성하는 경우가 별로 없어, HTML5에서는 이 속성이 사라집니다. HTML5에서는 이 summary 속성대신 caption 요소의 내용을 더 이해하기 쉽게 작성하도록 권고하고 있습니다.

제 개인적인 생각에 이 속성이 비록 HTML5에서는 삭제되었으나, 현실적으로 caption의 내용 만으로는 스크린 리더로 접근하는 사람이 도표를 시각화하기 힘들 것이라 예상됩니다. 그렇기 때문에 HTML5 버전으로 작성하지 않는다면, 다음과 같이 이 summary 속성을 통해서 이 도표의 정보를 어떻게 접근해야 하는지를 설명해 주는 것이 유용하지 않을까 생각이 듭니다. 사실 이런 부분은 제가 실제로 경험해보지는 못한 부분이고 제 예상일 뿐이기 때문에, 이에 대해 더 좋은 의견이 주시면 감사히 적극 반영하겠습니다.

colgroup 요소

colgroup 요소는 하나 이상의 열(col)을 그룹 짓는데 사용하는 요소입니다. 이 요소는 caption 다음으로 올 수 있습니다. table에서 caption 처럼 반드시 있어야 하는 요소는 아닙니다.

colgroup 요소는 자식으로 col 요소를 가질 수 있으며, 만약 col 요소가 없다면, span 속성에 col의 개수를 지정한 정수 값이 들어가야 합니다. 또한 colgroup은 한 번 뿐 아니라 여러 번 작성될 수 있습니다.

다음은 colgroup을 이용해서 열을 그룹 짓고 스타일을 준 모습입니다.

참가자별 점수표
이름 나이 성별 100M 달리기 윗몸 일으키기
홍길동 22세 15.25 29
황진이 20세 16.12 41
참가자 평균 15.7 35
colgroup의 사용 예시

thead, tbody, tfoot 요소

이 thead, tbody, tfoot 요소는 table에서 행으로 구조적 의미를 가지게 합니다.

colgroup이 열(수직, col)을 그룹화 한다면, 이 세가지 요소들은 행(가로, row)을 그룹화 하는 역할을 합니다.

이 요소들은 table의 자식으로 올 수 있으며, caption과 colgroup 다음으로 올 수 있습니다. 또한 각 요소들이 모두 있어야 할 필요는 없습니다.

thead 요소

thead 요소는 열의 제목으로 구성된 행의 집합입니다. 이 요소는 table 요소에서 한 번만 쓸 수 있으며, tbody나 tfoot보다 먼저 선언되어야 합니다.

앞의 colgroup의 예시에 쓰였던 상단 열 제목들을 다음과 같이 쓸 수 있습니다.

tbody 요소

tbody 요소는 도표의 본문에 해당하는 영역을 나타냅니다. tbody는 thead나 tfoot과 달리 여러 번 선언되어 행을 그룹화 할 수 있습니다. 앞의 예시 도표에서 본문부분을 다음과 같이 쓸 수 있습니다.

tfoot 요소

tfoot 요소는 도표 하단에 나오는 열의 요약으로 구성된 행의 집합입니다. 이 요소 역시 thead와 같이 table 내에 한 번만 쓸 수 있으며, tbody보다 먼저 작성하더라도 표의 맨 마지막에 위치하게 나옵니다.

다음의 tfoot의 예시 입니다.

참가자별 점수표
thead 이름 나이 성별 100M 달리기 윗몸 일으키기
tbody 홍길동 22세 15.25 29
황진이 20세 16.12 41
tfoot 참가자 평균 15.7 35
thead, tbody, tfoot의 영역 그룹

scope 속성

이 scope 속성은 th 요소에서 사용할 수 있는 속성으로 해당 th 요소가 어느 셀에 영향을 미치는가를 지정 해줍니다. 다시 말해, 해당하는 이 th 요소가 어느 영역의 제목을 뜻하는 지를 정의 해주는 것입니다.

만약 th가 해당 행의 제목이라면 scope 속성 값은 row가 됩니다.

사용가능 속성 값

row
같은 행에 있는 셀들에 적용됩니다.
col
같은 열에 있는 셀들에 적용됩니다.
rowgroup
동일한 행 집합에 있는 다른 모든 셀에 적용됩니다. 요소가 행 집합을 가리킬 때에만 사용합니다.
colgroup
동일한 열 집합이 있는 다른 모든 셀에 적용됩니다. 요소가 열 집합을 가리킬 때에만 사용합니다.

여기서 row와 col은 좀 쉬울 수 있으나, rowgroup과 colgroup은 언뜻 와 닿지 않으실지 모르겠습니다.

row와 col은 각 셀이 속한 행 또는 열과 관련이 있는 반면, rowgroup과 colgroup은 각 셀이 속한 그룹핑 요소에(thead, tbody, tfoot과 colgroup) 관련이 있습니다. rowgroup을 쓴 th가 만약 tbody에 속해 있다면, 그 th는 tbody의 헤더가 되는 것입니다. colgroup을 넣었다면, colgroup의 헤더가 되는 것이고요.

다음의 도표 예시를 통해서 좀 더 쉽게 이해되시길 바랍니다. 각 셀에 괄호로 scope 값을 표시 했습니다.

참가자 별 점수 표
thead 참가자 (colgroup) 항목 (colgroup)
이름
(col)
나이
(col)
100M 달리기
(col)
윗몸 일으키기
(col)
tbody 남성 (rowgroup)
홍길동 (row) 24 15.44 31
임꺽정 (row) 31 16.3 28
tbody 여성 (rowgroup)
장옥빈 (row) 29 18.12 20
심청이 (row) 21 17.1 33
tfoot 평균 (row) 16.74 28
scope 속성 값 예시

table 요소는 아무래도 구조상 스크린리더로 접근하기 힘든 부분이 있고, 그 부분을 보완하기 위해서 앞의 내용들로 정보를 명시해 줘야만 합니다.

하지만, 그럼에도 불구하고, 표가 복잡해질 경우 스크린 리더의 접근이 어려워집니다. 그렇기 때문에 굳이 표로 표현하지 않아도 될 부분은 다른 방식으로 (li 같은 요소) 표현하는 것이 좋으며, 표를 작성하더라도, 표를 너무 복잡하지 않게 만드는 것이 좋습니다.

요점 정리
  • caption는 표의 제목을 나타내며, 무조건 table의 첫번째 자식으로 와야함.
  • summary 속성은 시각 장애인, 스크린 리더로 접근하는 분들에게 테이블을 어떻게 접근해야하는 지 안내.
  • colgroup 요소는 열(수직방향)들을 그룹화.
  • thead, tbody, tfoot 요소는 행(가로방향)들을 그룹화.
  • thead 요소는 테이블의 제목 그룹화. 한 번만 선언 가능하며, tbody나 tfoot 보다 먼저 위치.
  • tbody 요소는 테이블 본문을 그룹화. 여러번 선언 가능함.
  • tfoot 요소는 테이블의 하단 요약부분을 그룹화. 한 번만 선언 가능.
  • scope 속성은 th가 어느 영역의 제목인지를 명시.
  • 테이블 요소는 접근성이 어려울 수 밖에 없음. 작성 전 꼭 테이블로 작성해야하는지 고민해보고, 작성하더라도 복잡하지 않도록 구성.

이 글이 유용하셨다면 친구들에게 공유 해주세요.