웹상의 테이블 디자인 패턴
게시 됨: 2022-03-10테이블은 행과 열에 많은 양의 데이터를 표시하기 위한 디자인 패턴이므로 범주형 개체에 대한 비교 분석을 수행하는 데 효율적입니다. 테이블은 이미 2 세기 초에 이러한 목적으로 사용되었으며 세계가 디지털화되기 시작했을 때 테이블이 우리와 함께 했습니다.
웹이 표 형식의 데이터 표시를 지원하는 것은 불가피했습니다. HTML 테이블은 의미론적이고 구조적으로 적절한 방식으로 테이블 형식 데이터를 표시합니다. 그러나 HTML 테이블의 기본 스타일은 지금까지 본 것 중 가장 미학적으로 만족스러운 것은 아닙니다. 원하는 시각적 디자인에 따라 해당 테이블을 예쁘게 꾸미기 위해 CSS 전면에 약간의 노력이 필요했습니다. 10년 전, "Top 10 CSS Table Designs"라는 기사가 Smashing Magazine에 게시되었으며 오늘날에도 여전히 많은 트래픽을 받고 있습니다.
웹은 지난 10년 동안 많이 발전했으며 사이트 또는 애플리케이션을 표시되는 뷰포트에 맞게 조정하는 것이 그 어느 때보다 편리합니다. 접근성. 테이블은 당분간 인기를 끌지 못할 것 같으니 2019년에는 웹에서 테이블을 어떻게 생성할 수 있는지 봅시다.
CSS 전용 옵션
데이터 세트가 그렇게 크지 않고 페이지 매김 및 정렬과 같은 기능이 필요하지 않은 경우 JavaScript가 없는 옵션을 고려하십시오. 큰 라이브러리의 무게를 추가하지 않고도 화면 크기의 전체 영역에서 잘 작동하는 꽤 좋은 결과를 얻을 수 있습니다.
불행히도 접근성 측면에서 일부 DOM 조작을 위한 JavaScript의 도움 없이는 소수의 CSS 전용 옵션만 있습니다. 그러나 작은 데이터 세트의 경우 종종 충분합니다.
옵션 1: 아무것도 하지 않음
우리는 노력이 적은 시나리오로 시작할 것입니다. 데이터가 열이 적고 행이 많은 테이블에 맞는 경우 이러한 테이블은 처음부터 모바일에서 사용할 수 있습니다.

당신이 가질 수 있는 문제는 아마도 더 넓은 화면에 너무 많은 공간이 있다는 것입니다. 따라서 테이블의 max-width
너비를 최대 너비로 "캡"하고 좁은 화면에서 필요에 따라 축소되도록 하는 것이 좋습니다.
Pen Table #1: CodePen에서 (Chen Hui Jing)의 적은 열, 많은 행을 참조하십시오.
이러한 종류의 패턴은 데이터 자체가 텍스트의 행과 행이 아닌 경우 가장 잘 작동합니다. 숫자나 짧은 문구라면 별로 하지 않아도 될 것입니다.
옵션 2: 스크롤 스타일 지정
David Bushell은 오버플로를 호출하고 사용자가 더 많은 데이터를 보기 위해 스크롤할 수 있도록 하는 반응형 테이블에 대한 기술을 2012년에 작성했습니다. 이것이 정확히 반응하는 솔루션은 아니라고 주장할 수 있지만 기술적으로 컨테이너는 뷰포트의 너비에 반응합니다.

