테이블 또는 데이터 테이블은 정보를 테이블 형식으로 보여주는 UI 요소다. 주로 테이블 헤더와 바디로 나뉘며, 정보의 정렬, 필터링, 비교, 이해를 돕는다.
사용 예시
테이블은 복잡한 정보를 효과적으로 조직하고 표시하는데 이용된다. 사용자가 정보의 특정 열을 기준으로 정렬하거나, 특정 항목을 선택하거나, 빠르게 정보를 비교하고 이해하는 데 도움이 된다.
주의점
- 테이블 헤더는 각 열의 내용을 명확하게 설명해야 한다. 또한, 사용자가 각 열을 기준으로 정보를 쉽게 정렬할 수 있도록 기능을 제공해야 한다.
- 테이블은 이해하기 쉽게 데이터를 정렬하고, 필요한 경우 셀 내에서 색상, 글꼴, 라인을 사용하여 정보를 시각적으로 구분할 수 있도록 해야 한다.
- 테이블과 페이지네이션, 검색 기능 등 다른 UI 요소가 결합하여 사용될 때, 이들이 서로 간섭하지 않고 잘 동작하도록 설계해야 한다.
참조
- 머티리얼 디자인 : https://m2.material.io/components/data-tables
- Bootstrap : https://getbootstrap.com/docs/5.0/content/tables/