tables

No zebra stripes. The hairline between rows is enough; alternating fills add noise without information. Numbers are right-aligned and tabular; column heads are uppercase and small.

data

<table class="data">
  <thead><tr>
    <th>time</th><th>coin</th><th>source</th>
    <th style="text-align:right">price</th>
    <th style="text-align:right">deviation</th>
    <th>severity</th>
  </tr></thead>
  <tbody>
    <tr>
      <td>14:21:03</td>
      <td class="fg">USDC</td>
      <td>binance</td>
      <td class="num">$0.9941</td>
      <td class="num warn">-59.0 bps</td>
      <td class="warn">warn</td>
    </tr>
  </tbody>
</table>

css

table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: var(--t-2);
  color: var(--fg);
}
table.data th {
  font-size: var(--t-1); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint); text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}
table.data td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
}
table.data td.fg  { color: var(--fg); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }