Table

Rows and columns of structured data.

Recent orders
OrderCustomerStatusTotal
#1042A. WhitfieldShipped£64.00
#1041R. OkaforProcessing£128.50
#1040M. IqbalShipped£22.00
#1039S. NovakRefunded£40.00
#1038L. DuarteShipped£96.20
#1037P. AnderssonProcessing£15.75

html

<table class="table table--striped" style="--accent:#241430;--pad:12px;">
  <caption class="table__caption">Recent orders</caption>
  <thead>
    <tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col">Total</th></tr>
  </thead>
  <tbody data-rows="4">
    <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
    <tr><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>
    <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>
    <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
    <tr><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>
    <tr><td>#1037</td><td>P. Andersson</td><td>Processing</td><td>£15.75</td></tr>
  </tbody>
</table>
<style>
.table { border-collapse: collapse; width: 100%; max-width: 480px; font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; }
.table__caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.table th, .table td { padding: var(--pad) 14px; text-align: left; border-bottom: 1px solid #24143020; }
.table th { background: var(--accent); color: #FAF7F2; font-weight: 600; }
.table--striped tbody tr:nth-child(even) { background: #24143010; }
tbody[data-rows="3"] tr:nth-child(n+4) { display: none; }
tbody[data-rows="4"] tr:nth-child(n+5) { display: none; }
tbody[data-rows="5"] tr:nth-child(n+6) { display: none; }
tbody[data-rows="6"] tr:nth-child(n+7) { display: none; }
</style>

tailwind

<table class="border-collapse w-full max-w-[480px] font-sans text-sm text-[#241430] bg-[#FAF7F2]">
  <caption class="text-left font-semibold pb-2">Recent orders</caption>
  <thead>
    <tr style="background:#241430" class="text-[#FAF7F2]">
      <th scope="col" class="text-left font-semibold p-[12px]">Order</th>
      <th scope="col" class="text-left font-semibold p-[12px]">Customer</th>
      <th scope="col" class="text-left font-semibold p-[12px]">Status</th>
      <th scope="col" class="text-left font-semibold p-[12px]">Total</th>
    </tr>
  </thead>
  <tbody data-rows="4" class="[&>tr:nth-child(even)]:bg-[#24143010]">
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1042</td><td class="p-[12px]">A. Whitfield</td><td class="p-[12px]">Shipped</td><td class="p-[12px]">£64.00</td></tr>
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1041</td><td class="p-[12px]">R. Okafor</td><td class="p-[12px]">Processing</td><td class="p-[12px]">£128.50</td></tr>
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1040</td><td class="p-[12px]">M. Iqbal</td><td class="p-[12px]">Shipped</td><td class="p-[12px]">£22.00</td></tr>
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1039</td><td class="p-[12px]">S. Novak</td><td class="p-[12px]">Refunded</td><td class="p-[12px]">£40.00</td></tr>
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1038</td><td class="p-[12px]">L. Duarte</td><td class="p-[12px]">Shipped</td><td class="p-[12px]">£96.20</td></tr>
    <tr class="border-b border-[#24143020]"><td class="p-[12px]">#1037</td><td class="p-[12px]">P. Andersson</td><td class="p-[12px]">Processing</td><td class="p-[12px]">£15.75</td></tr>
  </tbody>
</table>
<style>
tbody[data-rows="3"] tr:nth-child(n+4) { display: none; }
tbody[data-rows="4"] tr:nth-child(n+5) { display: none; }
tbody[data-rows="5"] tr:nth-child(n+6) { display: none; }
tbody[data-rows="6"] tr:nth-child(n+7) { display: none; }
</style>

react

export function Table({
  caption = "Recent orders",
  rows = "4",
  cellPadding = 12,
  accent = "#241430",
  striped = true,
}) {
  const data = [
    ["#1042", "A. Whitfield", "Shipped", "£64.00"],
    ["#1041", "R. Okafor", "Processing", "£128.50"],
    ["#1040", "M. Iqbal", "Shipped", "£22.00"],
    ["#1039", "S. Novak", "Refunded", "£40.00"],
    ["#1038", "L. Duarte", "Shipped", "£96.20"],
    ["#1037", "P. Andersson", "Processing", "£15.75"],
  ].slice(0, Number(rows));
  return (
    <table style={{ borderCollapse: "collapse", width: "100%", maxWidth: 480, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2" }}>
      <caption style={{ textAlign: "left", fontWeight: 600, paddingBottom: 8 }}>{caption}</caption>
      <thead>
        <tr style={{ background: accent, color: "#FAF7F2" }}>
          {["Order", "Customer", "Status", "Total"].map((h) => (
            <th key={h} scope="col" style={{ textAlign: "left", fontWeight: 600, padding: `${cellPadding}px 14px` }}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={row[0]} style={{ background: striped && i % 2 === 1 ? "#24143010" : "transparent",
            borderBottom: "1px solid #24143020" }}>
            {row.map((cell, j) => <td key={j} style={{ padding: `${cellPadding}px 14px` }}>{cell}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}