순위 표(막대 포함)

키워드 묶음, 채널, 소재를 값 순서로 줄 세우고 막대로 크기를 같이 보여 주는 표. 1위 행만 강조. 행 5~7개. 값 바꾸는 법: 막대 width = 값 ÷ 1위 값 × 100 (%). 비중 = 값 ÷ 합계 × 100. 값이 큰 순서로 정렬하고 1위 행에 tr class="hot".

Medium "Data Table Design Patterns" https://medium.com/design-bootcamp/data-table-design-patterns-4e38188a0981 (표 안 막대, 칩, 정렬 규칙) / Datawrapper 표의 칸 안 막대(bar in table) https://www.datawrapper.de/tables. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-rank"><div class="dk-card"><table>
<colgroup><col style="width:64px"><col style="width:260px"><col><col style="width:120px"><col style="width:100px"></colgroup>
<thead><tr><th>순위</th><th>키워드 묶음</th><th>월 검색 유입</th><th class="n">유입 수</th><th class="n">비중</th></tr></thead>
<tbody>
<tr class="hot"><td class="no num">1</td><td class="k">비교 추천형 키워드</td><td><span class="t"><i style="width:100.0%"></i></span></td><td class="n v">2,840</td><td class="n p">30.9%</td></tr>
<tr><td class="no num">2</td><td class="k">증상·고민형 키워드</td><td><span class="t"><i style="width:77.8%"></i></span></td><td class="n v">2,210</td><td class="n p">24.1%</td></tr>
<tr><td class="no num">3</td><td class="k">가격·비용형 키워드</td><td><span class="t"><i style="width:58.1%"></i></span></td><td class="n v">1,650</td><td class="n p">18.0%</td></tr>
<tr><td class="no num">4</td><td class="k">브랜드 키워드</td><td><span class="t"><i style="width:41.5%"></i></span></td><td class="n v">1,180</td><td class="n p">12.9%</td></tr>
<tr><td class="no num">5</td><td class="k">지역 결합 키워드</td><td><span class="t"><i style="width:26.8%"></i></span></td><td class="n v">760</td><td class="n p">8.3%</td></tr>
<tr><td class="no num">6</td><td class="k">후기 탐색형 키워드</td><td><span class="t"><i style="width:19.0%"></i></span></td><td class="n v">540</td><td class="n p">5.9%</td></tr>
</tbody></table></div></div>

.dk-rank table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-rank 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-rank 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-rank tbody tr:last-child td{border-bottom:0}
.dk-rank .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-rank .c{text-align:center}
.dk-rank td.k{font-weight:600;color:var(--ink)}
.dk-rank .dk-card{padding:20px 24px 12px}
.dk-rank td.no{font-size:var(--f-md);font-weight:700;color:var(--mu)}
.dk-rank .t{display:block;height:14px}
.dk-rank .t i{display:block;height:14px;border-radius:3px;background:var(--g2)}
.dk-rank td.v{font-weight:700;color:var(--ink)}
.dk-rank td.p{font-size:var(--f-sm);color:var(--mu)}
.dk-rank tr.hot td.no,.dk-rank tr.hot td.k,.dk-rank tr.hot td.v{color:var(--ac)}
.dk-rank tr.hot .t i{background:var(--ac)}