소형 표 3열 3행

유형·방식·단계 3가지를 기준 2개 열로 설명하는 표. 행 3개 고정, 열 3개(행 제목 + 내용 2열). 칸 문구는 가운데 열 기준 3줄(약 90자)까지 들어감(쇼핑라이브 전·중·후 표로 확인). 강조 행 1개. 행이 4개면 D-표-소형3열4행. 값 바꾸는 법: 머리줄 3칸과 행 3개의 문구만 교체. 첫 열 폭은 colgroup 의 190px, 셋째 열 400px 를 문구 길이에 맞춰 조정. 강조할 행에 class="hot"(1개만). 아래 한 줄(.dk-say)은 지워도 됨.

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

<div class="dk dk-s33"><div class="dk-card"><table>
<colgroup><col style="width:190px"><col><col style="width:400px"></colgroup>
<thead><tr><th>매칭 유형</th><th>노출되는 검색어</th><th>배분</th></tr></thead>
<tbody>
<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>
<tr><td class="k">확장검색</td><td>관련성이 있다고 판단된 넓은 검색어</td><td class="v">탐색 키워드에 적용, 자동 입찰과 함께 사용</td></tr>
</tbody></table></div>
<p class="dk-say">검색어 보고서를 지출 순으로 정렬해 상위 구간부터 주 1회 점검</p></div>

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