Markdown table formatting

Basic table syntax

| Column A | Column B |
| --- | --- |
| Value A | Value B |

Rendered:

Column A	Column B
Value A	Value B

Required parts

# header row
| Column A | Column B |   

# Separator row.
| --- | --- |

# Body row.
| Value A | Value B |

Column alignment

Use colons in the separator row.

| Left aligned | Center aligned | Right aligned |
| :--- | :---: | ---: |
| Text | Text | 100 |
| Text | Text | 250 |

Rendered:

Left aligned	Center aligned	Right aligned
Text	Text	100
Text	Text	250

Syntax:

| :--- | left aligned |
| :---: | center aligned |
| ---: | right aligned |

Escaping pipes inside cells

Use \| when needs to show a literal pipe character.

| Character | Markdown |
| --- | --- |
| Pipe | `\|` |

Rendered:

Character	Markdown
Pipe	|

Without the backslash, Markdown reads the pipe as a column separator.

Line breaks inside cells

| Task | Notes |
| --- | --- |
| Build layout | First line
Second line |

Task	Notes
Build layout	First line
Second line

Raw HTML table

HTML when Markdown table syntax gets too limited.

<table>
  <caption>Project phases</caption>
  <thead>
    <tr>
      <th>Phase</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Research</td>
      <td>Understand the context.</td>
    </tr>
    <tr>
      <td>Strategy</td>
      <td>Decide the direction.</td>
    </tr>
  </tbody>
</table>

Styling Markdown tables

styling tables from a page/component.

---
import MarkdownSection from '@/components/MarkdownSection.astro"

interface Props {
  title: string
  description: string
}

const { title, description } = Astro.props;
---
<div class="markdown-content">
  <MarkdownSection
    title = "Page title".
    description = "Page description"
  />
</div>

<style>
  .markdown-content :global(table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    white-space: nowrap;
  }

  .markdown-content :global(th),
  .markdown-content :global(td) {
    border: 1px solid currentColor;
    padding: 0.5rem 0.75rem;
  }
</style>

Styling notes

display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
white-space: nowrap;
border: 1px solid currentColor;
padding: 0.5rem 0.75rem;

display: block; Allows the table to behave like a scrollable block.
max-width: 100%; Keeps the table inside the note content width.
overflow-x: auto; Adds horizontal scroll when the table is wider than the container.
border-collapse: collapse; Makes table borders share a single line instead of doubling up.
white-space: nowrap; Stops cell text from wrapping, so wide tables scroll instead of breaking lines.
border: 1px solid currentColor; Adds visible borders using the current text color.
padding: 0.5rem 0.75rem; Adds spacing inside cells.