Data Table

A small data table

Preview

PaletteDarkMonoWarm

HTML

<table>
      <caption>Tokens</caption>
      <thead>
        <tr><th scope="col">Name</th><th scope="col">Step</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Type</th><td>2</td></tr>
        <tr><th scope="row">Space</th><td>3</td></tr>
      </tbody>
    </table>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

table {
  border-collapse: collapse;
  min-width: min(100%, 16rem);
  background: var(--paper);
}

caption {
  padding-bottom: 0.4rem;
  font-weight: 800;
  text-align: start;
}

th, td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

thead th { background: var(--chip); }