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

Modern Table

Red on a short white plane

Preview

PaletteSwiss

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: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

table {
  border-collapse: collapse;
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: 0.92rem;
}

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: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

table {
  border-collapse: collapse;
}

caption {
  caption-side: bottom;
}

tbody tr:nth-child(even) { background: var(--chip); }
</style>
<table class="text-[var(--ink)] font-[system-ui,_sans-serif] text-[0.92rem]">
  <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>