Automatic Table Styling
Markdown tables that automatically match your theme colors with light/dark mode support
Example 1: Component Props Table
Standard reference table showing component properties. Header uses theme primary color.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | No | - | Section heading |
description | string | No | - | Section description |
columns | PricingColumn[] | Yes | - | Array of pricing packages |
background | 'default' | 'subtle' | No | 'default' | Background color variant |
Example 2: Cost Comparison (Highlighted Row)
Comparison table showing different solutions. The "Atlas (First 3)" row is highlighted to emphasize the winning option.
Usage: Add class="highlight" to <tr> tag in HTML mode
| Solution | Setup Cost | Monthly Fees | First Year Total |
|---|---|---|---|
| Typical Agency | $3,000+ | $50-150/mo | $3,600-4,800 |
| DIY Website Builder | Your time | $25-80/mo | $300-960 + frustration |
| Atlas (First 3) | You name it ($99+) | $0/mo | Your price + $0 |
| Atlas (Regular) | Starting at $1,499 | $0/mo | Starting at $1,499 |
Example 3: Feature Comparison Matrix
Large table to test responsive behavior. On mobile, table scrolls horizontally.
| Feature | Free | Starter | Professional | Enterprise |
|---|---|---|---|---|
| Users | 1 user | Up to 5 | Up to 20 | Unlimited |
| Storage | 1GB | 10GB | 100GB | Unlimited |
| Email Support | ✓ | ✓ | ✓ | ✓ |
| Chat Support | ✗ | ✓ | ✓ | ✓ |
| Phone Support | ✗ | ✗ | ✓ | ✓ |
| Advanced Analytics | ✗ | ✗ | ✓ | ✓ |
| Custom Branding | ✗ | ✗ | ✓ | ✓ |
| API Access | ✗ | ✗ | ✗ | ✓ |
| Priority Support | ✗ | ✗ | ✗ | ✓ |
| Monthly Price | $0 | $29 | $99 | Contact Sales |
How It Works
Automatic Styling: All markdown tables in prose content automatically get styled with theme colors. No additional components needed.
Theme Integration: Header background uses --color-primary from your theme. Change color preset, tables update automatically.
Dark Mode: Tables adapt automatically. Light mode uses white text on primary color, dark mode uses gray-900 text (both validated WCAG AA ≥4.5:1).
Highlighted Rows: Add class="highlight" to any <tr> to emphasize
it (great for "winning" options in comparisons).
Responsive: Tables scroll horizontally on mobile. Wrap in overflow-x-auto for explicit control.
Testing Checklist
✓ Visual
- • Header uses theme primary color
- • Row hover states work
- • Highlighted rows stand out
- • Dark mode adapts correctly
✓ Accessibility
- • Header text contrast ≥4.5:1
- • Body text contrast ≥4.5:1
- • Highlight text contrast ≥4.5:1
- • Works across all color presets
✓ Responsive
- • Mobile: tables scroll horizontally
- • Tablet: full table width
- • Desktop: full table width
✓ Integration
- • Works in all CMS layouts
- • Existing tables render correctly
- • No component changes needed