Tables Demo¶

This page demonstrates various table features and styling options available in MkDocs with Material theme.

Basic Tables¶

Simple Table¶

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Table with Different Alignments¶

Left Aligned	Center Aligned	Right Aligned	Default
Left	Center	Right	Default
Text here	Text here	Text here	Text
More content	More content	More content	Content

Advanced Tables¶

Table with Links and Formatting¶

Feature	Description	Documentation	Status
Tables	Basic table support with enhanced styling	Table Docs	✅ Stable
Sorting	Client-side table sorting capabilities	Sort Guide	✅ Stable
Filtering	Search and filter table content	Filter Docs	🚧 Beta
Export	Export table data to CSV/Excel	Export Guide	❌ Planned

Table with Code¶

Language	Hello World Example	File Extension
Python	`print("Hello World")`	`.py`
JavaScript	`console.log("Hello World")`	`.js`
Java	`System.out.println("Hello World");`	`.java`
Go	`fmt.Println("Hello World")`	`.go`

Table with Images and Badges¶

Project	Stars	Build Status	Coverage
MkDocs
Material

Complex Data Tables¶

Performance Metrics¶

Operation	Time (ms)	Memory (MB)	CPU (%)	Notes
Page Load	245	32.5	12	Initial load with cache
Search Query	18	2.1	8	Average of 100 queries
Build Site	3,420	156.3	45	Full site build
Hot Reload	89	8.7	5	Single file change
Export PDF	5,210	245.6	78	100-page document

Configuration Reference¶

Parameter	Type	Default	Required	Description
`site_name`	`string`	-	✅ Yes	The name of your project documentation
`site_url`	`string`	`null`	❌ No	Canonical URL of the site
`site_description`	`string`	`null`	❌ No	Site description for SEO
`repo_url`	`string`	`null`	❌ No	Repository URL for source links
`repo_name`	`string`	auto	❌ No	Repository name for display
`edit_uri`	`string`	auto	❌ No	Path to edit source files

Responsive Tables¶

Wide Table with Horizontal Scroll¶

ID	Username	Full Name	Email	Department	Role	Start Date	Location	Status	Actions
001	jdoe	John Doe	john.doe@example.com	Engineering	Senior Developer	2020-01-15	New York	Active	Edit Delete
002	jsmith	Jane Smith	jane.smith@example.com	Marketing	Marketing Manager	2019-06-20	London	Active	Edit Delete
003	bjohnson	Bob Johnson	bob.johnson@example.com	Sales	Sales Representative	2021-03-10	Tokyo	Active	Edit Delete
004	agarcia	Ana Garcia	ana.garcia@example.com	HR	HR Specialist	2022-02-01	Madrid	Active	Edit Delete
005	mchen	Michael Chen	michael.chen@example.com	Engineering	DevOps Engineer	2021-11-15	Singapore	Active	Edit Delete

Styled Tables¶

Pricing Table¶

Plan	Features	Price	Best For
Free	• 1 User • 10 Projects • Community Support • Basic Features	$0/month	Personal projects
Pro ⭐	• 5 Users • Unlimited Projects • Email Support • Advanced Features • API Access	$29/month	Small teams
Business	• 25 Users • Unlimited Projects • Priority Support • All Features • Custom Integrations	$99/month	Growing businesses
Enterprise	• Unlimited Users • Unlimited Projects • 24/7 Phone Support • All Features • SLA Guarantee • Custom Development	Custom	Large organizations

Comparison Table¶

Feature	MkDocs	Sphinx	Jekyll	Hugo
Language	Python	Python	Ruby	Go
Speed	⚡⚡⚡	⚡⚡	⚡⚡	⚡⚡⚡⚡
Themes	Good	Excellent	Good	Excellent
Plugins	Good	Excellent	Good	Limited
Learning Curve	Easy	Hard	Medium	Medium
Documentation	Excellent	Excellent	Good	Good
API Docs	Limited	Excellent	Limited	Limited
Live Reload	✅	✅	✅	✅
Search	✅	✅	❌	✅
PDF Export	✅	✅	❌	❌

