[{"data":1,"prerenderedAt":60},["Reactive",2],{"blog-post-markdown-table-data-formatting-styling-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-table-data-formatting-styling-complete-guide","Markdown Table Data Formatting and Styling: Complete Guide for Professional Data Presentation","Master advanced Markdown table data formatting techniques including numerical alignment, data validation, conditional styling, and professional presentation patterns for enhanced readability and visual impact.","Advanced Markdown table data formatting and styling techniques enable professional data presentation that goes beyond basic tabular structures, incorporating sophisticated formatting patterns,…","2025-11-17","Tutorial","Matthew Rathbone","markdown table formatting, table data styling, markdown table alignment, data presentation markdown, table cell formatting, professional tables markdown, markdown table design, data visualization markdown",16,"\u003Cp>Advanced Markdown table data formatting and styling techniques enable professional data presentation that goes beyond basic tabular structures, incorporating sophisticated formatting patterns, intelligent data alignment, conditional styling, and responsive design principles to create visually compelling and functionally robust documentation that enhances data comprehension and user experience across diverse platforms and output formats.\u003C/p>\n\u003Ch2 id=\"why-master-table-data-formatting\">Why Master Table Data Formatting?\u003C/h2>\n\u003Cp>Professional table data formatting provides essential benefits for effective information communication:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Proper alignment and formatting reduce cognitive load and improve data scanning efficiency\u003C/li>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Strategic styling guides readers through complex data relationships and priorities\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Well-formatted tables demonstrate attention to detail and document quality\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Platform Consistency\u003C/strong>: Standardized formatting techniques ensure reliable rendering across different Markdown processors\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Proper data presentation supports screen readers and assistive technologies\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-formatting-techniques\">Foundation Formatting Techniques\u003C/h2>\n\u003Ch3 id=\"numerical-data-alignment-and-precision\">Numerical Data Alignment and Precision\u003C/h3>\n\u003Cp>Implement consistent numerical formatting for professional data presentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Financial Data Formatting Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Currency and Financial Values\u003C/span>\n| Account Category | Q1 Revenue | Q2 Revenue | Q3 Revenue | YTD Total | Growth Rate |\n|:-----------------|----------:|----------:|----------:|----------:|------------:|\n| Product Sales    | $1,245,678 | $1,367,892 | $1,489,234 | $4,102,804 |      +19.5% |\n| Service Revenue  | $456,789   | $523,456   | $587,123   | $1,567,368 |      +28.6% |\n| Licensing Fees   | $89,123    | $94,567    | $101,234   | $284,924   |      +13.6% |\n| \u003Cspan class=\"hljs-strong\">**Total Revenue**\u003C/span>| \u003Cspan class=\"hljs-strong\">**$1,791,590**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$1,985,915**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$2,177,591**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$5,955,096**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+21.6%**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Statistical Data with Precision\u003C/span>\n| Metric | Mean | Median | Std Dev | Min | Max | Sample Size |\n|:-------|-----:|-------:|--------:|----:|----:|------------:|\n| Response Time (ms) | 245.67 | 198.50 | 89.23 | 45.00 | 567.89 | 1,247 |\n| CPU Usage (%) | 34.2 | 31.8 | 12.5 | 8.2 | 89.7 | 2,156 |\n| Memory Usage (GB) | 5.847 | 4.923 | 2.134 | 1.250 | 15.678 | 2,156 |\n| Disk I/O (MB/s) | 127.4 | 98.6 | 45.8 | 12.3 | 456.7 | 2,156 |\n\n\u003Cspan class=\"hljs-section\">## Percentage and Ratio Formatting\u003C/span>\n| Department | Completion Rate | Success Rate | Error Rate | Efficiency Score |\n|:-----------|----------------:|-------------:|-----------:|-----------------:|\n| Engineering | 94.5% | 98.2% | 1.8% | 4.85/5.00 |\n| Quality Assurance | 88.7% | 96.4% | 3.6% | 4.72/5.00 |\n| Product Management | 91.3% | 94.8% | 5.2% | 4.56/5.00 |\n| Design | 87.9% | 92.1% | 7.9% | 4.41/5.00 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"text-data-formatting-and-consistency\">Text Data Formatting and Consistency\u003C/h3>\n\u003Cp>Establish consistent text formatting patterns for professional presentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Text Formatting Standards\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Status and Priority Indicators\u003C/span>\n| Task ID | Task Description | Status | Priority | Assignee | Due Date |\n|:--------|:-----------------|:-------|:---------|:---------|:---------|\n| ENG-001 | Implement user authentication | \u003Cspan class=\"hljs-strong\">**In Progress**\u003C/span> | 🔴 \u003Cspan class=\"hljs-strong\">**Critical**\u003C/span> | @john-smith | 2025-11-30 |\n| ENG-002 | Database optimization | \u003Cspan class=\"hljs-strong\">**Planning**\u003C/span> | 🟠 \u003Cspan class=\"hljs-strong\">**High**\u003C/span> | @jane-doe | 2025-12-15 |\n| ENG-003 | UI component refactoring | \u003Cspan class=\"hljs-strong\">**Complete**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span> | @alex-wilson | 2025-11-25 |\n| ENG-004 | Documentation updates | \u003Cspan class=\"hljs-strong\">**Not Started**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | @sarah-jones | 2026-01-10 |\n\n\u003Cspan class=\"hljs-section\">## Technical Specifications\u003C/span>\n| Component | Version | Technology Stack | Environment | Configuration |\n|:----------|:--------|:-----------------|:------------|:--------------|\n| \u003Cspan class=\"hljs-strong\">**Frontend**\u003C/span> | v2.1.3 | React 18 + TypeScript | Production | \u003Cspan class=\"hljs-code\">`NODE_ENV=production`\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Backend**\u003C/span> | v1.8.7 | Node.js + Express | Production | \u003Cspan class=\"hljs-code\">`PORT=3000, DB_POOL=20`\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Database**\u003C/span> | v14.2 | PostgreSQL | Production | \u003Cspan class=\"hljs-code\">`MAX_CONNECTIONS=100`\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Cache**\u003C/span> | v6.2.1 | Redis | Production | \u003Cspan class=\"hljs-code\">`MEMORY=4GB, TTL=3600`\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Contact and Reference Information\u003C/span>\n| Role | Name | Email | Phone | Location |\n|:-----|:-----|:------|:------|:---------|\n| \u003Cspan class=\"hljs-strong\">**Project Manager**\u003C/span> | Alice Johnson | alice.johnson@company.com | +1-555-0123 | New York, NY |\n| \u003Cspan class=\"hljs-strong\">**Lead Developer**\u003C/span> | Bob Chen | bob.chen@company.com | +1-555-0124 | San Francisco, CA |\n| \u003Cspan class=\"hljs-strong\">**QA Lead**\u003C/span> | Carol Martinez | carol.martinez@company.com | +1-555-0125 | Austin, TX |\n| \u003Cspan class=\"hljs-strong\">**DevOps Engineer**\u003C/span> | David Kim | david.kim@company.com | +1-555-0126 | Seattle, WA |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"date-time-and-duration-formatting\">Date, Time, and Duration Formatting\u003C/h3>\n\u003Cp>Implement consistent temporal data formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Temporal Data Formatting Standards\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Project Timeline and Scheduling\u003C/span>\n| Milestone | Start Date | End Date | Duration | Progress | Status |\n|:----------|:-----------|:---------|:---------|:---------|:-------|\n| \u003Cspan class=\"hljs-strong\">**Phase 1: Planning**\u003C/span> | 2025-11-01 | 2025-11-15 | 14 days | 100% | ✅ \u003Cspan class=\"hljs-strong\">**Complete**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Phase 2: Development**\u003C/span> | 2025-11-16 | 2025-12-31 | 46 days | 35% | 🔄 \u003Cspan class=\"hljs-strong\">**In Progress**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Phase 3: Testing**\u003C/span> | 2026-01-01 | 2026-01-31 | 31 days | 0% | ⏳ \u003Cspan class=\"hljs-strong\">**Pending**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Phase 4: Deployment**\u003C/span> | 2026-02-01 | 2026-02-15 | 15 days | 0% | ⏳ \u003Cspan class=\"hljs-strong\">**Pending**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Time-Based Performance Metrics\u003C/span>\n| Time Period | Requests/sec | Avg Response | 95th Percentile | 99th Percentile | Uptime |\n|:------------|-------------:|-------------:|----------------:|----------------:|-------:|\n| \u003Cspan class=\"hljs-strong\">**Last 24h**\u003C/span> | 1,247.3 | 145ms | 298ms | 567ms | 99.97% |\n| \u003Cspan class=\"hljs-strong\">**Last 7d**\u003C/span> | 1,156.8 | 162ms | 312ms | 623ms | 99.94% |\n| \u003Cspan class=\"hljs-strong\">**Last 30d**\u003C/span> | 1,089.4 | 178ms | 335ms | 698ms | 99.89% |\n| \u003Cspan class=\"hljs-strong\">**Last 90d**\u003C/span> | 1,023.7 | 189ms | 356ms | 742ms | 99.85% |\n\n\u003Cspan class=\"hljs-section\">## Event Schedule and Deadlines\u003C/span>\n| Event | Date & Time | Duration | Location | Attendees | Requirements |\n|:------|:------------|:---------|:---------|:----------|:-------------|\n| \u003Cspan class=\"hljs-strong\">**Sprint Planning**\u003C/span> | 2025-11-18 09:00 EST | 2h 30m | Conference Room A | 12 | Laptop, Notes |\n| \u003Cspan class=\"hljs-strong\">**Daily Standup**\u003C/span> | 2025-11-19 09:30 EST | 15m | Virtual/Teams | 8 | Camera On |\n| \u003Cspan class=\"hljs-strong\">**Code Review**\u003C/span> | 2025-11-19 14:00 EST | 1h | Dev Room | 5 | Pull Requests |\n| \u003Cspan class=\"hljs-strong\">**Sprint Retrospective**\u003C/span> | 2025-11-29 15:00 EST | 1h | Conference Room B | 12 | Feedback Ready |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-styling-techniques\">Advanced Styling Techniques\u003C/h2>\n\u003Ch3 id=\"conditional-formatting-and-visual-indicators\">Conditional Formatting and Visual Indicators\u003C/h3>\n\u003Cp>Implement data-driven visual formatting patterns:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Performance Dashboard with Conditional Formatting\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Server Health Monitoring\u003C/span>\n| Server | CPU Usage | Memory Usage | Disk Space | Network | Status |\n|:-------|----------:|-------------:|-----------:|--------:|:-------|\n| \u003Cspan class=\"hljs-strong\">**web-01**\u003C/span> | 23.4% | 67.8% | 89.2% | 156 Mbps | 🟢 \u003Cspan class=\"hljs-strong\">**Healthy**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**web-02**\u003C/span> | 45.7% | 82.1% | 67.4% | 203 Mbps | 🟡 \u003Cspan class=\"hljs-strong\">**Warning**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**web-03**\u003C/span> | 78.9% | 91.5% | 45.6% | 89 Mbps | 🔴 \u003Cspan class=\"hljs-strong\">**Critical**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**db-01**\u003C/span> | 34.2% | 56.3% | 78.9% | 298 Mbps | 🟢 \u003Cspan class=\"hljs-strong\">**Healthy**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Sales Performance Indicators\u003C/span>\n| Sales Rep | Q3 Target | Q3 Actual | Achievement | Trend | Performance |\n|:----------|----------:|----------:|------------:|:------|:------------|\n| \u003Cspan class=\"hljs-strong\">**Alice Chen**\u003C/span> | $450,000 | $523,450 | 116.3% | 📈 | 🌟 \u003Cspan class=\"hljs-strong\">**Exceeds**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Bob Wilson**\u003C/span> | $380,000 | $367,890 | 96.8% | 📉 | ⚡ \u003Cspan class=\"hljs-strong\">**Meets**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Carol Smith**\u003C/span> | $420,000 | $298,650 | 71.1% | 📉 | ⚠️ \u003Cspan class=\"hljs-strong\">**Below**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**David Jones**\u003C/span> | $500,000 | $587,230 | 117.4% | 📈 | 🌟 \u003Cspan class=\"hljs-strong\">**Exceeds**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Quality Metrics with Thresholds\u003C/span>\n| Test Suite | Pass Rate | Coverage | Exec Time | Flaky Tests | Quality Score |\n|:-----------|----------:|---------:|----------:|------------:|--------------:|\n| \u003Cspan class=\"hljs-strong\">**Unit Tests**\u003C/span> | 98.7% ✅ | 94.2% ✅ | 2m 34s ✅ | 0 ✅ | \u003Cspan class=\"hljs-strong\">**A+**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Integration**\u003C/span> | 94.1% ✅ | 87.6% ⚠️ | 8m 45s ⚠️ | 3 ⚠️ | \u003Cspan class=\"hljs-strong\">**B+**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**E2E Tests**\u003C/span> | 89.3% ⚠️ | 78.9% ⚠️ | 15m 12s ❌ | 7 ❌ | \u003Cspan class=\"hljs-strong\">**B-**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**Performance**\u003C/span> | 92.4% ✅ | 82.1% ⚠️ | 25m 03s ❌ | 2 ⚠️ | \u003Cspan class=\"hljs-strong\">**B**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"data-categorization-and-hierarchical-formatting\">Data Categorization and Hierarchical Formatting\u003C/h3>\n\u003Cp>Create sophisticated data organization with visual hierarchy:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Enterprise Resource Allocation Matrix\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Department Budget Distribution (FY 2026)\u003C/span>\n| Department Category | Department | Allocated Budget | Actual Spend | Variance | Utilization |\n|:-------------------|:-----------|----------------:|-------------:|---------:|------------:|\n| \u003Cspan class=\"hljs-strong\">**🏢 TECHNOLOGY**\u003C/span> | | | | | |\n| ├─ Engineering | Software Development | $2,450,000 | $2,367,890 | -$82,110 | 96.7% |\n| ├─ Engineering | Quality Assurance | $890,000 | $923,450 | +$33,450 | 103.8% |\n| ├─ Infrastructure | DevOps & Cloud | $1,200,000 | $1,156,780 | -$43,220 | 96.4% |\n| └─ Infrastructure | Security | $650,000 | $678,920 | +$28,920 | 104.4% |\n| \u003Cspan class=\"hljs-strong\">**📊 BUSINESS**\u003C/span> | | | | | |\n| ├─ Sales | Enterprise Sales | $1,800,000 | $1,745,600 | -$54,400 | 97.0% |\n| ├─ Sales | Channel Partners | $950,000 | $987,650 | +$37,650 | 104.0% |\n| ├─ Marketing | Digital Marketing | $750,000 | $698,450 | -$51,550 | 93.1% |\n| └─ Marketing | Events & Conferences | $450,000 | $412,890 | -$37,110 | 91.8% |\n| \u003Cspan class=\"hljs-strong\">**⚙️ OPERATIONS**\u003C/span> | | | | | |\n| ├─ HR | Talent Acquisition | $400,000 | $445,670 | +$45,670 | 111.4% |\n| ├─ HR | Learning & Development | $300,000 | $278,900 | -$21,100 | 93.0% |\n| ├─ Finance | Financial Planning | $250,000 | $234,560 | -$15,440 | 93.8% |\n| └─ Legal | Compliance & Legal | $180,000 | $167,890 | -$12,110 | 93.3% |\n\n\u003Cspan class=\"hljs-section\">## Technology Stack Maturity Assessment\u003C/span>\n| Technology Layer | Component | Version | Maturity Level | Risk Assessment | Upgrade Priority |\n|:----------------|:----------|:--------|:---------------|:----------------|:-----------------|\n| \u003Cspan class=\"hljs-strong\">**🔧 INFRASTRUCTURE**\u003C/span> | | | | | |\n| ├─ Cloud Platform | AWS | Latest | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n| ├─ Container Platform | Kubernetes | v1.28 | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Q2 2026**\u003C/span> |\n| ├─ CI/CD Pipeline | GitHub Actions | Latest | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n| └─ Monitoring | DataDog | Latest | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**💾 DATA LAYER**\u003C/span> | | | | | |\n| ├─ Primary Database | PostgreSQL | v15.2 | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n| ├─ Cache Layer | Redis | v7.0 | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Q3 2026**\u003C/span> |\n| ├─ Message Queue | RabbitMQ | v3.11 | 🟡 \u003Cspan class=\"hljs-strong\">**Stable**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Q1 2026**\u003C/span> |\n| └─ Search Engine | Elasticsearch | v8.5 | 🟡 \u003Cspan class=\"hljs-strong\">**Stable**\u003C/span> | 🔴 \u003Cspan class=\"hljs-strong\">**High**\u003C/span> | 🔴 \u003Cspan class=\"hljs-strong\">**Q1 2026**\u003C/span> |\n| \u003Cspan class=\"hljs-strong\">**🌐 APPLICATION**\u003C/span> | | | | | |\n| ├─ Frontend Framework | React | v18.2 | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n| ├─ Backend Framework | Node.js/Express | v20.5/v4.18 | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Q2 2026**\u003C/span> |\n| ├─ API Gateway | Kong | v3.2 | 🟡 \u003Cspan class=\"hljs-strong\">**Stable**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span> | 🟡 \u003Cspan class=\"hljs-strong\">**Q2 2026**\u003C/span> |\n| └─ Authentication | Auth0 | Latest | 🟢 \u003Cspan class=\"hljs-strong\">**Mature**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**Low**\u003C/span> | 🟢 \u003Cspan class=\"hljs-strong\">**None**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-and-dynamic-formatting\">Interactive and Dynamic Formatting\u003C/h3>\n\u003Cp>Implement formatting patterns that support dynamic content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Dynamic table formatting with JavaScript\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableFormatter\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatters\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">currency\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatCurrency\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">percentage\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatPercentage\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">number\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatNumber\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">date\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatDate\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatStatus\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatPriority\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">performance\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">excellent\u003C/span>: \u003Cspan class=\"hljs-number\">95\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">good\u003C/span>: \u003Cspan class=\"hljs-number\">85\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">fair\u003C/span>: \u003Cspan class=\"hljs-number\">70\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">poor\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n            },\n            \u003Cspan class=\"hljs-attr\">budget\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">overBudget\u003C/span>: \u003Cspan class=\"hljs-number\">105\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">onTrack\u003C/span>: \u003Cspan class=\"hljs-number\">95\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">underUtilized\u003C/span>: \u003Cspan class=\"hljs-number\">80\u003C/span>\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatCurrency\u003C/span>(\u003Cspan class=\"hljs-params\">value, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Intl\u003C/span>.\u003Cspan class=\"hljs-title class_\">NumberFormat\u003C/span>(\u003Cspan class=\"hljs-string\">'en-US'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'currency'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">currency\u003C/span>: options.\u003Cspan class=\"hljs-property\">currency\u003C/span> || \u003Cspan class=\"hljs-string\">'USD'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">minimumFractionDigits\u003C/span>: options.\u003Cspan class=\"hljs-property\">decimals\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maximumFractionDigits\u003C/span>: options.\u003Cspan class=\"hljs-property\">decimals\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formatter.\u003Cspan class=\"hljs-title function_\">format\u003C/span>(value);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatPercentage\u003C/span>(\u003Cspan class=\"hljs-params\">value, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatted = (value * \u003Cspan class=\"hljs-number\">100\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(options.\u003Cspan class=\"hljs-property\">decimals\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>) + \u003Cspan class=\"hljs-string\">'%'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">conditional\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { excellent, good, fair } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span>.\u003Cspan class=\"hljs-property\">performance\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> numValue = value * \u003Cspan class=\"hljs-number\">100\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numValue >= excellent) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`**\u003Cspan class=\"hljs-subst\">${formatted}\u003C/span>** ✅`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numValue >= good) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`**\u003Cspan class=\"hljs-subst\">${formatted}\u003C/span>** ⚡`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numValue >= fair) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${formatted}\u003C/span> ⚠️`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${formatted}\u003C/span> ❌`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formatted;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatNumber\u003C/span>(\u003Cspan class=\"hljs-params\">value, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Intl\u003C/span>.\u003Cspan class=\"hljs-title class_\">NumberFormat\u003C/span>(\u003Cspan class=\"hljs-string\">'en-US'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">minimumFractionDigits\u003C/span>: options.\u003Cspan class=\"hljs-property\">decimals\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maximumFractionDigits\u003C/span>: options.\u003Cspan class=\"hljs-property\">decimals\u003C/span> || \u003Cspan class=\"hljs-number\">2\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useGrouping\u003C/span>: options.\u003Cspan class=\"hljs-property\">useGrouping\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> formatted = formatter.\u003Cspan class=\"hljs-title function_\">format\u003C/span>(value);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">unit\u003C/span>) {\n            formatted += \u003Cspan class=\"hljs-string\">` \u003Cspan class=\"hljs-subst\">${options.unit}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">trend\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> trend = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateTrend\u003C/span>(value, options.\u003Cspan class=\"hljs-property\">previousValue\u003C/span>);\n            formatted += \u003Cspan class=\"hljs-string\">` \u003Cspan class=\"hljs-subst\">${trend}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formatted;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatDate\u003C/span>(\u003Cspan class=\"hljs-params\">dateValue, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> date = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(dateValue);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Intl\u003C/span>.\u003Cspan class=\"hljs-title class_\">DateTimeFormat\u003C/span>(\u003Cspan class=\"hljs-string\">'en-US'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">year\u003C/span>: \u003Cspan class=\"hljs-string\">'numeric'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">month\u003C/span>: options.\u003Cspan class=\"hljs-property\">monthFormat\u003C/span> || \u003Cspan class=\"hljs-string\">'short'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">day\u003C/span>: \u003Cspan class=\"hljs-string\">'numeric'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">timeZone\u003C/span>: options.\u003Cspan class=\"hljs-property\">timeZone\u003C/span> || \u003Cspan class=\"hljs-string\">'UTC'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> formatted = formatter.\u003Cspan class=\"hljs-title function_\">format\u003C/span>(date);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">includeTime\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeFormatter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Intl\u003C/span>.\u003Cspan class=\"hljs-title class_\">DateTimeFormat\u003C/span>(\u003Cspan class=\"hljs-string\">'en-US'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">hour\u003C/span>: \u003Cspan class=\"hljs-string\">'numeric'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">minute\u003C/span>: \u003Cspan class=\"hljs-string\">'2-digit'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">hour12\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">timeZone\u003C/span>: options.\u003Cspan class=\"hljs-property\">timeZone\u003C/span> || \u003Cspan class=\"hljs-string\">'UTC'\u003C/span>\n            });\n            formatted += \u003Cspan class=\"hljs-string\">` \u003Cspan class=\"hljs-subst\">${timeFormatter.format(date)}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">relative\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> diffDays = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>((date - now) / (\u003Cspan class=\"hljs-number\">1000\u003C/span> * \u003Cspan class=\"hljs-number\">60\u003C/span> * \u003Cspan class=\"hljs-number\">60\u003C/span> * \u003Cspan class=\"hljs-number\">24\u003C/span>));\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (diffDays === \u003Cspan class=\"hljs-number\">0\u003C/span>) formatted += \u003Cspan class=\"hljs-string\">' (Today)'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (diffDays === \u003Cspan class=\"hljs-number\">1\u003C/span>) formatted += \u003Cspan class=\"hljs-string\">' (Tomorrow)'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (diffDays === -\u003Cspan class=\"hljs-number\">1\u003C/span>) formatted += \u003Cspan class=\"hljs-string\">' (Yesterday)'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (diffDays > \u003Cspan class=\"hljs-number\">0\u003C/span>) formatted += \u003Cspan class=\"hljs-string\">` (in \u003Cspan class=\"hljs-subst\">${diffDays}\u003C/span> days)`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (diffDays < \u003Cspan class=\"hljs-number\">0\u003C/span>) formatted += \u003Cspan class=\"hljs-string\">` (\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.abs(diffDays)}\u003C/span> days ago)`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formatted;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatStatus\u003C/span>(\u003Cspan class=\"hljs-params\">status, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusMap = {\n            \u003Cspan class=\"hljs-string\">'complete'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'✅'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'**Complete**'\u003C/span>, \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'green'\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'in-progress'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🔄'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'**In Progress**'\u003C/span>, \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'blue'\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'pending'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'⏳'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'Pending'\u003C/span>, \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'orange'\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'blocked'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🚫'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'Blocked'\u003C/span>, \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'red'\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'cancelled'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'❌'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'~~Cancelled~~'\u003C/span>, \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'gray'\u003C/span> }\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = statusMap[status.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()] || { \n            \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'❔'\u003C/span>, \n            \u003Cspan class=\"hljs-attr\">style\u003C/span>: status, \n            \u003Cspan class=\"hljs-attr\">color\u003C/span>: \u003Cspan class=\"hljs-string\">'default'\u003C/span> \n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">showIcon\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${config.icon}\u003C/span> \u003Cspan class=\"hljs-subst\">${config.style}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> config.\u003Cspan class=\"hljs-property\">style\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatPriority\u003C/span>(\u003Cspan class=\"hljs-params\">priority, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> priorityMap = {\n            \u003Cspan class=\"hljs-string\">'critical'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🔴'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'**Critical**'\u003C/span>, \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-number\">4\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'high'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🟠'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'**High**'\u003C/span>, \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'medium'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🟡'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'Medium'\u003C/span>, \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span> },\n            \u003Cspan class=\"hljs-string\">'low'\u003C/span>: { \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'🟢'\u003C/span>, \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'Low'\u003C/span>, \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span> }\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = priorityMap[priority.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()] || { \n            \u003Cspan class=\"hljs-attr\">icon\u003C/span>: \u003Cspan class=\"hljs-string\">'⚪'\u003C/span>, \n            \u003Cspan class=\"hljs-attr\">style\u003C/span>: priority, \n            \u003Cspan class=\"hljs-attr\">level\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (options.\u003Cspan class=\"hljs-property\">showIcon\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${config.icon}\u003C/span> \u003Cspan class=\"hljs-subst\">${config.style}\u003C/span>`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> config.\u003Cspan class=\"hljs-property\">style\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateTrend\u003C/span>(\u003Cspan class=\"hljs-params\">current, previous\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!previous) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> change = current - previous;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> percentChange = (change / previous) * \u003Cspan class=\"hljs-number\">100\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(percentChange) < \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'➡️'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (percentChange > \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'📈'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'📉'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateFormattedTable\u003C/span>(\u003Cspan class=\"hljs-params\">data, columnConfig\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(columnConfig);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-string\">'| '\u003C/span> + headers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> separatorRow = \u003Cspan class=\"hljs-string\">'|'\u003C/span> + headers.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">h\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> align = columnConfig[h].\u003Cspan class=\"hljs-property\">align\u003C/span> || \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> separator = \u003Cspan class=\"hljs-string\">'-'\u003C/span>.\u003Cspan class=\"hljs-title function_\">repeat\u003C/span>(\u003Cspan class=\"hljs-number\">10\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (align) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>: \u003Cspan class=\"hljs-keyword\">return\u003C/span> separator + \u003Cspan class=\"hljs-string\">':'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'center'\u003C/span>: \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">':'\u003C/span> + separator + \u003Cspan class=\"hljs-string\">':'\u003C/span>;\n                \u003Cspan class=\"hljs-attr\">default\u003C/span>: \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">':'\u003C/span> + separator;\n            }\n        }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>) + \u003Cspan class=\"hljs-string\">'|'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataRows = data.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> formattedCells = headers.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = columnConfig[header];\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = row[header];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (config.\u003Cspan class=\"hljs-property\">formatter\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatters\u003C/span>[config.\u003Cspan class=\"hljs-property\">formatter\u003C/span>]) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">formatters\u003C/span>[config.\u003Cspan class=\"hljs-property\">formatter\u003C/span>].\u003Cspan class=\"hljs-title function_\">call\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>, value, config.\u003Cspan class=\"hljs-property\">options\u003C/span> || {});\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value;\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'| '\u003C/span> + formattedCells.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> [headerRow, separatorRow, ...dataRows].\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyConditionalFormatting\u003C/span>(\u003Cspan class=\"hljs-params\">table, rules\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Apply conditional formatting rules to table content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> formattedTable = table;\n        \n        rules.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rule\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { condition, format } = rule;\n            \n            \u003Cspan class=\"hljs-comment\">// Simple regex-based conditional formatting\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (condition.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'value'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> regex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`\\\\b\u003Cspan class=\"hljs-subst\">${condition.value}\u003C/span>\\\\b`\u003C/span>, \u003Cspan class=\"hljs-string\">'g'\u003C/span>);\n                formattedTable = formattedTable.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(regex, format.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'$1'\u003C/span>, condition.\u003Cspan class=\"hljs-property\">value\u003C/span>));\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formattedTable;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example for dynamic table generation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> formatter = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableFormatter\u003C/span>();\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> salesData = [\n    {\n        \u003Cspan class=\"hljs-attr\">rep\u003C/span>: \u003Cspan class=\"hljs-string\">'Alice Chen'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">target\u003C/span>: \u003Cspan class=\"hljs-number\">450000\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">actual\u003C/span>: \u003Cspan class=\"hljs-number\">523450\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">achievement\u003C/span>: \u003Cspan class=\"hljs-number\">1.163\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'complete'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'high'\u003C/span>\n    },\n    {\n        \u003Cspan class=\"hljs-attr\">rep\u003C/span>: \u003Cspan class=\"hljs-string\">'Bob Wilson'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">target\u003C/span>: \u003Cspan class=\"hljs-number\">380000\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">actual\u003C/span>: \u003Cspan class=\"hljs-number\">367890\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">achievement\u003C/span>: \u003Cspan class=\"hljs-number\">0.968\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'in-progress'\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>\n    }\n];\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> columnConfig = {\n    \u003Cspan class=\"hljs-string\">'Sales Rep'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span> },\n    \u003Cspan class=\"hljs-string\">'Target'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>, \u003Cspan class=\"hljs-attr\">formatter\u003C/span>: \u003Cspan class=\"hljs-string\">'currency'\u003C/span> },\n    \u003Cspan class=\"hljs-string\">'Actual'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>, \u003Cspan class=\"hljs-attr\">formatter\u003C/span>: \u003Cspan class=\"hljs-string\">'currency'\u003C/span> },\n    \u003Cspan class=\"hljs-string\">'Achievement'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>, \u003Cspan class=\"hljs-attr\">formatter\u003C/span>: \u003Cspan class=\"hljs-string\">'percentage'\u003C/span>, \u003Cspan class=\"hljs-attr\">options\u003C/span>: { \u003Cspan class=\"hljs-attr\">conditional\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> } },\n    \u003Cspan class=\"hljs-string\">'Status'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>, \u003Cspan class=\"hljs-attr\">formatter\u003C/span>: \u003Cspan class=\"hljs-string\">'status'\u003C/span>, \u003Cspan class=\"hljs-attr\">options\u003C/span>: { \u003Cspan class=\"hljs-attr\">showIcon\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> } },\n    \u003Cspan class=\"hljs-string\">'Priority'\u003C/span>: { \u003Cspan class=\"hljs-attr\">align\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>, \u003Cspan class=\"hljs-attr\">formatter\u003C/span>: \u003Cspan class=\"hljs-string\">'priority'\u003C/span>, \u003Cspan class=\"hljs-attr\">options\u003C/span>: { \u003Cspan class=\"hljs-attr\">showIcon\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> } }\n};\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> formattedTable = formatter.\u003Cspan class=\"hljs-title function_\">generateFormattedTable\u003C/span>(salesData, columnConfig);\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(formattedTable);\n\n\u003Cspan class=\"hljs-comment\">// CSS for enhanced table styling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> advancedTableStyles = \u003Cspan class=\"hljs-string\">`\n<style>\n/* Advanced table formatting styles */\n.formatted-table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 1.5rem 0;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.formatted-table th,\n.formatted-table td {\n    padding: 12px 16px;\n    border: 1px solid #e1e5e9;\n    text-align: left;\n    vertical-align: middle;\n}\n\n.formatted-table th {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-size: 0.875rem;\n}\n\n/* Numerical column alignment */\n.formatted-table .align-right {\n    text-align: right;\n    font-variant-numeric: tabular-nums;\n}\n\n.formatted-table .align-center {\n    text-align: center;\n}\n\n/* Status indicators */\n.status-complete { background-color: #d4edda; color: #155724; }\n.status-progress { background-color: #d1ecf1; color: #0c5460; }\n.status-pending { background-color: #fff3cd; color: #856404; }\n.status-blocked { background-color: #f8d7da; color: #721c24; }\n\n/* Priority indicators */\n.priority-critical { border-left: 4px solid #dc3545; }\n.priority-high { border-left: 4px solid #fd7e14; }\n.priority-medium { border-left: 4px solid #ffc107; }\n.priority-low { border-left: 4px solid #28a745; }\n\n/* Performance indicators */\n.performance-excellent { background-color: #d4edda; }\n.performance-good { background-color: #e2f3ff; }\n.performance-fair { background-color: #fff3cd; }\n.performance-poor { background-color: #f8d7da; }\n\n/* Hover effects */\n.formatted-table tr:hover {\n    background-color: #f8f9fa;\n    transform: scale(1.002);\n    transition: all 0.2s ease;\n}\n\n/* Responsive design */\n@media (max-width: 768px) {\n    .formatted-table {\n        font-size: 0.875rem;\n    }\n    \n    .formatted-table th,\n    .formatted-table td {\n        padding: 8px 12px;\n    }\n    \n    /* Stack columns on mobile */\n    .formatted-table.stack-mobile th,\n    .formatted-table.stack-mobile td {\n        display: block;\n        border: none;\n        border-bottom: 1px solid #e1e5e9;\n        padding: 8px 16px;\n    }\n    \n    .formatted-table.stack-mobile th {\n        background: #f8f9fa;\n        color: #495057;\n        font-weight: 600;\n    }\n}\n\n/* Print styles */\n@media print {\n    .formatted-table {\n        break-inside: avoid;\n        box-shadow: none;\n    }\n    \n    .formatted-table th {\n        background: #f8f9fa !important;\n        color: #495057 !important;\n        -webkit-print-color-adjust: exact;\n    }\n}\n\n/* Animation for dynamic updates */\n.table-update-animation {\n    animation: highlightUpdate 2s ease-in-out;\n}\n\n@keyframes highlightUpdate {\n    0% { background-color: #fff3cd; }\n    50% { background-color: #ffeaa7; }\n    100% { background-color: transparent; }\n}\n</style>\n`\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced table data formatting techniques integrate seamlessly with comprehensive documentation workflows. When building complex technical specifications, combine formatting patterns with \u003Ca href=\"/blog/markdown-table-accessibility-aria-complete-guide\">table accessibility features\u003C/a> to ensure that well-formatted data remains usable by assistive technologies and screen readers, creating inclusive documentation that serves all users effectively.\u003C/p>\n\u003Cp>For large-scale documentation projects requiring consistent data presentation, table formatting works excellently with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content generation\u003C/a> to maintain formatting standards across multiple documents and team contributors, ensuring professional consistency while reducing manual formatting overhead.\u003C/p>\n\u003Cp>When creating comprehensive data-driven documentation, formatting techniques complement \u003Ca href=\"/blog/markdown-version-control-git-integration-complete-guide\">version control and collaboration workflows\u003C/a> by establishing clear formatting conventions that team members can follow, reducing merge conflicts and maintaining document quality across collaborative editing sessions.\u003C/p>\n\u003Ch2 id=\"best-practices-and-guidelines\">Best Practices and Guidelines\u003C/h2>\n\u003Ch3 id=\"consistency-standards\">Consistency Standards\u003C/h3>\n\u003Cp>Establish and maintain consistent formatting patterns across all documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Formatting Standards Documentation\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Numerical Data Guidelines\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Currency**\u003C/span>: Always use $ symbol with comma separators: \u003Cspan class=\"hljs-code\">`$1,234,567`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Percentages**\u003C/span>: One decimal place with % symbol: \u003Cspan class=\"hljs-code\">`94.5%`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Decimals**\u003C/span>: Maximum 3 decimal places for technical metrics: \u003Cspan class=\"hljs-code\">`123.456`\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Large Numbers**\u003C/span>: Use comma separators for thousands: \u003Cspan class=\"hljs-code\">`1,234,567`\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Status Formatting Standards\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Complete**\u003C/span>: ✅ \u003Cspan class=\"hljs-strong\">**Complete**\u003C/span> (green indicator)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**In Progress**\u003C/span>: 🔄 \u003Cspan class=\"hljs-strong\">**In Progress**\u003C/span> (blue indicator)  \n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Pending**\u003C/span>: ⏳ Pending (orange indicator)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Blocked**\u003C/span>: 🚫 Blocked (red indicator)\n\n\u003Cspan class=\"hljs-section\">## Priority Level Standards\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Critical**\u003C/span>: 🔴 \u003Cspan class=\"hljs-strong\">**Critical**\u003C/span> (red, bold)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**High**\u003C/span>: 🟠 \u003Cspan class=\"hljs-strong\">**High**\u003C/span> (orange, bold)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Medium**\u003C/span>: 🟡 Medium (yellow, normal)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-strong\">**Low**\u003C/span>: 🟢 Low (green, normal)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"accessibility-considerations\">Accessibility Considerations\u003C/h3>\n\u003Cp>Ensure formatted tables remain accessible to all users:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"formatted-table"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sales performance data"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Q3 2025 Sales Performance\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-subtitle"\u003C/span>>\u003C/span>Revenue targets, actual sales, and achievement rates by representative\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>Sales Representative\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>Target Revenue\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>Actual Revenue\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>Achievement Rate\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span>>\u003C/span>Performance Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"rowheader"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>Alice Chen\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"cell"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Target: 450,000 dollars"\u003C/span>>\u003C/span>$450,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"cell"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Actual: 523,450 dollars"\u003C/span>>\u003C/span>$523,450\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"cell"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Achievement: 116.3 percent, exceeds target"\u003C/span>>\u003C/span>116.3% ✅\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"cell"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status: Complete, high priority"\u003C/span>>\u003C/span>✅ **Complete**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-optimization\">Performance Optimization\u003C/h3>\n\u003Cp>Implement efficient formatting for large datasets:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Performance optimizations for large tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-formatted-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed; \u003Cspan class=\"hljs-comment\">/* Faster rendering */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style; \u003Cspan class=\"hljs-comment\">/* Contain layout calculations */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.large-formatted-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.large-formatted-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: style; \u003Cspan class=\"hljs-comment\">/* Isolate style calculations */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: auto; \u003Cspan class=\"hljs-comment\">/* Optimize for changes */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Virtual scrolling container for very large tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.virtual-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: strict;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Lazy loading for off-screen content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-row\u003C/span>\u003Cspan class=\"hljs-selector-class\">.lazy-load\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content-visibility\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>-intrinsic-size: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">50px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"alignment-problems\">Alignment Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Numbers don't align properly in columns\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Correct: Use consistent decimal places -->\n| Revenue | Expenses | Profit |\n|--------:|---------:|-------:|\n| $1,234.00 | $987.00 | $247.00 |\n| $567.00 | $234.00 | $333.00 |\n\n<!-- Incorrect: Inconsistent formatting -->\n| Revenue | Expenses | Profit |\n|--------:|---------:|-------:|\n| $1,234 | $987.5 | $246.50 |\n| $567.00 | $234 | $333 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"platform-compatibility\">Platform Compatibility\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Formatting doesn't render consistently across platforms\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Test formatting across target platforms\u003C/li>\n\u003Cli>Use fallback formatting for compatibility\u003C/li>\n\u003Cli>Provide HTML alternatives for complex formatting\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Platform-safe formatting -->\n| Status | Description |\n|:-------|:------------|\n| Complete | ✅ Task finished successfully |\n| Progress | 🔄 Currently being worked on |\n| Pending | ⏳ Waiting for dependencies |\n\n<!-- HTML fallback -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Complete\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Task finished successfully\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003C/span>In Progress\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>Currently being worked on\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table data formatting and styling techniques transform basic tabular information into professional, visually compelling, and functionally robust data presentations that enhance comprehension, support diverse user needs, and maintain consistency across complex documentation systems. By implementing strategic formatting patterns, conditional styling approaches, and accessibility-first design principles, technical writers can create scalable documentation assets that serve both current requirements and future growth.\u003C/p>\n\u003Cp>The key to successful table formatting lies in establishing consistent standards, understanding your audience's needs, and balancing visual appeal with functional utility. Whether you're creating financial reports, technical specifications, or project dashboards, the techniques covered in this guide provide the foundation for building professional-quality data presentations that communicate effectively and maintain their integrity across different platforms and use cases.\u003C/p>\n\u003Cp>Remember to validate your formatting choices across all target platforms, implement proper accessibility features for inclusive access, and consider the mobile user experience when designing complex data layouts. With careful attention to these considerations, your formatted tables will become powerful tools for data communication that enhance both the clarity and professionalism of your technical documentation.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-table-data-formatting","Why Master Table Data Formatting?",2,{"id":20,"text":21,"level":18},"foundation-formatting-techniques","Foundation Formatting Techniques",{"id":23,"text":24,"level":18},"advanced-styling-techniques","Advanced Styling Techniques",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"best-practices-and-guidelines","Best Practices and Guidelines",{"id":32,"text":33,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,45,53],{"slug":40,"title":5,"description":41,"excerpt":42,"date":43,"category":9,"author":10,"keywords":44,"readingMinutes":12},"markdown-table-data-formatting-and-styling-complete-guide","Master advanced Markdown table data formatting techniques for professional presentations, including numeric formatting, data alignment, conditional styling, and responsive design patterns. Create publication-ready data tables with consistent styling.","Advanced Markdown table data formatting and styling enables professional data presentation that transforms raw information into comprehensible, visually appealing tables suitable for reports,…","2025-11-18","markdown table formatting, data presentation markdown, table styling, numeric formatting tables, markdown data visualization, professional table design, responsive markdown tables, table data alignment",{"slug":46,"title":47,"description":48,"excerpt":49,"date":50,"category":9,"author":10,"keywords":51,"readingMinutes":52},"markdown-table-borders-styling-complete-guide","Markdown Table Borders and Styling: Complete Guide for Professional Table Formatting","Master table borders, styling, and formatting in Markdown. Learn to create professional tables with custom borders, colors, alignment, and responsive design for documentation and web content.","Table borders and styling in Markdown enable writers to create professional, visually appealing data presentations that enhance readability and information hierarchy. While basic Markdown tables…","2025-09-04","markdown table borders, markdown table styling, table formatting markdown, custom table borders, markdown table css, professional tables, responsive table design",13,{"slug":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":52},"markdown-table-cell-merging-and-advanced-formatting","Markdown Table Cell Merging and Advanced Formatting: Complete Guide for Professional Data Presentation","Master advanced table formatting in Markdown including cell merging, column spanning, row grouping, and complex table layouts. Learn platform-specific features and professional table design techniques.","Advanced Markdown table formatting capabilities extend far beyond basic grid layouts, offering sophisticated cell merging, column spanning, and professional formatting options that transform…","2025-12-13","markdown table merging, markdown table formatting, advanced markdown tables, cell spanning markdown, table design markdown, markdown table styling, professional markdown tables",1792184944820]