# Blog Table Format

**Last Updated:** 2026-03-23  
**Purpose:** Ensure tables in blog posts display correctly with Ordio blue headers and responsive breakout

## Rule: No Tailwind on Tables

**Never** use Tailwind utility classes on `table`, `thead`, `th`, or `td` elements. Classes like `bg-gray-50`, `border-gray-200`, `w-full`, `p-2`, `text-left` override the blog CSS and break the intended styling (blue headers, borders, spacing).

## Correct Format

Use plain semantic HTML. Wrap tables in `table-breakout-wrapper` for desktop breakout (tables expand beyond reading width on large screens).

```html
<div class="table-breakout-wrapper">
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</thead>
<tbody>
<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td></tr>
<tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td></tr>
</tbody>
</table>
</div>
```

## What the Blog CSS Provides

- **Header background:** `var(--ordio-blue)` (Ordio brand blue)
- **Header text:** White (#FFFFFF)
- **Borders:** Ordio blue
- **Spacing:** Padding and margins
- **Breakout:** On desktop (≥1024px), `table-breakout-wrapper` lets the table use more width; `blog-table-breakout.js` handles dynamic sizing

## Prohibited

- **Formulas/calculations in tables** – Use `<div class="formula-block">` instead. See [CONTENT_FORMAT_PATTERNS.md](CONTENT_FORMAT_PATTERNS.md).
- `bg-gray-50`, `bg-white`, or any Tailwind background on `th` or `thead`
- `border-gray-200` or Tailwind border classes on table elements
- `w-full`, `my-6`, `p-2`, `text-left` (let blog CSS handle layout)

## Automated checks and remediation

- **`validate-new-post.php`** emits a **WARN** if `content.html` still has those Tailwind patterns on table elements (WARN avoids breaking CI on legacy posts; treat as must-fix for new content and when touching a post). Run as part of `make blog-post-validate` / pre-publish.
- **Bulk fix existing posts:** `php v2/scripts/blog/fix-blog-table-styling.php --post={slug} --category={category} [--backup]` or `--all --backup`. Uses the **same detection** as `validate-new-post.php` (any `class` on `<table>`, or Tailwind-like classes on `thead`/`tbody`/`tr`/`th`/`td`). Strips those classes, wraps each `<table>` in `<div class="table-breakout-wrapper">` when not already wrapped, and recomputes `content.text` / `word_count` (UTF-8 safe).
- **CSS safety net:** [v2/css/blog-base.css](../../v2/css/blog-base.css) forces Ordio blue headers and readable body cell text for `#ordioTextContent` tables so stray utilities do not reproduce the “invisible header” bug (still fix markup—do not rely on overrides alone).

## References

- [v2/css/blog-base.css](v2/css/blog-base.css) – Ordio table styling (`.post-content-inner` / `.table-breakout-wrapper` / `#ordioTextContent` overrides)
- [v2/css/blog-post.css](v2/css/blog-post.css) – Reading width, mobile table behaviour
- [v2/js/blog-table-breakout.js](v2/js/blog-table-breakout.js) – Desktop breakout logic