Feature Matrix¶

Component	Free	Pro	Business	Enterprise
Basic Features	✅	✅	✅	✅
Advanced Search	❌	✅	✅	✅
API Access	❌	✅	✅	✅
Custom Themes	❌	❌	✅	✅
Priority Support	❌	❌	✅	✅
SLA	❌	❌	❌	✅
Custom Development	❌	❌	❌	✅

Tables with Mixed Content¶

Command Reference¶

Command	Description	Example	Output
`mkdocs serve`	Start development server	`bash<br>mkdocs serve --dev-addr=0.0.0.0:8080<br>`	Serves on http://0.0.0.0:8080
`mkdocs build`	Build static site	`bash<br>mkdocs build --clean<br>`	Creates `site/` directory
`mkdocs deploy`	Deploy to GitHub Pages	`bash<br>mkdocs gh-deploy --force<br>`	Pushes to `gh-pages` branch

API Endpoints¶

Endpoint	Method	Parameters	Response	Example
`/api/users`	`GET`	`?page=1&limit=10`	User list	`json<br>{<br> "users": [...],<br> "total": 100<br>}<br>`
`/api/users/{id}`	`GET`	`id: string`	User object	`json<br>{<br> "id": "123",<br> "name": "John"<br>}<br>`
`/api/users`	`POST`	`json<br>{<br> "name": "string",<br> "email": "string"<br>}<br>`	Created user	`201 Created`

Nested Tables¶

Database Schema¶

Table Name

Columns

Indexes

Relationships

users

Column	Type
id	UUID
email	VARCHAR
created_at	TIMESTAMP

• id (PRIMARY)
• email (UNIQUE)

Has many: posts, comments

posts

Column	Type
id	UUID
user_id	UUID
title	VARCHAR
content	TEXT

• id (PRIMARY)
• user_id (INDEX)

Belongs to: users
Has many: comments

Interactive Tables¶

Sortable Table¶

Click on column headers to sort:

| Name | Age | City | Score | |------|-----|------|-------| | Alice | 28 | New York | 95 | | Bob | 34 | London | 87 | | Charlie | 25 | Tokyo | 92 | | Diana | 31 | Paris | 89 | | Eve | 29 | Berlin | 94 |

Filterable Table¶

| Product | Category | Price | Stock | Rating | |---------|----------|-------|-------|--------| | Laptop Pro | Electronics | $1,299 | 45 | ⭐⭐⭐⭐⭐ | | Wireless Mouse | Accessories | $29 | 156 | ⭐⭐⭐⭐ | | USB-C Hub | Accessories | $49 | 89 | ⭐⭐⭐⭐ | | Monitor 4K | Electronics | $599 | 23 | ⭐⭐⭐⭐⭐ | | Keyboard Mechanical | Accessories | $149 | 67 | ⭐⭐⭐⭐⭐ | | Webcam HD | Electronics | $79 | 112 | ⭐⭐⭐ |

Accessibility Considerations¶

Accessible Table Example¶

**Q4 2023 Sales Performance**
All figures in thousands USD
Region	Q1	Q2	Q3	Q4	Total
North America	$125	$147	$168	$195	$635
Europe	$89	$95	$112	$129	$425
Asia Pacific	$67	$78	$94	$108	$347
Total	$281	$320	$374	$432	$1,407

Custom Styled Tables¶

Gradient Header Table¶

Feature	Standard	Premium	Ultimate
Storage	10 GB	100 GB	Unlimited
Bandwidth	100 GB	1 TB	Unlimited
Support	Email	Priority	24/7 Phone

Status Table¶

Service	Status	Uptime	Last Check
API Server	🟢 Operational	99.98%	2 mins ago
Database	🟢 Operational	99.95%	2 mins ago
CDN	🟡 Degraded	98.50%	2 mins ago
Email Service	🟢 Operational	100.00%	2 mins ago
Search	🔴 Down	95.20%	2 mins ago

Note: Tables are automatically styled by Material for MkDocs. Additional features like sorting and filtering require JavaScript enhancements.