feat: Add table styling (#1580)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

This PR aims to add styling for tables, which are not currently styled:

<img width="375" height="221" alt="Screenshot: Before."
src="https://github.com/user-attachments/assets/2f14e5dd-a04e-465c-bca7-137e15e90fd9"
/>

With this PR, tables are displayed like this:

<img width="464" height="249" alt="Screenshot: After."
src="https://github.com/user-attachments/assets/25b88413-8c36-4a4a-ae1d-7a5cb538d178"
/>

Tables are also made to be scrollable (no video because Spectacle is
misbehaving right now):

<img width="571" height="162" alt="Screenshot: Horizontal auto-scroll on
a long table."
src="https://github.com/user-attachments/assets/7cd114bf-5f59-4d8b-a55b-f40a38b9fb71"
/>

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] ~~Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).~~
- [ ] ~~Fully AI generated (explain what all the generated code does in
moderate detail).~~
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: eleboucher

.changeset/add_table_styling.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Add table styling

src/app/plugins/react-custom-html-parser.tsx

@@ -760,6 +760,30 @@ export const getReactCustomHtmlParser = (
           );
         }
 
+        if (name === 'table') {
+          return (
+            <div className={css.TableContainer}>
+              <table {...props} className={css.Table}>
+                {renderChildren()}
+              </table>
+            </div>
+          );
+        }
+        if (name === 'th') {
+          return (
+            <th {...props} className={css.Th}>
+              {renderChildren()}
+            </th>
+          );
+        }
+        if (name === 'td') {
+          return (
+            <td {...props} className={css.Td}>
+              {renderChildren()}
+            </td>
+          );
+        }
+
         if (name === 'code') {
           if (parent && 'name' in parent && parent.name === 'pre') {
             const codeContent = renderChildren();

src/app/styles/CustomHtml.css.ts

@@ -300,3 +300,41 @@ export const HorizontalRule = style([
     userSelect: 'none',
   },
 ]);
+
+export const TableContainer = style([
+  DefaultReset,
+  MarginSpaced,
+  {
+    overflowX: 'auto',
+    maxWidth: '100%',
+  },
+]);
+
+export const Table = style([
+  DefaultReset,
+  {
+    borderCollapse: 'collapse',
+  },
+]);
+
+export const Th = style([
+  DefaultReset,
+  {
+    padding: `${config.space.S100} ${config.space.S200}`,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    backgroundColor: color.SurfaceVariant.Container,
+    color: color.SurfaceVariant.OnContainer,
+    minWidth: toRem(100),
+  },
+]);
+
+export const Td = style([
+  DefaultReset,
+  {
+    padding: `${config.space.S100} ${config.space.S200}`,
+    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+    backgroundColor: color.Surface.Container,
+    color: color.Surface.OnContainer,
+    minWidth: toRem(100),
+  },
+]);