Markdown Tables Example
24/07/2025
|
3 minutes read
|
Share article
Introduction
Tables are a powerful way to organize and display data in your markdown content. This article demonstrates various table formats and how they render in your portfolio.
Basic Table
Here's a simple table showing programming languages and their characteristics:
Language | Type | Year | Popularity |
---|---|---|---|
JavaScript | Dynamic | 1995 | Very High |
TypeScript | Static | 2012 | High |
Python | Dynamic | 1991 | Very High |
Rust | Static | 2010 | Growing |
Go | Static | 2009 | High |
Table with Alignment
You can control text alignment in table columns:
Left Aligned | Center Aligned | Right Aligned |
---|---|---|
Left | Center | Right |
Data | Data | Data |
Example | Example | Example |
Project Comparison Table
Project Name | Technology Stack | Status | GitHub Stars |
---|---|---|---|
Portfolio | Nuxt 3, Vue 3 | ✅ Live | 42 |
Blog Engine | Next.js, React | 🚧 Dev | 18 |
CLI Tool | Rust, Clap | ✅ Live | 127 |
Mobile App | React Native | 📋 Plan | - |
Table with Code
Command | Description | Example |
---|---|---|
npm install | Install dependencies | npm install vue |
npm run dev | Start development server | npm run dev |
npm run build | Build for production | npm run build |
Performance Metrics Table
Metric | Before Optimization | After Optimization | Improvement |
---|---|---|---|
Load Time | 3.2s | 1.1s | 🚀 65% faster |
Bundle Size | 2.1MB | 850KB | 📦 60% smaller |
Lighthouse Score | 72 | 98 | ⭐ 36% better |
Core Web Vitals | Poor | Good | ✅ Excellent |
Conclusion
Tables provide an excellent way to present structured data in your content. The styling applied ensures they look great in both light and dark modes, with proper hover effects and responsive behavior.
Try creating your own tables using the markdown syntax shown above!