소형 표 5열 3~4행

행 3~4개에 열이 5개인 표. 첫 열을 행 제목으로 굵게, 나머지 4열은 짧은 문구. 검색 의도별 포맷, 온보딩 차수별 시나리오, 단계별 5항목 정리에 사용. 열 5개 고정, 행 3~4개, 칸 문구 2줄(약 16자). 강조 행 1개, 대상에서 빠지는 행은 흐리게. 값 바꾸는 법: 머리줄 5칸과 행 문구 교체. 열 폭은 colgroup. 강조 행에 class="hot", 대상에서 빠지는 행에 class="off". 3행이면 td padding 20px 를 26px 로. 예시 키워드는 가상.

표 선 처리(세로선 없이 옅은 가로선, 머리줄 아래 선만 진하게, 왼쪽 정렬)는 Deckary "PowerPoint Table Design" 와 Stephen Few "Show Me the Numbers" 8장 표 설계 원칙 참고. 코드와 구성은 직접 제작.

<div class="dk dk-s54"><div class="dk-card"><table>
<colgroup><col style="width:120px"><col style="width:230px"><col style="width:240px"><col style="width:210px"><col></colgroup>
<thead><tr><th>의도</th><th>검색자의 상태</th><th>신호 단어</th><th>맞는 포맷</th><th>우리 키워드</th></tr></thead>
<tbody>
<tr><td class="k">정보성</td><td>무엇을 살지 정하지 않음</td><td>방법, 이유, 차이, 하는 법</td><td class="v">가이드, 체크리스트</td><td>매트리스 고르는 법</td></tr>
<tr><td class="k">상업성</td><td>후보를 좁히는 중</td><td>추천, 순위, 비교, vs</td><td class="v">비교글, 사양표</td><td>매트리스 추천, 라텍스 vs 스프링</td></tr>
<tr class="hot"><td class="k">거래성</td><td>살 곳과 조건만 확인</td><td>구매, 가격, 할인, 배송</td><td class="v">랜딩, 상품 상세</td><td>퀸 매트리스 가격</td></tr>
<tr class="off"><td class="k">탐색성</td><td>특정 사이트로 이동</td><td>브랜드명, 로그인</td><td class="v">해당 페이지 자체</td><td>기획 대상 아님</td></tr>
</tbody></table></div></div>

.dk-s54 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-s54 th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-s54 td{font-size:var(--f-body);color:var(--ink2);padding:20px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-s54 tbody tr:last-child td{border-bottom:0}
.dk-s54 td.k{font-weight:700;color:var(--ink)}
.dk-s54 td.v{font-weight:500;color:var(--ink)}
.dk-s54 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-s54 tr.hot td{background:var(--acw)}
.dk-s54 tr.hot td.k{color:var(--ac)}
.dk-s54 .dk-card{padding:20px 24px 12px}
.dk-s54 td.k{font-size:var(--f-md)}
.dk-s54 tr.off td,.dk-s54 tr.off td.k,.dk-s54 tr.off td.v{color:var(--mu);font-weight:400}