7 results

Preview
Brutal Table
Thick rules and uppercase
Preview
Chic Table
Serif type and a thin rule
Preview
Data Table
A small data table
Preview
Dense Table
Tight gaps and mono type
Preview
Editorial Table
Measure against a heading
Preview
Modern Table
Red on a short white plane
Preview
Soft Table
Large radii and a pale plane

Chic Table

Serif type and a thin rule

Preview

PaletteChampagne

HTML

<table>
  <caption>Steps</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">n</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: #3f382f;
  --paper: #f7f1e6;
  --accent: #8d6a3e;
  --accent-2: #5a5148;
  --on-accent: #fff8ee;
  --muted: #8a7f72;
  --line: #d8cbb8;
  --chip: #efe6d4;
}

table {
  border-collapse: collapse;
  color: var(--ink);
  font-family: Palatino, Georgia, serif;
  font-size: 0.95rem;
}

caption {
  caption-side: bottom;
  padding-top: 0.4rem;
  color: var(--muted);
  text-align: left;
}

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

tbody tr:nth-child(even) { background: var(--chip); }

Tailwind

<style>
:root {
  --ink: #3f382f;
  --paper: #f7f1e6;
  --accent: #8d6a3e;
  --accent-2: #5a5148;
  --on-accent: #fff8ee;
  --muted: #8a7f72;
  --line: #d8cbb8;
  --chip: #efe6d4;
}

table {
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
}

tbody tr:nth-child(even) { background: var(--chip); }
</style>
<table class="text-[var(--ink)] font-[Palatino,_Georgia,_serif] text-[0.95rem]">
  <caption class="pt-[0.4rem] text-[var(--muted)] text-left">Steps</caption>
  <thead>
    <tr><th class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left" scope="col">Name</th><th class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left" scope="col">n</th></tr>
  </thead>
  <tbody>
    <tr><th class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left" scope="row">Type</th><td class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left">2</td></tr>
    <tr><th class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left" scope="row">Space</th><td class="p-[0.35rem_0.7rem] [border-bottom:1px_solid_var(--line)] text-left">3</td></tr>
  </tbody>
</table>