Tables

Create rich, structured tables in your Mordoc documentation using markdown table syntax.

8 min read

Tables

Tables organize structured data into rows and columns, making information easy to scan and compare. Mordoc supports markdown tables with rich formatting options.

Basic Table Syntax

Create tables using pipes (|) and hyphens (-):

Markdown

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |

Result:

Header 1	Header 2	Header 3
Row 1	Data	Data
Row 2	Data	Data

Table Components

Headers

The first row defines column headers:

Markdown

| Name | Email | Role |
|------|-------|------|
| John | john@example.com | Admin |
| Jane | jane@example.com | Editor |

Result:

Name	Email	Role
John	john@example.com	Admin
Jane	jane@example.com	Editor

Alignment

Control column alignment using colons in the separator row:

Markdown

| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|--------------:|
| Text         | Text           | Text          |
| More text    | More text      | More text     |

Result:

Left-aligned	Center-aligned	Right-aligned
Text	Text	Text
More text	More text	More text

Alignment Syntax:

:--- Left-aligned (default)
:---: Center-aligned
---: Right-aligned

Formatting Within Tables

Text Formatting

Use markdown formatting inside table cells:

Markdown

| Feature | Status | Notes |
|---------|--------|-------|
| **Bold text** | *Italic text* | `Code text` |
| Normal text | ~~Strikethrough~~ | Regular |

Result:

Feature	Status	Notes
Bold text	Italic text	`Code text`
Normal text	~~Strikethrough~~	Regular

Links in Tables

Markdown

