CSS Grid를 쓰면서 표의 행과 열처럼 정보를 읽기 쉽게 표시하려고 <table>, <th>, <td>를 레이아웃에 활용하는 방법이 제안됐다. 글쓴이는 이 방식이 표의 의미 구조를 유지하면서 그리드 속성을 쓸 수 있다고 설명하지만, 표의 의미를 흐릴 수 있다는 점도 함께 짚는다.
글쓴이는 Flexbox와 CSS Grid를 접했을 때 align-self, justify-content 같은 정렬 속성을 표나 목록 등 다양한 요소에도 쓸 수 있으리라 기대했다고 말한다. 그 기대에서 나온 아이디어가 HTML 표를 CSS Grid로 배치하는 것이다. 과거에도 반응형 표를 만들기 위해 비슷한 방식이 쓰인 사례가 있다(사례 소개).
다만 글쓴이는 일반적인 HTML 표의 장점도 강조한다. 표는 브라우저가 이해하고 보조 기술에 전달할 수 있는 명확한 의미 구조를 제공하며, <caption> 요소도 지원한다. CSS Grid는 콘텐츠의 고유한 반응형 배치, 소스 순서와 배치의 분리, 위치 지정이 필요한 레이아웃에 쓰고, 실제 표 데이터는 HTML 표에 맡기는 것이 바람직하다고 설명한다(표를 옹호하는 글).
그럼에도 글쓴이는 <th>와 <td>가 제목과 값의 관계를 드러내는 점이 유용하다고 본다. 예를 들어 <div class="product-title">Wall Calendar</div>보다 <th>Wall Calendar</th>가 정보를 파악하기 쉽다는 것이다. 이에 따라 표의 기본 표시 방식을 바꾸는 table { display: grid; }를 제안한다.
예시에서는 카드 정보를 일반적인 <div>로 작성하던 구조를 <table class="card"> 안의 행과 제목·값 셀로 바꾼다. 이어 .card에 display: grid와 grid-template-columns를 적용하고, tbody에는 display: contents, 행과 셀에는 display: block을 지정해 표의 기본 레이아웃을 우회한다.
글쓴이는 이런 ‘유사 의미론적’ 표가 여러 개의 일반적인 div보다 훑어보기 쉽고, CSS Grid의 배치 편의성도 얻을 수 있다고 말한다. 원문에 따르면 브라우저는 아직 이 방식을 거부하지 않았으며, VoiceOver와 키보드 탐색도 실제 표처럼 작동한다. 다만 표의 의미를 유지하면서 표현 방식만 바꾸는 것이 적절한지에 대해서는 의문을 남긴다. CSS가 다른 HTML 요소의 역할도 바꿀 수 있다는 논의도 참고할 만하다(CSS와 HTML 요소의 관계).
부록: 원문 예시
<article class="card"> <div class="card-number"> <strong>CARD NUMBER</strong> <span>1234 5678 9123 4567</span> </div> <div class="card-bank"> <strong>CROWN <br>ATLANTIC <br>BANK</strong> </div> <div class="card-name"> <strong>CARD HOLDER</strong> <span>JANE DOE</span> </div> <!-- more --> </article>
<table class="card"> <tr class="card-number"> <th>CARD NUMBER</th> <td>1234 5678 9123 4567</td> </tr> <tr class="card-bank"> <th>CROWN <br>ATLANTIC <br>BANK</th> </tr> <tr class="card-name"> <th>CARD HOLDER</th> <td>JANE DOE</td> </tr> <!-- more --> </table>
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요