Markdown Tables
Tables are important tools for displaying structured data. Markdown provides simple table syntax that makes it easy to create neatly formatted tables. This chapter will detail various uses of Markdown tables.
Basic Table Syntax
Syntax Format
Use | to separate columns, and - to separate headers from content:
markdown
| Column 1 | Column 2 | Column 3 |
|---------|---------|---------|
| Content 1 | Content 2 | Content 3 |
| Content 4 | Content 5 | Content 6 |Effect:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Content 1 | Content 2 | Content 3 |
| Content 4 | Content 5 | Content 6 |
Simplest Format
The number of - in header separator doesn't affect the result, at least one is needed:
markdown
| Name | Age | City |
|------|-----|------|
| Zhang San | 25 | Beijing |
| Li Si | 30 | Shanghai |Effect:
| Name | Age | City |
|---|---|---|
| Zhang San | 25 | Beijing |
| Li Si | 30 | Shanghai |
Alignment
Left Alignment
markdown
| Left Align | Center | Right Align |
|:----------|:------:|-----------:|
| Left | Center | Right |Effect:
| Left Align | Center | Right Align |
|---|---|---|
| Left | Center | Right |
Center Alignment
markdown
| Column 1 | Column 2 | Column 3 |
|:--------:|:--------:|:--------:|
| Center | Center | Center |Effect:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Center | Center | Center |
Right Alignment
markdown
| Left | Center | Right |
|------|:------:|-------:|
| Left | Center | Right |Effect:
| Left | Center | Right |
|---|---|---|
| Left | Center | Right |
Mixed Alignment
markdown
| Name | Age | Score |
|:-----|:----:|------:|
| Zhang San | 25 | 95 |
| Li Si | 30 | 88 |Effect:
| Name | Age | Score |
|---|---|---|
| Zhang San | 25 | 95 |
| Li Si | 30 | 88 |
Table Content
Text Content
markdown
| Name | Position | Department |
|------|----------|------------|
| Zhang San | Engineer | Technical |
| Li Si | Designer | Design |Effect:
| Name | Position | Department |
|---|---|---|
| Zhang San | Engineer | Technical |
| Li Si | Designer | Design |
Numeric Content
markdown
| Number | Quantity | Price |
|--------|----------|-------|
| 001 | 100 | 99.00 |
| 002 | 200 | 198.00 |Effect:
| Number | Quantity | Price |
|---|---|---|
| 001 | 100 | 99.00 |
| 002 | 200 | 198.00 |
Link Content
markdown
| Website | Link |
|---------|------|
| Google | [Google](https://google.com) |
| GitHub | [GitHub](https://github.com) |Effect:
| Website | Link |
|---|---|
| GitHub | GitHub |
Image Content
markdown
| Project | Screenshot |
|---------|------------|
| Project A |  |
| Project B |  |Effect:
| Project | Screenshot |
|---|---|
| Project A | |
| Project B |
Code Content
markdown
| Language | Code Example |
|----------|--------------|
| Python | `print("Hello")` |
| JavaScript | `console.log("Hello")` |Effect:
| Language | Code Example |
|---|---|
| Python | print("Hello") |
| JavaScript | console.log("Hello") |
HTML Content
markdown
| Function | Action |
|----------|--------|
| Submit | <button>Submit</button> |
| Cancel | <button>Cancel</button> |Effect:
| Function | Action |
|---|---|
| Submit | |
| Cancel |
Complex Tables
Multi-line Content
Use <br> for line breaks in cells:
markdown
| Name | Description |
|------|-------------|
| Zhang San | Software Engineer<br>Responsible for frontend |
| Li Si | Product Manager<br>Responsible for requirements |Effect:
| Name | Description |
|---|---|
| Zhang San | Software Engineer Responsible for frontend |
| Li Si | Product Manager Responsible for requirements |
Including Special Characters
Special characters don't need escaping:
markdown
| Symbol | Meaning |
|--------|---------|
| `#` | Hash |
| `*` | Asterisk |
| `|` | Vertical bar |Effect:
| Symbol | Meaning |
|---|---|
# | Hash |
* | Asterisk |
| ` | ` |
Empty Cells
markdown
| Name | Age | City |
|------|-----|------|
| Zhang San | 25 | Beijing |
| Li Si | | Shanghai |
| Wang Wu | 28 | |Effect:
| Name | Age | City |
|---|---|---|
| Zhang San | 25 | Beijing |
| Li Si | Shanghai | |
| Wang Wu | 28 |
Table Styles
Add Title
Add title above table:
markdown
### Employee Information Table
| Name | Age | Department |
|------|-----|------------|
| Zhang San | 25 | Technical |
| Li Si | 30 | Marketing |Effect:
Employee Information Table
| Name | Age | Department |
|---|---|---|
| Zhang San | 25 | Technical |
| Li Si | 30 | Marketing |
Table Caption
Add caption below table:
markdown
| Project | Progress |
|---------|----------|
| Project A | 80% |
| Project B | 60% |
*Table 1*: Project progress statisticsEffect:
| Project | Progress |
|---|---|
| Project A | 80% |
| Project B | 60% |
Table 1: Project progress statistics
Table Groups
markdown
#### Basic Information
| Name | Age | Gender |
|------|-----|--------|
| Zhang San | 25 | Male |
| Li Si | 30 | Female |
#### Contact Information
| Phone | Email |
|-------|-------|
| 138-0000-0000 | zhangsan@example.com |
| 139-0000-0000 | lisi@example.com |Effect:
Basic Information
| Name | Age | Gender |
|---|---|---|
| Zhang San | 25 | Male |
| Li Si | 30 | Female |
Contact Information
| Phone | |
|---|---|
| 138-0000-0000 | zhangsan@example.com |
| 139-0000-0000 | lisi@example.com |
Table Best Practices
1. Keep it Simple
markdown
✅ Simple and clear
| Name | Age |
|------|-----|
| Zhang San | 25 |
❌ Too complex
Table containing too many columns and rows2. Meaningful Column Names
markdown
✅ Clear column names
| Name | Department | Position |
|------|-----------|----------|
| Zhang San | Technical | Engineer |
❌ Vague column names
| A | B | C |
|---|---|---|
| Zhang San | Technical | Engineer |3. Align Numbers
markdown
✅ Numbers right aligned
| Name | Age | Score |
|:-----|-----:|-----:|
| Zhang San | 25 | 95 |
| Li Si | 30 | 88 |
❌ Numbers left aligned (hard to compare)
| Name | Age | Score |
|:-----|:----:|:----:|
| Zhang San | 25 | 95 |
| Li Si | 30 | 88 |4. Use Blank Lines Reasonably
markdown
## Chapter Title
| Table 1 |
|---------|
| Content 1 |
---
| Table 2 |
|---------|
| Content 2 |5. Limit Number of Columns
markdown
✅ Reasonable number of columns
| Name | Age | City |
|------|-----|------|
❌ Too many columns
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | ... |
|---------|---------|---------|---------|---------|---------|-----|Table Support on Different Platforms
GitHub
- Full support
- Supports HTML content
- Auto formatting
GitLab
- Full support
- Supports more features
- Supports merged cells (extension)
Typora
- Real-time preview
- Visual editing
- Supports custom table styles
VS Code
- Needs plugin support
- Supports basic tables
- Auto alignment feature
Practical Examples
Product Comparison Table
markdown
## Product Comparison
| Feature | Product A | Product B | Product C |
|---------|-----------|-----------|-----------|
| Price | ¥99 | ¥199 | ¥299 |
| Features | Basic | Standard | Advanced |
| Support | Email | Email + Phone | Email + Phone + Dedicated |
| Recommended | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |Effect:
Product Comparison
| Feature | Product A | Product B | Product C |
|---|---|---|---|
| Price | ¥99 | ¥199 | ¥299 |
| Features | Basic | Standard | Advanced |
| Support | Email + Phone | Email + Phone + Dedicated | |
| Recommended | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
API Parameter Table
markdown
## API Parameter Description
| Parameter | Type | Required | Description | Example |
|-----------|------|----------|-------------|---------|
| `userId` | string | Yes | User ID | "123456" |
| `name` | string | Yes | Username | "Zhang San" |
| `age` | number | No | Age | 25 |
| `email` | string | No | Email | "test@example.com" |
**Table 1**: User creation API parameter descriptionProgress Tracking Table
markdown
## Project Progress
| Task | Owner | Progress | Status |
|------|-------|----------|--------|
| Requirements Analysis | Zhang San | 100% | ✅ Completed |
| System Design | Li Si | 100% | ✅ Completed |
| Frontend Development | Wang Wu | 80% | 🔄 In Progress |
| Backend Development | Zhao Liu | 70% | 🔄 In Progress |
| Testing | Qian Qi | 0% | ⏳ Not Started |
*Update time: 2024-01-15*Pricing Table
markdown
## Package Pricing
| Package | Price | Storage | Traffic | Notes |
|---------|-------|---------|---------|-------|
| Basic | Free | 10GB | 10GB/month | Suitable for individuals |
| Standard | ¥99/month | 100GB | 100GB/month | Suitable for small teams |
| Professional | ¥299/month | 1TB | 1TB/month | Suitable for large teams |
| Enterprise | Custom | Unlimited | Unlimited | Includes dedicated services |Statistics Table
markdown
## Data Statistics
| Month | Visits | Conversion Rate | Revenue |
|-------|--------|----------------|---------|
| January | 10,000 | 2.5% | ¥5,000 |
| February | 12,000 | 2.8% | ¥6,500 |
| March | 15,000 | 3.0% | ¥8,000 |
| April | 18,000 | 3.2% | ¥10,000 |
| **Total** | **55,000** | **2.9%** | **¥29,500** |
*Data source: System statistics*Common Questions
Q: How to use vertical bar | in tables?
A: Use HTML entity |:
markdown
| Symbol | Representation |
|--------|----------------|
| Vertical bar | | |Effect:
| Symbol | Representation |
|---|---|
| Vertical bar | | |
Q: How to merge cells?
A: Standard Markdown doesn't support, use HTML:
html
<table>
<tr>
<td>Cell 1</td>
<td colspan="2">Merge two columns</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>Q: Table display is messy?
A: Check the following:
- Are column separators
|aligned - Is header separator
---correct - Do special characters need escaping
Q: How to add table borders?
A: Use HTML + CSS:
html
<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black;">Header</th>
</tr>
<tr>
<td style="border: 1px solid black;">Content</td>
</tr>
</table>Summary
This chapter detailed Markdown table usage:
- Basic syntax: Use
|and-to create tables - Alignment: Left, center, right alignment
- Table content: Text, numbers, links, images, code
- Complex tables: Multi-line content, special characters, empty cells
- Best practices: Keep simple, meaningful column names, reasonable alignment
- Practical applications: Product comparison, API parameters, progress tracking
Mastering tables can effectively display structured data, making your documents clearer and easier to understand.
Next: Learn how to use Markdown Horizontal Rules.