본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다. 기본적으로 대화형 요소가 아니기 때문에 열 제목에 데이터를 정렬하기 위한 컨트롤 요소가 포함된 상황 외에 행 전체나 데이터 셀이 대화형으로 작동하지 않는다.

컴포넌트명

표 (Table)

표(테이블) 구조 예시

  1. 1.헤더

    각 데이터 셀의 제목
  2. 2.

    서로 다른 유형의 데이터를 보여줌
  3. 3.디바이더

    행과 행 사이를 시각적으로 구분하는 수단
  4. 4.데이터 셀

    행을 구성하는 데이터 요소
  5. 5.스크롤

    웹 화면에서 표의 내용이 많아 가로 영역이 길어질 경우 사용됨

유형

Table_horizontal

테이블스타일 예시
th th th
th td td
th td td
th td td
코드 보기

유형

Table_vertical

Type데이터에 따라 배열 방식을 선택하여 사용한다.

Ver.1

테이블스타일 예시
th td th td
th td th td
th td th td

Ver.2

테이블스타일 예시
th td
th td
코드 보기

유형

Table_sub

테이블스타일
th th th
th td td
th td td
코드 보기

가이드

  • 표는 데이터 잘림 없이 표시될 수 있는 영역에 사용한다. 아코디언, 모달과 같이 공간의 제한으로 인해 데이터가 잘리거나 데이터 확인을 위해 가로 스크롤을 사용해야 하는 영역에는 표를 사용하지 않아야 한다. 필요한 경우, 각각의 열이 아래로 떨어지도록 배치한다.
  • 열 구분선의 사용을 지양한다. 열 구분선은 표 콘텐츠를 구조화하거나 구분하는 데 도움이 될 수 있으나 시각적인 복잡성을 높이므로 반드시 필요한 경우를 제외하고 사용하지 않는 것이 바람직하다.
  • 양적 데이터를 전달하기 위한 숫자는 오른쪽으로 정렬한다. 개수, 퍼센트, 용량 등의 양적 데이터는 셀에서 오른쪽으로 정렬하여 사용자가 숫자를 더 잘 비교할 수 있도록 해야 한다. 숫자를 오른쪽으로 정렬하면 단위 구분 기호(, %, KB 등)가 일관된 위치에 배치되므로 가독성을 높인다.
  • 데이터 값이 존재하지 않는 경우 셀을 비워두지 않고 대시(-)를 제공한다. 데이터 셀에 아무런 텍스트가 표시되지 않으면 사용자에게 혼동을 줄 수 있으므로 빈 셀에는 대시 기호를 표시하여 이용할 수 있는 정보가 존재하지 않음을 안내해야 한다.
  • 화면 너비가 충분하지 않은 경우 표 영역에 가로 스크롤을 사용하는 방안을 고려한다. 행과 열 간의 관계 표현이 유지되어야 하거나 구성이 복잡하다면 셀의 배치를 변경하지 않고 표 섹션에 가로 스크롤을 생성할 수 있다. 만약 표에 열 헤더가 존재한다면 가로 스크롤의 위치가 변경되더라도 열 헤더를 화면의 왼쪽에 고정함으로써 데이터를 탐색하는 과정의 편의성을 높일 수 있다.