먼저 "기본" 오버플로를 살펴보겠습니다. 스크롤링 섀도우의 스타일이 전혀 다르기 때문에 기본 주위에 공기 인용문을 사용한다고 상상해보십시오. 그러나 이 경우 "기본"은 테이블이 어떤 식으로든 변형되지 않는다는 사실을 나타냅니다.
Pen Table #3: CodePen에서 Chen Hui Jing의 스크롤 스타일 지정(기본)을 참조하십시오.
그림자를 스크롤하는 이 기술은 Roma Komarov와 Lea Verou가 서로의 아이디어를 모아 마법을 만드는 데서 비롯되었습니다. 여러 그라디언트(선형 및 방사형)를 포함하는 요소의 배경 이미지로 사용하고 background-attachment: local
을 사용하여 내용을 기준으로 배경을 배치하는 방법에 달려 있습니다.
이 기술의 좋은 점은 그림자 스크롤을 지원하지 않는 브라우저의 경우 평소와 같이 테이블을 계속 스크롤할 수 있다는 것입니다. 레이아웃이 전혀 깨지지 않습니다.
또 다른 스크롤 옵션은 테이블 헤더를 행 구성에서 열 구성으로 뒤집으면서 <tbody>
요소의 내용에 수평 스크롤을 적용하는 것입니다. 이 기술은 Flexbox 동작을 활용하여 테이블의 행을 열로 변환합니다.
Pen 표 #3: CodePen에서 Chen Hui Jing의 스크롤 스타일(뒤집힌 머리글)을 참조하십시오.
display: flex
를 테이블에 적용하면 <thead>
와 <tbody>
를 모두 플렉스 자식으로 만들며 기본적으로 같은 플렉스 라인에 나란히 배치됩니다.
또한 <tbody>
요소를 플렉스 컨테이너로 만들어 그 안의 모든 <tr>
요소도 단일 플렉스 라인에 배치된 플렉스 자식으로 만듭니다. 마지막으로 모든 테이블 셀은 기본 table-cell
대신 block
으로 설정되어 있어야 합니다.
이 기술의 장점은 고정된 헤더 효과처럼 헤더가 항상 표시되므로 사용자가 데이터 열을 스크롤할 때 컨텍스트를 잃지 않는다는 것입니다. 한 가지 주의해야 할 점은 이 기술을 사용하면 시각적 순서와 소스 순서가 일치하지 않아 작업이 약간 직관적이지 않다는 것입니다.
일부 JavaScript에 뿌리기
앞에서 언급했듯이 display
값을 수정하여 테이블을 모핑하는 것과 관련된 레이아웃 옵션은 때때로 접근성에 부정적인 영향을 미치며 수정하려면 약간의 DOM 조작이 필요합니다.
또한, 페이지 매김, 정렬, 필터링 등과 같은 기능(활성화하려면 일부 JavaScript가 필요한 기능)을 포함하여 Andrew Coyle의 데이터 테이블을 디자인할 때 여러 사용자 경험 팁이 있습니다.
비교적 단순한 데이터세트로 작업하는 경우 이러한 기능 중 일부에 대해 고유한 기능을 작성하고 싶을 수 있습니다.
접근성 수정으로 차단할 행
내가 아는 한, 이 반응형 데이터 테이블 기술은 2011년 Chris Coyier의 CSS-Tricks 기사 "Responsive Data Tables"에서 나왔습니다.
이 기술의 요점은 미디어 쿼리를 사용하여 좁은 뷰포트에서 block
테이블 요소와 그 자식의 표시 속성을 전환하는 것입니다.

좁은 화면에서 테이블 머리글은 시각적으로 숨겨지지만 접근성 트리에는 여전히 존재합니다. 테이블 셀에 데이터 속성을 적용하면 CSS를 통해 데이터에 대한 레이블을 표시하는 동시에 HTML의 레이블 내용을 유지할 수 있습니다. 마크업과 스타일이 어떻게 보이는지 아래 CodePen을 참조하십시오.

