Comparison table

How to use it

Use under a pricing section to compare plans feature by feature. Do not use it for only two or three differences (put them in the plan cards) or for layout. Replace the plans, features and values with your own and keep the hidden Included / Not included text in every symbol cell; on narrow screens the table scrolls sideways inside its wrapper rather than squashing the columns.

Accessibility

A real <table> with a <caption>, column headers (scope="col") for the plans and row headers (scope="row") for the features, so screen readers announce "Offline mode, Team" before each cell. The tick and cross symbols are aria-hidden="true" and every such cell also holds visually hidden text, Included or Not included, so the answer never depends on a symbol or its colour. Headers #0f172a on #f1f5f9 are 16.30:1, the feature names #0f172a on white 17.85:1, ticks #166534 on white 7.13:1, crosses #475569 on white 7.58:1, and the caption #334155 on white 10.35:1.

Source (copy-ready)

Copy code

<div class="dcl-compare">
  <table class="dcl-compare__table">
    <caption class="dcl-compare__caption">Compare what each plan includes</caption>
    <thead>
      <tr>
        <th scope="col" class="dcl-compare__head">Feature</th>
        <th scope="col" class="dcl-compare__head">Starter</th>
        <th scope="col" class="dcl-compare__head">Team</th>
        <th scope="col" class="dcl-compare__head">Business</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <th scope="row" class="dcl-compare__feature">Boards</th>
          <td class="dcl-compare__cell">3</td>
          <td class="dcl-compare__cell">Unlimited</td>
          <td class="dcl-compare__cell">Unlimited</td>
        </tr>
        <tr>
          <th scope="row" class="dcl-compare__feature">People</th>
          <td class="dcl-compare__cell">Up to 3</td>
          <td class="dcl-compare__cell">Unlimited</td>
          <td class="dcl-compare__cell">Unlimited</td>
        </tr>
        <tr>
          <th scope="row" class="dcl-compare__feature">Offline mode</th>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
        </tr>
        <tr>
          <th scope="row" class="dcl-compare__feature">Email support</th>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
        </tr>
        <tr>
          <th scope="row" class="dcl-compare__feature">Single sign-on</th>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
        </tr>
        <tr>
          <th scope="row" class="dcl-compare__feature">Audit log</th>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--no"><span class="dcl-compare__mark" aria-hidden="true">&#10007;</span><span class="dcl-compare__sr">Not included</span></td>
          <td class="dcl-compare__cell dcl-compare__cell--yes"><span class="dcl-compare__mark" aria-hidden="true">&#10003;</span><span class="dcl-compare__sr">Included</span></td>
        </tr>
    </tbody>
  </table>
</div>
<style>
.dcl-compare { max-width: 100%; overflow-x: auto; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-compare__table { width: 100%; min-width: 20rem; border-collapse: collapse; }
.dcl-compare__caption { padding: 0 0 0.75rem; text-align: left; font-weight: 600; color: #334155; background-color: #ffffff; }
.dcl-compare__head { padding: 0.6rem 0.75rem; border-bottom: 2px solid #94a3b8; text-align: center; font-weight: 700; color: #0f172a; background-color: #f1f5f9; }
.dcl-compare__head:first-child { text-align: left; }
.dcl-compare__feature { padding: 0.6rem 0.75rem; border-bottom: 1px solid #e2e8f0; text-align: left; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-compare__cell { padding: 0.6rem 0.75rem; border-bottom: 1px solid #e2e8f0; text-align: center; color: #0f172a; background-color: #ffffff; }
.dcl-compare__cell--yes { font-size: 1.15rem; font-weight: 700; color: #166534; background-color: #ffffff; }
.dcl-compare__cell--no { font-size: 1.15rem; color: #475569; background-color: #ffffff; }
.dcl-compare__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; color: #0f172a; background-color: #ffffff; }
</style>