diff --git a/docs/docs/essentials/table.md b/docs/docs/essentials/table.md
index 1c9f380fa..62f71b452 100644
--- a/docs/docs/essentials/table.md
+++ b/docs/docs/essentials/table.md
@@ -48,10 +48,54 @@ elements:
 
 ## Alternating rows
 
-You can use the `wa-alternating-row-colors` class to add alternating row colors to your table:
+You can use the `wa-zebra-rows` class to add alternating row colors to your table:
 
 ```html {.example}
-<table class="wa-alternating-row-colors">
+<table class="wa-zebra-rows">
+  <caption>I'm just a table</caption>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Variants
+
+You can use [color utility classes](/docs/utilities/colors) to apply different colors to your table:
+
+```html {.example}
+<table class="wa-zebra-rows wa-brand">
   <caption>I'm just a table</caption>
   <thead>
     <tr>
diff --git a/src/styles/native/tables.css b/src/styles/native/tables.css
index 63736fd58..6da8c7cde 100644
--- a/src/styles/native/tables.css
+++ b/src/styles/native/tables.css
@@ -9,32 +9,36 @@ caption {
   color: var(--wa-color-text-quiet);
 }
 
-tbody tr {
-  border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
-}
+tbody {
+  tr {
+    border-top: solid var(--wa-border-width-s) var(--wa-color-border-quiet);
 
-tbody tr:hover {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%);
-  border-top-color: var(--wa-color-neutral-border-quiet);
-}
+    :where(table.wa-zebra-rows) &:nth-child(odd) {
+      background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
+    }
 
-tbody tr:hover + tr {
-  border-top-color: var(--wa-color-neutral-border-quiet);
-}
+    &:hover {
+      background-color: var(--wa-color-fill-quiet);
 
-th {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-bold);
+      &,
+      + tr {
+        border-top-color: var(--wa-color-border-normal);
+      }
+    }
+  }
 }
 
 td,
 th {
   text-align: start;
-  padding: var(--wa-space-l) var(--wa-space-s);
+  padding: var(--wa-space-s) var(--wa-space-s);
   vertical-align: top;
 }
 
-/* Utilities */
-table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
-  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
+th {
+  font-size: var(--wa-font-size-s);
+  font-weight: var(--wa-font-weight-bold);
+  padding-block: var(--wa-space-xs);
 }
+
+/* Utilities */