From b16b79e01e79414f071fc3e60c93a72046e252ec Mon Sep 17 00:00:00 2001
From: Catherine Deskur <46695336+chdeskur@users.noreply.github.com>
Date: Wed, 27 Aug 2025 11:40:32 -0400
Subject: [PATCH] Update sticky-tables.mdx

---
 .../default-components/sticky-tables.mdx      | 65 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
index 041abd380..40b31b18b 100644
--- a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
+++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
@@ -5,7 +5,7 @@ description: Display tables with sticky headers that remain visible while scroll
 
 The `StickyTable` component provides a way to display tabular data with a fixed header that remains visible while scrolling through table rows. This is particularly useful for longer tables where users need to reference column headers while viewing data further down the table.
 
-Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table including the header scrolls out of view.
+Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table, including the header, scrolls out of view.
 
 | Plant | Light Requirements | Water |
 |-------|-------------------|-------|
@@ -50,6 +50,8 @@ Below is an example of a **sticky table**. As you scroll down the page, the head
 
 ## Create a sticky table
 
+### Using Markdown
+
 Simply wrap any Markdown table with `<StickyTable>` tags to make the header sticky. No changes to your table syntax are needed.
 
 <Tabs>
@@ -75,7 +77,64 @@ Simply wrap any Markdown table with `<StickyTable>` tags to make the header stic
 </Tab>
 </Tabs>
 
-### Style a sticky table
+### Using HTML
+
+Simply add the `sticky` attribute to the opening `<table>` tag. No further changes to your table syntax are needed.
+
+<Tabs>
+<Tab title="Markdown">
+<CodeBlock>
+```markdown
+<table sticky className="fern-table">
+  <thead>
+    <tr>
+      <th>Plant</th>
+      <th>Light Requirements</th>
+      <th>Water</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Fern</td>
+      <td>Partial shade</td>
+      <td>Weekly</td>
+    </tr>
+    <tr>
+      <td>Snake Plant</td>
+      <td>Low to bright indirect</td>
+      <td>Bi-weekly</td>
+    </tr>
+  </tbody>
+</table>
+```
+</CodeBlock>
+</Tab>
+<Tab title="Preview">
+<table sticky className="fern-table">
+  <thead>
+    <tr>
+      <th>Plant</th>
+      <th>Light Requirements</th>
+      <th>Water</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Fern</td>
+      <td>Partial shade</td>
+      <td>Weekly</td>
+    </tr>
+    <tr>
+      <td>Snake Plant</td>
+      <td>Low to bright indirect</td>
+      <td>Bi-weekly</td>
+    </tr>
+  </tbody>
+</table>
+</Tab>
+</Tabs>
+
+## Style a sticky table
 
 Sticky tables can be styled independently from regular tables. To add custom styling, target the `.fern-table.sticky` selector:
 
@@ -83,4 +142,4 @@ Sticky tables can be styled independently from regular tables. To add custom sty
 .fern-table.sticky {
   //custom css here 
 }
-```
\ No newline at end of file
+```