CodePen에서 Chen Hui Jing의 Pen Table #2: Rows to Blocks를 참조하십시오.
원래 방법은 레이블 텍스트를 표시하는 의사 요소에 너비를 적용하지만 이는 레이블을 시작하는 데 필요한 공간의 양을 알아야 함을 의미합니다. 위의 예는 약간 다른 접근 방식을 사용하여 레이블과 데이터가 각각 포함하는 블록의 반대쪽에 있습니다.
플렉스 서식 컨텍스트에서 자동 여백을 통해 이러한 효과를 얻을 수 있습니다. 각 <td>
요소의 display 속성을 flex로 설정하면 의사 요소는 마치 원래 요소의 직계 자식인 것처럼 상자를 생성하므로 <td>
의 flex 자식이 됩니다.
그 후에는 유사 요소에 margin-right: auto
를 설정하여 셀의 내용을 셀의 맨 끝 가장자리로 밀어 넣는 문제입니다.
좁은 뷰포트 레이아웃을 수행하는 또 다른 접근 방식은 Grid와 display: contents
의 조합을 사용하는 것입니다. 지원하는 브라우저의 display: contents
에는 현재 접근성 문제가 있으며 이 방법은 해당 버그가 수정될 때까지 프로덕션에서 사용해서는 안 됩니다.
하지만 버그가 해결된 후 이 글을 읽고 있을 수도 있습니다. 이 경우 대체 레이아웃 옵션이 있습니다.
CodePen에서 Chen Hui Jing의 Pen Table #2: Rows to Blocks(alt)를 참조하십시오.
각 <tr>
요소는 display: grid
로 설정되고 각 <td>
요소는 display: contents
로 설정됩니다. 그리드 컨테이너의 직계 자식만 그리드 서식 컨텍스트에 참여합니다. 이 경우 <td>
요소입니다.
display: contents
이 <td>
에 적용되면 내용으로 "대체"됩니다. 이 경우에는 <td>
내의 의사 요소와 <span>
이 대신 그리드 자식이 됩니다.
이 접근 방식이 마음에 드는 점은 max-content
를 사용하여 의사 요소의 열 크기를 조정하는 기능으로, 열에 대한 너비 값을 수동으로 할당할 필요 없이 열이 항상 가장 긴 레이블의 너비가 되도록 할 수 있다는 것입니다.
앞으로 min-content
, max-content
및 fit-content
(CSS Intrinsic & Extrinsic Sizing Module Level 3에서 다룹니다)의 크기 조정 값이 일반 width
및 height
값으로 지원될 때 더 많은 옵션을 놓을 수 있습니다. 밖으로 일.
이 접근 방식의 단점은 테이블 셀에 콘텐츠가 없는 경우 추가 <span>
또는 <p>
가 필요하다는 것입니다. 그렇지 않으면 스타일을 적용할 방법이 없습니다.
단순 페이지 매김
이 예제는 div 대신 테이블 행에서 페이지를 매기기 위해 Gjore Milevski가 이 CodePen에서 수정한 기본 페이지 매기기 구현을 보여줍니다. 이전 섹션에서 논의한 "스타일 스크롤" 예제의 확장입니다.
CodePen에서 Chen Hui Jing의 Pen Table #4: Simple pagination을 참조하십시오.
레이아웃 관점에서 Flexbox는 다양한 뷰포트 크기에 걸쳐 페이지 매김 요소를 배치하는 데 매우 유용합니다. 프로젝트 디자인마다 요구 사항이 다르지만 Flexbox의 다양성을 통해 이러한 차이점을 적절하게 충족할 수 있습니다.
이 경우 페이지 매김은 페이지 중앙과 테이블 위에 있습니다. 뒤로 및 앞으로 탐색하기 위한 컨트롤은 넓은 화면의 페이지 표시기 양쪽에 있지만 4개 모두 좁은 화면의 페이지 표시기 위에 나타납니다.
order
속성을 활용하여 이를 수행할 수 있습니다. 이 속성은 소스 순서를 변경하지 않고 화면에 표시되는 방식만 변경하므로 콘텐츠의 시각적 재정렬은 항상 고려하여 수행해야 합니다.
단순 정렬
이 예는 Peter Noble이 텍스트와 숫자 모두를 수용하기 위해 이 코드 조각을 수정한 기본 정렬 구현을 보여줍니다.
CodePen에서 Pen #Table 5: Chen Hui Jing의 단순 정렬을 참조하십시오.
현재 어떤 열이 어떤 순서로 정렬되고 있는지에 대한 일종의 표시기가 있으면 유용할 것입니다. CSS 클래스를 추가하면 원하는 대로 스타일을 지정할 수 있습니다. 이 경우 표시기 기호는 대상 헤더를 클릭할 때 토글되는 의사 요소입니다.
단순 검색
이 예제는 각 테이블 셀의 모든 텍스트 내용을 반복하고 검색 입력 필드와 일치하지 않는 모든 행을 숨기기 위해 CSS 클래스를 적용하는 기본 필터링 기능입니다.
펜 표 #6: CodePen에서 Chen Hui Jing의 단순 필터링을 참조하십시오.
이러한 구현은 비교적 순진하며 사용 사례에서 요구하는 경우 대신 열별로 검색하는 것이 합리적일 수 있습니다. 이 시나리오에서는 각 입력 필드를 해당 열에 있는 테이블의 일부로 갖는 것이 좋습니다.
도서관에서 처리하도록 하십시오
위의 JavaScript 스니펫은 더 많은 양의 데이터가 포함된 테이블을 개선하여 해당 테이블의 사용자가 더 쉽게 사용할 수 있는 방법을 보여줍니다. 그러나 실제로 큰 데이터 세트의 경우 기존 라이브러리를 사용하여 큰 테이블을 관리하는 것이 합리적일 수 있습니다.
열 토글 패턴은 불필요한 열이 작은 화면에서 숨겨지는 패턴입니다. 일반적으로 저는 뷰포트가 좁기 때문에 콘텐츠를 숨기는 것을 좋아하지 않지만 Filament Group의 Maggie Costello Wachs가 제안한 이 접근 방식은 사용자가 숨겨진 열을 보다.
위의 기사는 2011년에 게시되었지만 Filament Group은 그 이후로 정렬, 행 선택, 국제화 등과 같은 기능을 포함하는 Tablesaw로 알려진 반응형 테이블 플러그인의 전체 제품군을 개발했습니다.
TableSaw의 열 토글 기능은 원본 기사의 예와 달리 더 이상 jQuery에 의존하지 않습니다. Tablesaw는 현재 jQuery에 의존하지 않는 유일한 라이브러리 중 하나입니다.
마무리
무수히 많은 테이블 디자인 패턴이 있으며 어떤 접근 방식을 선택하는지는 보유하고 있는 데이터 유형과 해당 데이터의 대상 고객에 따라 크게 달라집니다. 결국 테이블은 데이터를 구성하고 표시하는 방법입니다. 어떤 정보가 사용자에게 가장 중요한지 파악하고 사용자의 요구에 가장 적합한 접근 방식을 결정하는 것이 중요합니다.
추가 읽기
- "CSS 전용 반응형 테이블", David Bushell
- "접근 가능하고 단순하며 반응이 빠른 테이블" Davide Rizzo, CSS-Tricks
- "반응형 테이블 레이아웃", Matt Smith
- "반응형 패턴: 테이블", Brad Frost
- "이봐, 테이블을 사용해도 괜찮아" Adrian Roselli
- "테이블, CSS 디스플레이 속성 및 ARIA", Adrian Roselli
- "데이터 테이블", 헤이든 피커링