디자인킷 · 표
항목·기준·비고 3열 표
D-표-항목기준비고3열
언제 쓰는가
운영 기준, 검수 조건, 서비스 수준 약속처럼 항목마다 기준값과 단서가 붙는 표. 기준 열을 굵게, 핵심 행 하나 강조. 행 5~7개. 값 바꾸는 법: 행 단위로 항목·기준·비고 교체. 강조할 행 하나에 tr class="hot". 비고는 한 줄로 유지.
참고
Chapman University Data Literacy "Good Tables" https://libguides.chapman.edu/data_literacy/good_tables (세로선 제거, 머리줄 아래 선 하나, 숫자 오른쪽 정렬) / Bricks "How to make a table look good in PowerPoint" https://www.website.thebricks.com/resources/how-to-make-a-table-look-good-in-powerpoint (핵심 행 하나만 색으로 강조). 구성 방식만 참고, 코드와 그림은 직접 제작.
조각
<div class="dk dk-spec3"><div class="dk-card"><table> <colgroup><col style="width:200px"><col style="width:380px"><col></colgroup> <thead><tr><th>항목</th><th>기준</th><th>비고</th></tr></thead> <tbody> <tr><td class="k">보고 주기</td><td class="v">주간 요약 1회, 월간 종합 1회</td><td class="m">월간 보고는 다음 달 5영업일 이내</td></tr> <tr class="hot"><td class="k">요청 응답</td><td class="v">영업일 기준 4시간 이내 1차 답변</td><td class="m">긴급 건은 전담 담당자 직통 연락</td></tr> <tr><td class="k">소재 교체</td><td class="v">2주마다 성과 하위 30% 교체</td><td class="m">교체 전 광고주 확인 1회</td></tr> <tr><td class="k">검수 절차</td><td class="v">초안, 수정 2회, 최종 확인</td><td class="m">수정 3회째부터 일정 재협의</td></tr> <tr><td class="k">예산 조정</td><td class="v">매체 간 이동 20% 이내 자율</td><td class="m">20% 초과 시 사전 승인</td></tr> <tr><td class="k">자료 보관</td><td class="v">종료 후 12개월 보관</td><td class="m">원본 파일과 계정 권한 이관 포함</td></tr> </tbody></table></div></div>
스타일
.dk-spec3 table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-spec3 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-spec3 td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-spec3 tbody tr:last-child td{border-bottom:0}
.dk-spec3 .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-spec3 .c{text-align:center}
.dk-spec3 td.k{font-weight:600;color:var(--ink)}
.dk-spec3 .dk-card{padding:20px 24px 12px}
.dk-spec3 td.v{color:var(--ink);font-weight:500}
.dk-spec3 td.m{font-size:var(--f-sm);color:var(--mu)}
.dk-spec3 tr.hot td{background:var(--acw)}
.dk-spec3 tr.hot td.k{color:var(--ac)}