Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Comparison table

Two or more things lined up against the same criteria, so what is and is not included becomes visible.

Data display

Live preview

Source

<div class="dc-cmp" role="region" aria-label="요금제 비교 표" tabindex="0">
  <table class="dc-cmp__table">
    <caption class="dc-cmp__cap">요금제별로 되는 것과 안 되는 것</caption>
    <thead>
      <tr>
        <th scope="col" class="dc-cmp__corner">기능</th>
        <th scope="col">무료</th>
        <th scope="col" class="dc-cmp__best">프로</th>
        <th scope="col">팀</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">만들 수 있는 문서</th>
        <td>3개까지</td>
        <td class="dc-cmp__best">무제한</td>
        <td>무제한</td>
      </tr>
      <tr>
        <th scope="row">워터마크 없는 내보내기</th>
        <td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td class="dc-cmp__best"><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
        <td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
      </tr>
      <tr>
        <th scope="row">지난 버전 보관</th>
        <td>7일</td>
        <td class="dc-cmp__best">30일</td>
        <td>180일</td>
      </tr>
      <tr>
        <th scope="row">권한 나누기</th>
        <td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td class="dc-cmp__best"><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
      </tr>
      <tr>
        <th scope="row">문의 답변</th>
        <td>메일</td>
        <td class="dc-cmp__best">평일 당일</td>
        <td>전담 담당자</td>
      </tr>
    </tbody>
  </table>
</div>
.dc-cmp { overflow-x:auto; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-cmp__table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:14px; }
.dc-cmp__cap { padding:var(--dc-3) var(--dc-4); text-align:left; font-size:14px; font-weight:700; color:var(--dc-text); }
.dc-cmp__table th, .dc-cmp__table td { padding:var(--dc-3) var(--dc-4); border-top:1px solid var(--dc-line); text-align:left; vertical-align:top; color:var(--dc-text-sub); }
.dc-cmp__table thead th { background:var(--dc-sunken); color:var(--dc-text); font-size:13px; white-space:nowrap; }
.dc-cmp__table tbody th { color:var(--dc-text); font-weight:600; }
.dc-cmp__table tbody th, .dc-cmp__corner { position:sticky; left:0; z-index:1; background:var(--dc-surface); box-shadow:1px 0 0 var(--dc-line); }
.dc-cmp__best { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-cmp__yes { color:var(--dc-ok); font-weight:700; }
.dc-cmp__no { color:var(--dc-text-mute); }

How to use it

  • Order the rows the way the reader wonders; the deciding criterion goes on top
  • Wherever a real value exists, write the value — up to 3 — instead of a tick
  • Past four columns, let it scroll sideways and pin the first column

Watch out for

  • Do not build a table out of divs; th and scope are what tell a reader which cell is which
  • A tick mark alone says nothing out loud — add Included or Not included as dc-sr text

Next