Text Formatting and Color in Markdown Tables

How do I format text in a Markdown table cell?

A table cell takes any inline Markdown, exactly as in a paragraph. Block syntax (lists, headings, code fences) doesn't fit in a cell; see line breaks and lists in cells for the workarounds.

| Syntax        | Source                        | Use for                 |
| ------------- | ----------------------------- | ----------------------- |
| Bold          | **Required**                  | Key values, warnings    |
| Italic        | *optional*                    | Notes, types            |
| Bold italic   | ***Breaking***                | Rarely; very loud       |
| Strikethrough | ~~v1 endpoint~~               | Removed or deprecated   |
| Code          | `--dry-run`                   | Flags, paths, values    |
| Link          | [Docs](https://example.com)   | References              |
| Mixed         | **`POST`** /users *(admin)*   | Combine freely          |

Reference-style links ([Docs][docs]) and bare URLs also work; put the [docs]: https://… definition outside the table. If a value contains a pipe, escape it as \|, even inside backticks (see escaping pipes).

Formatting syntax reference

Subscript, superscript, keys and underline

GitHub allows a short list of inline HTML tags in cells. These four cover most needs that Markdown itself can't:

| Element     | Source                    |
| ----------- | ------------------------- |
| Subscript   | H<sub>2</sub>O            |
| Superscript | 10<sup>6</sup> requests   |
| Keys        | <kbd>Ctrl</kbd>+<kbd>K</kbd> |
| Underline   | <ins>must</ins> be set    |
| Fine print  | 99.9% <sub>excl. maintenance</sub> |

How do I color text in a Markdown table?

This is where platforms differ most. GitHub sanitizes HTML: it removes every style attribute and the <font> tag, so <span style="color:red"> renders as plain black text. Pick the method by where the table will be read.

On GitHub: math, emoji or badges

GitHub renders $…$ as math, and math supports \color. Wrap the words in \text{…} so spaces are kept:

| Check | Result                                |
| ----- | ------------------------------------- |
| Lint  | $\color{green}{\text{Passed}}$         |
| Tests | $\color{red}{\text{Failed (3)}}$       |
| Build | $\color{orange}{\text{Skipped}}$       |

Math color is a workaround, not formatting: the font changes, links won't work inside it, and screen readers may read it as an equation. For status columns, colored emoji are simpler and work everywhere, including chat apps:

| Service  | Status         |
| -------- | -------------- |
| API      | 🟢 Operational |
| Search   | 🟡 Degraded    |
| Billing  | 🔴 Outage      |

shields.io badges give you a colored label with readable text. They are images, so they also work on GitHub (more in images and badges):

MarkdownCopy

| Package | Status |
| ------- | ------ |
| core    | ![stable](https://img.shields.io/badge/status-stable-brightgreen) |
| plugins | ![beta](https://img.shields.io/badge/status-beta-orange) |
| legacy  | ![deprecated](https://img.shields.io/badge/status-deprecated-red) |

Preview

Package	Status
core
plugins
legacy

Open in editor : shields.io badges as colored labels

Where HTML styles are allowed

VS Code's preview, Obsidian and most static site generators (MkDocs, Docusaurus, Jekyll, Hugo with unsafe enabled) keep inline styles, so a <span> works:

| Service | Status |
| ------- | ------ |
| API     | <span style="color:#15803d">Operational</span> |
| Billing | <span style="color:#b91c1c">Outage</span> |

GitLab, Pandoc and kramdown

GitLab shows a color swatch next to a hex, RGB() or HSL() value written in backticks, which is handy for design-token tables:

| Token        | Value      |
| ------------ | ---------- |
| Primary      | `#0369A1`  |
| Danger       | `#B91C1C`  |

Pandoc and Quarto accept bracketed spans with attributes (HTML output). kramdown, used by Jekyll and GitHub Pages, adds attributes with an inline attribute list after a span:

| Service | Status                           |
| ------- | -------------------------------- |
| Billing | [Outage]{style="color:#b91c1c"}  |

| Service | Status                              |
| ------- | ----------------------------------- |
| Billing | *Outage*{: style="color:#b91c1c"}   |

Row, cell and header background color

Pipe syntax has no way to address a row, a cell or the header, so background and border colors always come from CSS or an HTML table. None of these work on GitHub, which removes styles and class attributes.

Whole-site styling is the clean option: one stylesheet rule colors every table header, stripes rows and sets border colors. Adjust the selector to your theme (.md-typeset in MkDocs Material, .markdown in Docusaurus):

/* Site stylesheet: header background, zebra rows, border color */
.markdown-body table thead th {
  background: #e0f2fe;
  color: #0c4a6e;
}
.markdown-body table tbody tr:nth-child(even) {
  background: #f8fafc;
}
.markdown-body table th,
.markdown-body table td {
  border-color: #cbd5e1;
}

One table only: in kramdown, attach a class with an attribute list on the line after the table, then target .status-table in CSS. In Obsidian, add a CSS snippet under Settings → Appearance.

| Service | Status  |
| ------- | ------- |
| API     | Up      |
| Billing | Down    |
{: .status-table}

One row or cell: only an HTML table can do it, by putting style on the <tr> or <td>. A <span style="background:…"> inside a pipe-table cell highlights the text only, not the cell.

<table>
  <tr style="background:#e0f2fe">
    <th>Service</th><th>Status</th>
  </tr>
  <tr>
    <td>API</td><td>Operational</td>
  </tr>
  <tr style="background:#fee2e2">
    <td>Billing</td><td>Outage</td>
  </tr>
</table>

Bold headers, bold rows and bold columns

Header cells render as <th>, which are bold by default, so a “bold header” needs no markup. Wrapping header text in ** is harmless and helps only in themes that unbold headers:

| **Name** | **Role** |
| -------- | -------- |
| Ada      | Engineer |

Emphasis can't cross a pipe, so a bold row, such as a totals line, needs ** around each cell. The same goes for a bold first column.

| Region  | Q1     | Q2     |
| ------- | -----: | -----: |
| EU      | 1.2M   | 1.4M   |
| US      | 2.1M   | 2.3M   |
| **Total** | **3.3M** | **3.7M** |

Formatting and color support by platform

Common mistakes and fixes

Emphasis that crosses a pipe

Cells are split before emphasis is parsed, so ** opened in one cell can't close in the next. The asterisks show up as text.

| Status       | Owner |
| ------------ | ----- |
| **Blocked | Ada** |

| Status      | Owner   |
| ----------- | ------- |
| **Blocked** | **Ada** |

Accidental strikethrough from tildes

GitHub treats a pair of single tildes as strikethrough, so ranges written with a tilde, such as “10~20 ms, 30~40 ms”, may come out partly struck through. Escape them as \~ or write the range with a dash.

| Endpoint | Latency            |
| -------- | ------------------ |
| /search  | 10~20 ms, 30~40 ms |

| Endpoint | Latency              |
| -------- | -------------------- |
| /search  | 10\~20 ms, 30\~40 ms |

Stray asterisks and underscores

Values like 5 * 3 * 2 or *.log in two places can turn into italics. Escape the asterisk (\*) or put the value in backticks. The table validator catches unclosed code spans and unescaped pipes.

Colors that vanish on GitHub

<font color>, <span style> and <td bgcolor> all render as plain text on GitHub. If the table lives in a README, switch to math color, emoji or badges.

When to switch to HTML or CSS

Formatting individual words is fine in Markdown. Move to an HTML table, or to CSS on your site, when you need background colors, borders, per-row styles or font sizes, and the renderer allows it. On GitHub, no amount of HTML brings back styles; use icons and badges and keep the table plain.

The Markdown to HTML converter produces a table you can add styles to. For everything else about table structure, see Markdown table syntax; for status columns, see checkboxes and status icons, and for colored math, see math in tables.

Frequently asked questions