소형 표 3열 4행

방식·장치·지표 4가지를 기준과 쓰임(또는 조치·한계) 2개 열로 설명하는 표. 행 4개 고정, 열 3개. 칸 문구는 3줄(약 70자)까지 들어감. 강조 행 1개. 값 바꾸는 법: 머리줄 3칸과 행 4개의 문구만 교체. 열 폭은 colgroup 에서 조정. 강조 행 하나에 class="hot". 칸 문구가 3줄을 넘으면 행 여백(td padding 21px)을 14px 로 줄임.

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

<div class="dk dk-s34"><div class="dk-card"><table>
<colgroup><col style="width:210px"><col><col style="width:420px"></colgroup>
<thead><tr><th>타깃 방식</th><th>기준</th><th>쓰임</th></tr></thead>
<tbody>
<tr><td class="k">문맥</td><td>사람이 아니라 페이지의 주제</td><td class="v">주제 연관 지면에서 인지 확보</td></tr>
<tr><td class="k">관심 분야</td><td>과거 행동으로 본 생활 방식과 관심사</td><td class="v">넓은 잠재 고객 도달</td></tr>
<tr class="hot"><td class="k">구매 의도</td><td>구매를 적극 고려 중인 신호</td><td class="v">규모는 작고 전환 가능성 높음</td></tr>
<tr><td class="k">맞춤 세그먼트</td><td>입력 키워드로 직접 정의</td><td class="v">경쟁 카테고리 관심층 도달</td></tr>
</tbody></table></div></div>

.dk-s34 table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-s34 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-s34 td{font-size:var(--f-body);color:var(--ink2);padding:21px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-s34 tbody tr:last-child td{border-bottom:0}
.dk-s34 td.k{font-weight:700;color:var(--ink)}
.dk-s34 td.v{font-weight:500;color:var(--ink)}
.dk-s34 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-s34 tr.hot td{background:var(--acw)}
.dk-s34 tr.hot td.k{color:var(--ac)}
.dk-s34 .dk-card{padding:20px 24px 12px}
.dk-s34 td.k{font-size:var(--f-md)}