| Resource | Link |
|----------|------|
| Documentation | [Read docs](/get-started/creating-project) |
| GitHub | [View source](https://github.com) |
| Website | [Visit site](https://example.com) |

Result:

Resource	Link
Documentation	Read docs
GitHub	View source
Website	Visit site

Code in Tables

Markdown

| Command | Description |
|---------|-------------|
| `npm install` | Install dependencies |
| `npm run dev` | Start development server |
| `npm run build` | Build for production |

Result:

Command	Description
`npm install`	Install dependencies
`npm run dev`	Start development server
`npm run build`	Build for production

Images in Tables (HTML Required)

For images, use HTML <img> tags:

Markdown

| Icon | Feature | Description |
|------|---------|-------------|
| <img src="/icons/fast.svg" width="24" alt="Fast" /> | Fast | Quick build times |
| <img src="/icons/secure.svg" width="24" alt="Secure" /> | Secure | Built-in security |

Advanced Table Patterns

Comparison Tables

Markdown

| Feature | Mordoc | Alternative A | Alternative B |
|---------|:------:|:-------------:|:-------------:|
| Open Source | ✓ | ✓ | ✗ |
| Self-Hosted | ✓ | ✗ | ✗ |
| Custom Themes | ✓ | Limited | ✗ |
| Price | Free | $99/mo | $49/mo |

Result:

Feature	Mordoc	Alternative A	Alternative B
Open Source	✓	✓	✗
Self-Hosted	✓	✗	✗
Custom Themes	✓	Limited	✗
Price	Free	$99/mo	$49/mo

API Reference Tables

Markdown

| Parameter | Type | Required | Description |
|-----------|------|:--------:|-------------|
| `name` | string | ✓ | Project name |
| `version` | string | ✓ | Version number |
| `description` | string | ✗ | Project description |
| `author` | string | ✗ | Author name |

Result:

Parameter	Type	Required	Description
`name`	string	✓	Project name
`version`	string	✓	Version number
`description`	string	✗	Project description
`author`	string	✗	Author name

Configuration Tables

Markdown

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `port` | number | `3000` | Development server port |
| `theme` | string | `"light"` | Default theme mode |
| `search` | boolean | `true` | Enable search feature |

Result:

Option	Type	Default	Description
`port`	number	`3000`	Development server port
`theme`	string	`"light"`	Default theme mode
`search`	boolean	`true`	Enable search feature

Status Tables

Markdown

| Endpoint | Method | Status | Last Checked |
|----------|--------|:------:|--------------|
| `/api/users` | GET | 🟢 Online | 2024-01-15 |
| `/api/posts` | POST | 🟢 Online | 2024-01-15 |
| `/api/auth` | POST | 🟡 Degraded | 2024-01-15 |
| `/api/files` | GET | 🔴 Offline | 2024-01-15 |

Result:

Endpoint	Method	Status	Last Checked
`/api/users`	GET	🟢 Online	2024-01-15
`/api/posts`	POST	🟢 Online	2024-01-15
`/api/auth`	POST	🟡 Degraded	2024-01-15
`/api/files`	GET	🔴 Offline	2024-01-15

Complex Data Tables

Multi-Line Content

For longer content, keep cells concise or break into multiple tables:

Markdown

| Step | Action | Expected Result |
|------|--------|----------------|
| 1 | Run `npm install` | Dependencies installed successfully |
| 2 | Run `npm run dev` | Server starts on port 3000 |
| 3 | Open browser | Documentation site loads |

Nested Information

Use sub-bullets with HTML when needed:

Markdown

| Category | Items |
|----------|-------|
| Frontend | <ul><li>React</li><li>Vue</li><li>Angular</li></ul> |
| Backend | <ul><li>Node.js</li><li>Python</li><li>Ruby</li></ul> |

For highly complex nested data, consider using lists or separate sections instead of forcing it into a table.

Table Best Practices

When to Use Tables

Good use cases:

Comparing features or options
API parameter documentation
Configuration options
Keyboard shortcuts
Version compatibility matrices
Status dashboards

Poor use cases:

Long paragraphs of text
Deeply nested information
Very wide tables (6+ columns)
Content that works better as a list

Table Design

Keep It Simple: Fewer columns are easier to read
Consistent Alignment: Use alignment purposefully
- Left: Text, names, descriptions
- Center: Checkmarks, status icons
- Right: Numbers, dates
Header Clarity: Make column headers clear and concise
Readable Width: Avoid extremely wide or narrow columns

Mobile Considerations

Tables can be difficult on mobile devices. For critical information:

Keep tables narrow (3-4 columns maximum)
Put most important info in leftmost columns
Consider alternative layouts for complex data

Styling Tables

Tables inherit default styling but can be customized through the configuration.

Edit config/styles/main.json:

Json

{
  "tables": {
    "borderColor": "#e5e7eb",
    "headerBackground": "#f9fafb",
    "headerColor": "#111827",
    "rowHoverBackground": "#f3f4f6",
    "stripedRows": true,
    "fontSize": "0.875rem"
  }
}

Available Style Properties

Property	Type	Description	Default
`borderColor`	Color	Border line color	`#e5e7eb`
`headerBackground`	Color	Header row background	`#f9fafb`
`headerColor`	Color	Header text color	`#111827`
`rowHoverBackground`	Color	Row background on hover	`#f3f4f6`
`stripedRows`	Boolean	Alternate row colors	`true`
`fontSize`	Size	Table text size	`0.875rem`

Common Patterns

Feature Comparison

Markdown

## Hosting Options

| Feature | Shared | VPS | Dedicated |
|---------|:------:|:---:|:---------:|
| Price/month | $5 | $20 | $100 |
| Storage | 10GB | 50GB | 500GB |
| RAM | 512MB | 2GB | 16GB |
| Support | Email | Priority | 24/7 Phone |
| Best for | Personal | Small Business | Enterprise |

Version Compatibility

Markdown

## Browser Support

| Browser | Minimum Version | Recommended | Notes |
|---------|:---------------:|:-----------:|-------|
| Chrome | 90+ | Latest | Full support |
| Firefox | 88+ | Latest | Full support |
| Safari | 14+ | Latest | Limited CSS Grid |
| Edge | 90+ | Latest | Full support |

Command Reference

Markdown

## CLI Commands

| Command | Description | Options |
|---------|-------------|---------|
| `mordoc dev` | Start dev server | `--port`, `--host` |
| `mordoc build` | Build for production | `--outDir` |
| `mordoc preview` | Preview build | `--port` |

Keyboard Shortcuts

Markdown

## Editor Shortcuts

| Action | Windows/Linux | macOS |
|--------|:-------------:|:-----:|
| Save | `Ctrl + S` | `⌘ + S` |
| Find | `Ctrl + F` | `⌘ + F` |
| Replace | `Ctrl + H` | `⌘ + ⌥ + F` |
| Format | `Shift + Alt + F` | `⇧ + ⌥ + F` |

Troubleshooting

Table Not Rendering

Ensure pipes align vertically
Check separator row has correct syntax
Verify no missing pipes at row ends
Make sure there's a blank line before the table

Alignment Not Working

Check colon placement in separator row
Ensure at least three hyphens in each separator cell
Verify no typos in alignment syntax

Content Overflow

Shorten cell content
Use abbreviations or links to detailed pages
Consider splitting into multiple smaller tables
Use HTML for more control

Very wide tables may require horizontal scrolling on mobile devices. Test your tables on different screen sizes.

Examples

Complete API Documentation

Markdown

# User API Reference

## Endpoints

| Method | Endpoint | Description | Auth Required |
|--------|----------|-------------|:-------------:|
| GET | `/api/users` | List all users | ✓ |
| GET | `/api/users/:id` | Get user by ID | ✓ |
| POST | `/api/users` | Create new user | ✓ |
| PUT | `/api/users/:id` | Update user | ✓ |
| DELETE | `/api/users/:id` | Delete user | ✓ |

## Request Parameters

| Parameter | Type | Required | Description |
|-----------|------|:--------:|-------------|
| `email` | string | ✓ | User email address |
| `name` | string | ✓ | Full name |
| `role` | string | ✗ | User role (admin, editor, viewer) |
| `active` | boolean | ✗ | Account status (default: true) |

## Response Codes

| Code | Status | Description |
|:----:|--------|-------------|
| 200 | Success | Request completed successfully |
| 201 | Created | Resource created successfully |
| 400 | Bad Request | Invalid request parameters |
| 401 | Unauthorized | Authentication required |
| 404 | Not Found | Resource not found |
| 500 | Server Error | Internal server error |

Next Steps

Code Blocks - Add syntax-highlighted code examples
Callouts - Create styled alert and info boxes
Cards - Build card layouts and grids