components/Table.module.css

@@ -0,0 +1,36 @@
+.table {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+
+  --border: calc(2rem / 16) solid var(--primary-accent-light);
+}
+
+.table thead tr {
+  background: var(--secondary-accent-light);
+}
+
+.table tbody tr {
+  text-align: center;
+  vertical-align: top;
+}
+
+.table tbody tr:nth-child(odd) {
+  background: var(--primary-accent-lightest);
+}
+
+.table th {
+  color: var(--primary-heading);
+  text-align: left;
+  border-bottom: var(--border);
+}
+
+.table th:not(:last-child),
+.table td:not(:last-child) {
+  border-right: var(--border);
+}
+
+.table th,
+.table td {
+  padding: calc(12rem / 16);
+}

components/Table.tsx

@@ -0,0 +1,9 @@
+import React, { TableHTMLAttributes } from "react";
+
+import styles from "./Table.module.css";
+
+export function Table(props: TableHTMLAttributes<HTMLTableElement>) {
+  const className = [styles.table, props.className ?? ""].join(" ");
+
+  return <table {...props} className={className} />;
+}

pages/_app.tsx

@@ -17,6 +17,7 @@ import {
   GetShapesConfig,
   ShapesBackground,
 } from "@/components/ShapesBackground";
+import { Table } from "@/components/Table";
 import { ThemeProvider } from "@/components/Theme";
 
 import styles from "./_app.module.css";
@@ -37,6 +38,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           pre: Pre,
           inlineCode: Code,
           img: Image,
+          table: Table,
         }}
       >
         <div className={styles.appContainer}>