Tables ShowcaseLink to section

This page demonstrates various table styles and configurations supported by the markdown system.

Basic TableLink to section

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

Column AlignmentLink to section

Tables support left, center, and right alignment:

Left Aligned	Center Aligned	Right Aligned
Left	Center	Right
Text	Text	Text
Lorem	Ipsum	Dolor

Complex ContentLink to section

Tables can contain various content types:

Feature	Description	Example
Bold	Strong emphasis	Important text
Italic	Subtle emphasis	Emphasized text
`Code`	Inline code	`const x = 42;`
Links	Clickable references	Learn more
Lists	• Item 1 • Item 2	Multiple items

Numeric DataLink to section

Year	Revenue	Growth	Market Share
2020	$1.2M	-	15%
2021	$2.4M	100%	22%
2022	$3.8M	58%	28%
2023	$5.2M	37%	31%

Wide TablesLink to section

Sometimes tables need more columns:

ID	Name	Email	Role	Department	Location	Status	Joined
1	John Doe	[email protected]	Developer	Engineering	NYC	Active	2020
2	Jane Smith	[email protected]	Designer	UX	SF	Active	2021
3	Bob Johnson	[email protected]	Manager	Product	LA	Active	2019
4	Alice Brown	[email protected]	Developer	Engineering	NYC	On Leave	2022

Comparison TableLink to section

Feature	Free Plan	Pro Plan	Enterprise
Users	1	5	Unlimited
Storage	5 GB	100 GB	1 TB+
Support	Community	Email	24/7 Phone
API Access	❌	✅	✅
Custom Domain	❌	✅	✅
Analytics	Basic	Advanced	Custom
Price	$0/mo	$19/mo	Contact Us

Code in TablesLink to section

Language	Hello World Example
JavaScript	`console.log("Hello, World!");`
Python	`print("Hello, World!")`
Ruby	`puts "Hello, World!"`
Go	`fmt.Println("Hello, World!")`
Rust	`println!("Hello, World!");`

Performance MetricsLink to section

Browser	First Paint	TTI	Score
Chrome 119	0.8s	1.2s	98/100
Firefox 120	0.9s	1.3s	96/100
Safari 17	0.7s	1.1s	99/100
Edge 119	0.8s	1.2s	98/100

Markdown ReferenceLink to section

Element	Markdown Syntax	Rendered Output
Heading	`## Heading`	Heading
Bold	`bold`	bold
Italic	`italic`	italic
Link	`[text](url)`	text
Code	`code`	`code`

Empty CellsLink to section

Tables handle empty cells gracefully:

Column A	Column B	Column C
Data 1		Data 3
	Data 2
Data 4	Data 5	Data 6

Best PracticesLink to section

Keep tables simple - Complex tables are hard to read
Use alignment - Helps scan numeric data
Consider responsive design - Wide tables may scroll horizontally
Provide context - Add captions or descriptions
Use semantic headers - Improves accessibility

Accessibility NoteLink to section

Tables are marked up with proper HTML table elements, making them accessible to screen readers. Always use header rows to provide context for data cells.