List or Table

목록과 표는 정보의 관계에 맞게 선택한다

항목을 나열하면 목록, 행과 열로 비교하면 표를 사용한다. 먼저 정보의 관계를 정하면 태그 선택이 단순해진다.

목록은 나열 방식 선택

ul / ol / dl

카테고리, 메뉴, 체크리스트처럼 앞뒤 순서보다 묶음 자체가 중요할 때 사용한다.

레시피, 순위, 절차처럼 순서가 의미를 바꾸는 정보에 맞다.

용어 사전이나 FAQ처럼 이름과 설명이 한 쌍으로 움직일 때 사용한다.

table / th / td

정보 관계 판단

맞는 구조

목록과 표 한계

방문자 통계

월, 방문자 수, 신규 방문자를 열 제목으로 둔다.

caption과 th로 표의 의미를 먼저 알려준다.

시간표

시간과 요일이 교차하는 셀에 수업명을 넣는다.

병합은 rowspan, colspan으로 실제 관계만 표현한다.

레이아웃

단순 배치는 표가 아니라 CSS 영역으로 다룬다.

table은 데이터 관계를 보여줄 때만 선택한다.

나열 순서 용어 행/열

표는 행과 열의 의미가 있을 때

화면 모양보다 데이터의 의미를 먼저 본다. 단순 나열은 목록, 비교와 교차 관계는 표로 잡으면 HTML 구조가 흔들리지 않는다.