Table Formatting in Docusaurus

Docusaurus supports both standard Markdown tables and advanced HTML tables. Each has its own strengths depending on your use case.

1. Standard Markdown Table (Comparison)

Markdown tables are perfect for simple data comparisons. They are easy to read and maintain in the source code.

Feature	Standard Markdown	HTML/JSX
Ease of Use	Very Easy	Moderate
Complexity	Low	High
Cell Spanning	No	Yes
Custom Styling	Limited	Flexible

| Feature | Standard Markdown | HTML/JSX |
| :--- | :---: | :---: |
| **Ease of Use** | Very Easy | Moderate |
| **Complexity** | Low | High |

2. Styled Markdown Table (Pricing)

You can use alignment markers (:---, :---:, ---:) to control text flow and include inline formatting.

Service Tier	Storage	Bandwidth	Price
Basic	5GB	100GB	`$0.00`
Pro	50GB	1TB	`$10.99`
Enterprise	Unlimited	Unlimited	`Contact Us`

| Service Tier | Storage | Bandwidth | Price |
| :--- | :--- | :--- | ---: |
| **Basic** | 5GB | 100GB | `$0.00` |
| **Pro** | 50GB | 1TB | `$10.99` |
| **Enterprise** | <mark>Unlimited</mark> | <mark>Unlimited</mark> | `Contact Us` |

3. Basic HTML Table (Custom Layout)

HTML tables allow you to wrap content differently and provide more structural control.

ID	Status	Description
#101	Active	Standard user account
#102	Locked	Suspicious activity detected

<table>
  <thead>
    <tr style={{backgroundColor: '#e3f2fd'}}>
      <th>ID</th>
      <th>Status</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#101</td>
      <td><span style={{color: 'green'}}>Active</span></td>
      <td>Standard user account</td>
    </tr>
    <tr>
      <td>#102</td>
      <td><span style={{color: 'red'}}>Locked</span></td>
      <td>Suspicious activity detected</td>
    </tr>
  </tbody>
</table>

4. Advanced HTML Table (Merged Cells)

HTML is required when you need to merge rows or columns using rowSpan and colSpan.

Time	Monday	Tuesday	Wednesday
09:00 - 10:00	Deep Work Session	Planning	Code Review
10:00 - 11:00	Deep Work Session	Design Sync	Standup
11:00 - 12:00	Weekly General Meeting (All Teams)

<table className="advanced-table">
  <thead>
    <tr style={{backgroundColor: '#f5f5f5'}}>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>09:00 - 10:00</td>
      <td rowSpan="2" style={{verticalAlign: 'middle', textAlign: 'center', backgroundColor: '#fff9c4'}}>
        <b>Deep Work Session</b>
      </td>
      <td>Planning</td>
      <td>Code Review</td>
    </tr>
    <tr>
      <td>10:00 - 11:00</td>
      <td>Design Sync</td>
      <td>Standup</td>
    </tr>
    <tr>
      <td>11:00 - 12:00</td>
      <td colSpan="3" style={{textAlign: 'center', backgroundColor: '#e1f5fe'}}>
        <i>Weekly General Meeting (All Teams)</i>
      </td>
    </tr>
  </tbody>
</table>

5. Table with Components (Rich Content)

Since we are using MDX, we can embed React components directly inside table cells.

Documentation Path	Current Status	Action
`/docs/setup`	STABLE	View Source
`/docs/experimental`	BETA	View Source
`/docs/legacy`	DEPRECATED	View Source

| Documentation Path | Current Status | Action |
| :--- | :--- | :---: |
| `/docs/setup` | <StatusBadge type="stable" /> | [View Source](...) |

Best Practices

Use Markdown for 90% of your tables to keep the code clean.
Use HTML only when you need complex cell spanning or highly specific inline styling.
Keep it Responsive: Very wide tables may break layouts on mobile. Consider splitting data into smaller tables if possible.

1. Standard Markdown Table (Comparison)​

2. Styled Markdown Table (Pricing)​

3. Basic HTML Table (Custom Layout)​

4. Advanced HTML Table (Merged Cells)​

5. Table with Components (Rich Content)​

Best Practices​