Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Bảng so sánh

Xếp hai thứ trở lên theo cùng tiêu chí, để thấy rõ cái gì có và cái gì không.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<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); }

Cách dùng

  • Sắp thứ tự hàng theo điều người đọc thắc mắc trước; tiêu chí quyết định đặt lên đầu
  • Chỗ nào có giá trị thật thì ghi giá trị — tối đa 3 — thay cho dấu tích
  • Quá bốn cột thì cho cuộn ngang và ghim cột đầu

Điểm cần lưu ý

  • Đừng dựng bảng bằng div; th và scope mới cho biết ô nào là ô nào
  • Dấu tích một mình không nói gì khi đọc lên — thêm chữ Có hoặc Không trong dc-sr

Tiếp theo