[{"data":1,"prerenderedAt":60},["Reactive",2],{"blog-post-markdown-table-data-formatting-and-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-and-styling-complete-guide","Markdown Table Data Formatting and Styling: Complete Guide for Professional Data Presentation","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","Tutorial","Matthew Rathbone","markdown table formatting, data presentation markdown, table styling, numeric formatting tables, markdown data visualization, professional table design, responsive markdown tables, table data alignment",16,"\u003Cp>Advanced Markdown table data formatting and styling enables professional data presentation that transforms raw information into comprehensible, visually appealing tables suitable for reports, documentation, and data analysis. By implementing sophisticated formatting techniques, consistent styling patterns, and responsive design principles, technical users can create publication-ready tables that effectively communicate complex data relationships while maintaining accessibility and cross-platform compatibility.\u003C/p>\n\u003Ch2 id=\"why-master-table-data-formatting\">Why Master Table Data Formatting?\u003C/h2>\n\u003Cp>Professional table formatting provides essential benefits for data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data Clarity\u003C/strong>: Transform raw numbers into easily digestible information with proper alignment and formatting\u003C/li>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Guide readers through complex data using consistent styling and emphasis patterns\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Create publication-ready tables that enhance document credibility and readability\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Platform Consistency\u003C/strong>: Ensure tables render appropriately across different Markdown processors and output formats\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: Implement proper semantic structure and styling that works with screen readers and assistive technologies\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-data-formatting-techniques\">Foundation Data Formatting Techniques\u003C/h2>\n\u003Ch3 id=\"basic-numeric-formatting-patterns\">Basic Numeric Formatting Patterns\u003C/h3>\n\u003Cp>Implementing consistent number formatting for different data types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Professional Data Formatting Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Financial Data Table\u003C/span>\n\n| Product Category | Q1 Revenue | Q2 Revenue | Growth % | Units Sold |\n|------------------|------------|------------|----------|------------|\n| Electronics      | $1,247,350 | $1,389,200 | +11.4%   | 15,642     |\n| Software         | $892,100   | $1,205,750 | +35.2%   | 8,934      |\n| Services         | $564,800   | $623,150   | +10.3%   | 2,847      |\n| \u003Cspan class=\"hljs-strong\">**Total**\u003C/span>        | \u003Cspan class=\"hljs-strong\">**$2,704,250**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,218,100**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+19.0%**\u003C/span> | \u003Cspan class=\"hljs-strong\">**27,423**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Scientific Data Formatting\u003C/span>\n\n| Measurement | Value      | Uncertainty | Units   | Precision |\n|-------------|------------|-------------|---------|-----------|\n| Temperature | 23.47      | ±0.12       | °C      | 0.01      |\n| Pressure    | 101,325.4  | ±2.5        | Pa      | 0.1       |\n| Voltage     | 3.3000     | ±0.0025     | V       | 0.0001    |\n| Current     | 0.00245    | ±0.00008    | A       | 0.00001   |\n\n\u003Cspan class=\"hljs-section\">## Statistical Summary Table\u003C/span>\n\n| Metric         | Mean    | Median  | Std Dev | Min     | Max     |\n|----------------|---------|---------|---------|---------|---------|\n| Response Time  | 127.3   | 118.5   | 34.7    | 67.2    | 298.4   |\n| Success Rate   | 99.23%  | 99.45%  | 1.2%    | 95.1%   | 100.0%  |\n| Throughput     | 2,847   | 2,912   | 423     | 1,234   | 3,892   |\n| Error Count    | 12.4    | 8.0     | 15.3    | 0       | 67      |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-alignment-techniques\">Advanced Alignment Techniques\u003C/h3>\n\u003Cp>Creating sophisticated alignment patterns for different data types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Table Alignment Patterns\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Mixed Data Type Alignment\u003C/span>\n\n| Item Description          | Quantity | Unit Price | Extended | Tax Rate | Total    |\n|:--------------------------|:--------:|-----------:|---------:|---------:|---------:|\n| Professional Services    | 120 hrs  | $85.00     | $10,200  | 8.5%     | $11,067  |\n| Software License         | 5 units  | $299.99    | $1,500   | 0.0%     | $1,500   |\n| Hardware Components      | 12 pcs   | $45.50     | $546     | 6.25%    | $580     |\n| Training Materials       | 1 set    | $2,450.00  | $2,450   | 8.5%     | $2,658   |\n| \u003Cspan class=\"hljs-strong\">**Project Total**\u003C/span>        |          |            |          |          | \u003Cspan class=\"hljs-strong\">**$15,805**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Performance Metrics Dashboard\u003C/span>\n\n| Service Component    | Status | Response Time | Throughput  | Error Rate | Uptime  |\n|:--------------------:|:------:|--------------:|------------:|-----------:|--------:|\n| API Gateway          | 🟢     | 23ms          | 15,420 req/s| 0.02%      | 99.98%  |\n| Database Cluster     | 🟢     | 8ms           | 8,934 ops/s | 0.00%      | 99.99%  |\n| Cache Layer          | 🟡     | 156ms         | 45,230 ops/s| 0.15%      | 99.85%  |\n| File Storage         | 🟢     | 89ms          | 2,847 ops/s | 0.01%      | 99.95%  |\n| \u003Cspan class=\"hljs-strong\">**Overall System**\u003C/span>   | \u003Cspan class=\"hljs-strong\">**🟢**\u003C/span> | \u003Cspan class=\"hljs-strong\">**67ms**\u003C/span>      | \u003Cspan class=\"hljs-strong\">**18,108 ops/s**\u003C/span> | \u003Cspan class=\"hljs-strong\">**0.05%**\u003C/span> | \u003Cspan class=\"hljs-strong\">**99.92%**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"conditional-formatting-and-visual-indicators\">Conditional Formatting and Visual Indicators\u003C/h3>\n\u003Cp>Implementing visual cues and conditional formatting within table constraints:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Visual Data Indicators and Conditional Formatting\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Project Status Dashboard\u003C/span>\n\n| Project Name        | Progress | Budget Status | Timeline | Risk Level | Team Size |\n|:--------------------|:--------:|--------------:|:--------:|:----------:|:---------:|\n| Website Redesign    | ████████░ 85% | Under Budget ✅ | On Track ⏱️ | Low 🟢 | 6 devs |\n| Mobile App v2.0     | ██████░░░ 60% | Over Budget ⚠️ | Delayed 🔴 | High 🔴 | 8 devs |\n| API Integration     | ██████████ 100% | On Budget ✅ | Complete ✅ | None 🟢 | 4 devs |\n| Database Migration  | ███░░░░░░ 30% | Under Budget ✅ | At Risk ⚠️ | Medium 🟡 | 3 devs |\n\n\u003Cspan class=\"hljs-section\">## Sales Performance Indicators\u003C/span>\n\n| Representative | Monthly Target | Actual Sales | Achievement | Trend | Ranking |\n|:---------------|---------------:|-------------:|:-----------:|:-----:|:-------:|\n| Sarah Johnson  | $125,000       | $147,350     | 118% 📈     | ⬆️    | #1 🥇  |\n| Mike Chen      | $110,000       | $98,750      | 90% 📊     | ⬇️    | #4     |\n| Lisa Rodriguez | $135,000       | $142,100     | 105% 📈     | ⬆️    | #2 🥈  |\n| James Wilson   | $95,000        | $108,900     | 115% 📈     | ⬆️    | #3 🥉  |\n\n\u003Cspan class=\"hljs-section\">## System Health Monitoring\u003C/span>\n\n| Component       | CPU Usage | Memory | Disk I/O | Network | Status    |\n|:----------------|:---------:|:------:|:--------:|:-------:|:---------:|\n| Web Server 1    | 23% 🟢   | 45% 🟢 | 12% 🟢  | 156 MB/s| Healthy   |\n| Web Server 2    | 67% 🟡   | 78% 🟡 | 34% 🟡  | 289 MB/s| Warning   |\n| Database        | 89% 🔴   | 92% 🔴 | 67% 🟡  | 445 MB/s| Critical  |\n| Cache Server    | 12% 🟢   | 23% 🟢 | 8% 🟢   | 89 MB/s | Healthy   |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-styling-and-presentation-techniques\">Advanced Styling and Presentation Techniques\u003C/h2>\n\u003Ch3 id=\"multi-row-header-structures\">Multi-Row Header Structures\u003C/h3>\n\u003Cp>Creating complex header arrangements for sophisticated data organization:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Complex Header Structures and Data Organization\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Quarterly Financial Performance\u003C/span>\n\n| | Q1 2024 | | Q2 2024 | | YoY Growth |\n|:--|--:|--:|--:|--:|--:|\n| \u003Cspan class=\"hljs-strong\">**Metric**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Revenue**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Profit**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Revenue**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Profit**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Revenue**\u003C/span> |\n| North America | $2,450,000 | $245,000 | $2,890,000 | $312,000 | +18.0% |\n| Europe | $1,890,000 | $189,000 | $2,100,000 | $231,000 | +11.1% |\n| Asia Pacific | $3,200,000 | $480,000 | $3,850,000 | $578,000 | +20.3% |\n| \u003Cspan class=\"hljs-strong\">**Global Total**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$7,540,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$914,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$8,840,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$1,121,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+17.2%**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Product Performance Matrix\u003C/span>\n\n| Product Line | Launch Date | | Metrics | | | Market Position |\n|:-------------|:------------|:--|:--------|:--|:--|:----------------|\n| | | \u003Cspan class=\"hljs-strong\">**Units Sold**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Revenue**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Market Share**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Rating**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Rank**\u003C/span> |\n| Pro Series | 2023-03-15 | 45,230 | $2,261,500 | 15.2% | ⭐⭐⭐⭐⭐ | #2 |\n| Standard Line | 2022-11-08 | 89,450 | $1,788,900 | 12.8% | ⭐⭐⭐⭐ | #3 |\n| Budget Edition | 2024-01-22 | 156,800 | $1,568,000 | 8.9% | ⭐⭐⭐ | #5 |\n| Enterprise | 2023-09-12 | 12,340 | $3,702,000 | 23.1% | ⭐⭐⭐⭐⭐ | #1 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"data-comparison-and-analysis-tables\">Data Comparison and Analysis Tables\u003C/h3>\n\u003Cp>Implementing sophisticated comparison structures for data analysis:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Data Comparison and Analysis Frameworks\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Technology Stack Comparison\u003C/span>\n\n| Criteria | React + TypeScript | Vue.js + JavaScript | Angular + TypeScript | Weight | Winner |\n|:---------|:------------------:|:-------------------:|:-------------------:|:------:|:------:|\n| \u003Cspan class=\"hljs-strong\">**Development Speed**\u003C/span> | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | 25% | Vue.js |\n| \u003Cspan class=\"hljs-strong\">**Type Safety**\u003C/span> | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ | 20% | Tie |\n| \u003Cspan class=\"hljs-strong\">**Community Support**\u003C/span> | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 15% | React |\n| \u003Cspan class=\"hljs-strong\">**Learning Curve**\u003C/span> | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | 20% | Vue.js |\n| \u003Cspan class=\"hljs-strong\">**Performance**\u003C/span> | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 10% | Tie |\n| \u003Cspan class=\"hljs-strong\">**Ecosystem Maturity**\u003C/span> | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | 10% | React |\n| \u003Cspan class=\"hljs-strong\">**Weighted Score**\u003C/span> | \u003Cspan class=\"hljs-strong\">**4.05**\u003C/span> | \u003Cspan class=\"hljs-strong\">**4.15**\u003C/span> | \u003Cspan class=\"hljs-strong\">**3.60**\u003C/span> | \u003Cspan class=\"hljs-strong\">**100%**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Vue.js**\u003C/span> |\n\n\u003Cspan class=\"hljs-section\">## Server Performance Benchmarks\u003C/span>\n\n| Test Scenario | Current Setup | | Proposed Setup | | Performance Gain |\n|:--------------|:-------------:|:--|:--------------:|:--|:---------------:|\n| | \u003Cspan class=\"hljs-strong\">**Response Time**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Throughput**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Response Time**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Throughput**\u003C/span> | \u003Cspan class=\"hljs-strong\">**Improvement**\u003C/span> |\n| API Calls | 145ms | 2,340 req/s | 89ms | 4,560 req/s | +95% throughput |\n| Database Queries | 67ms | 890 ops/s | 34ms | 1,780 ops/s | +100% throughput |\n| File Operations | 234ms | 156 ops/s | 123ms | 289 ops/s | +85% throughput |\n| \u003Cspan class=\"hljs-strong\">**Overall System**\u003C/span> | \u003Cspan class=\"hljs-strong\">**149ms**\u003C/span> | \u003Cspan class=\"hljs-strong\">**1,129 ops/s**\u003C/span> | \u003Cspan class=\"hljs-strong\">**82ms**\u003C/span> | \u003Cspan class=\"hljs-strong\">**2,210 ops/s**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+96% throughput**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-table-design-patterns\">Responsive Table Design Patterns\u003C/h3>\n\u003Cp>Creating tables that adapt to different screen sizes and viewing contexts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># responsive_table_generator.py - Generate responsive Markdown tables\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> typing \u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-type\">List\u003C/span>, \u003Cspan class=\"hljs-type\">Dict\u003C/span>, \u003Cspan class=\"hljs-type\">Any\u003C/span>, \u003Cspan class=\"hljs-type\">Optional\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> dataclasses \u003Cspan class=\"hljs-keyword\">import\u003C/span> dataclass\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> enum \u003Cspan class=\"hljs-keyword\">import\u003C/span> Enum\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableStyle\u003C/span>(\u003Cspan class=\"hljs-title class_ inherited__\">Enum\u003C/span>):\n    MINIMAL = \u003Cspan class=\"hljs-string\">"minimal"\u003C/span>\n    PROFESSIONAL = \u003Cspan class=\"hljs-string\">"professional"\u003C/span>\n    DATA_HEAVY = \u003Cspan class=\"hljs-string\">"data_heavy"\u003C/span>\n    DASHBOARD = \u003Cspan class=\"hljs-string\">"dashboard"\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DataType\u003C/span>(\u003Cspan class=\"hljs-title class_ inherited__\">Enum\u003C/span>):\n    TEXT = \u003Cspan class=\"hljs-string\">"text"\u003C/span>\n    NUMBER = \u003Cspan class=\"hljs-string\">"number"\u003C/span>\n    CURRENCY = \u003Cspan class=\"hljs-string\">"currency"\u003C/span>\n    PERCENTAGE = \u003Cspan class=\"hljs-string\">"percentage"\u003C/span>\n    DATE = \u003Cspan class=\"hljs-string\">"date"\u003C/span>\n    STATUS = \u003Cspan class=\"hljs-string\">"status"\u003C/span>\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ColumnConfig\u003C/span>:\n    header: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    key: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    data_type: DataType\n    align: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">"left"\u003C/span>  \u003Cspan class=\"hljs-comment\"># left, center, right\u003C/span>\n    width: \u003Cspan class=\"hljs-type\">Optional\u003C/span>[\u003Cspan class=\"hljs-built_in\">int\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    format_pattern: \u003Cspan class=\"hljs-type\">Optional\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    responsive_priority: \u003Cspan class=\"hljs-built_in\">int\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>  \u003Cspan class=\"hljs-comment\"># 1 = highest, 5 = lowest\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ResponsiveTableGenerator\u003C/span>:\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__init__\u003C/span>(\u003Cspan class=\"hljs-params\">self, style: TableStyle = TableStyle.PROFESSIONAL\u003C/span>):\n        self.style = style\n        self.format_patterns = {\n            DataType.CURRENCY: \u003Cspan class=\"hljs-string\">"${:,.2f}"\u003C/span>,\n            DataType.PERCENTAGE: \u003Cspan class=\"hljs-string\">"{:.1f}%"\u003C/span>,\n            DataType.NUMBER: \u003Cspan class=\"hljs-string\">"{:,}"\u003C/span>,\n            DataType.DATE: \u003Cspan class=\"hljs-string\">"%Y-%m-%d"\u003C/span>\n        }\n        \n        self.alignment_symbols = {\n            \u003Cspan class=\"hljs-string\">"left"\u003C/span>: \u003Cspan class=\"hljs-string\">":--"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"center"\u003C/span>: \u003Cspan class=\"hljs-string\">":-:"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"right"\u003C/span>: \u003Cspan class=\"hljs-string\">"--:"\u003C/span>\n        }\n        \n        self.style_indicators = {\n            \u003Cspan class=\"hljs-string\">"success"\u003C/span>: \u003Cspan class=\"hljs-string\">"✅"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"warning"\u003C/span>: \u003Cspan class=\"hljs-string\">"⚠️"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"error"\u003C/span>: \u003Cspan class=\"hljs-string\">"❌"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"info"\u003C/span>: \u003Cspan class=\"hljs-string\">"ℹ️"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"up"\u003C/span>: \u003Cspan class=\"hljs-string\">"⬆️"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"down"\u003C/span>: \u003Cspan class=\"hljs-string\">"⬇️"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"stable"\u003C/span>: \u003Cspan class=\"hljs-string\">"➡️"\u003C/span>\n        }\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">format_cell_value\u003C/span>(\u003Cspan class=\"hljs-params\">self, value: \u003Cspan class=\"hljs-type\">Any\u003C/span>, column: ColumnConfig\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Format a cell value based on its data type and column configuration"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> value \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Apply custom format pattern if provided\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> column.format_pattern:\n            \u003Cspan class=\"hljs-keyword\">try\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> column.format_pattern.\u003Cspan class=\"hljs-built_in\">format\u003C/span>(value)\n            \u003Cspan class=\"hljs-keyword\">except\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(value)\n        \n        \u003Cspan class=\"hljs-comment\"># Apply default formatting based on data type\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> column.data_type == DataType.CURRENCY:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, (\u003Cspan class=\"hljs-built_in\">int\u003C/span>, \u003Cspan class=\"hljs-built_in\">float\u003C/span>)):\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.format_patterns[DataType.CURRENCY].\u003Cspan class=\"hljs-built_in\">format\u003C/span>(value)\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> column.data_type == DataType.PERCENTAGE:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, (\u003Cspan class=\"hljs-built_in\">int\u003C/span>, \u003Cspan class=\"hljs-built_in\">float\u003C/span>)):\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.format_patterns[DataType.PERCENTAGE].\u003Cspan class=\"hljs-built_in\">format\u003C/span>(value)\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> column.data_type == DataType.NUMBER:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(value, (\u003Cspan class=\"hljs-built_in\">int\u003C/span>, \u003Cspan class=\"hljs-built_in\">float\u003C/span>)):\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.format_patterns[DataType.NUMBER].\u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-built_in\">int\u003C/span>(value))\n        \u003Cspan class=\"hljs-keyword\">elif\u003C/span> column.data_type == DataType.STATUS:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.format_status_value(value)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(value)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">format_status_value\u003C/span>(\u003Cspan class=\"hljs-params\">self, value: \u003Cspan class=\"hljs-type\">Any\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Format status values with appropriate indicators"""\u003C/span>\n        value_str = \u003Cspan class=\"hljs-built_in\">str\u003C/span>(value).lower()\n        \n        status_mapping = {\n            \u003Cspan class=\"hljs-string\">"success"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'success'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"completed"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'success'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"active"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'success'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"warning"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'warning'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"pending"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'warning'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"error"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'error'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"failed"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'error'\u003C/span>]}\u003C/span>"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"inactive"\u003C/span>: \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{value}\u003C/span> \u003Cspan class=\"hljs-subst\">{self.style_indicators[\u003Cspan class=\"hljs-string\">'error'\u003C/span>]}\u003C/span>"\u003C/span>\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> key, formatted \u003Cspan class=\"hljs-keyword\">in\u003C/span> status_mapping.items():\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> key \u003Cspan class=\"hljs-keyword\">in\u003C/span> value_str:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> formatted\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">str\u003C/span>(value)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">calculate_column_widths\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], columns: \u003Cspan class=\"hljs-type\">List\u003C/span>[ColumnConfig]\u003C/span>) -> \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-built_in\">int\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Calculate optimal column widths based on content"""\u003C/span>\n        widths = {}\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> column \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns:\n            max_width = \u003Cspan class=\"hljs-built_in\">len\u003C/span>(column.header)\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> data:\n                cell_value = self.format_cell_value(row.get(column.key), column)\n                max_width = \u003Cspan class=\"hljs-built_in\">max\u003C/span>(max_width, \u003Cspan class=\"hljs-built_in\">len\u003C/span>(\u003Cspan class=\"hljs-built_in\">str\u003C/span>(cell_value)))\n            \n            \u003Cspan class=\"hljs-comment\"># Add padding and respect explicit width settings\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> column.width:\n                widths[column.key] = \u003Cspan class=\"hljs-built_in\">max\u003C/span>(column.width, max_width)\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                widths[column.key] = \u003Cspan class=\"hljs-built_in\">min\u003C/span>(max_width + \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">25\u003C/span>)  \u003Cspan class=\"hljs-comment\"># Cap at reasonable width\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> widths\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_table_header\u003C/span>(\u003Cspan class=\"hljs-params\">self, columns: \u003Cspan class=\"hljs-type\">List\u003C/span>[ColumnConfig], responsive_mode: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Generate the table header rows"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> responsive_mode:\n            \u003Cspan class=\"hljs-comment\"># Show only high-priority columns on mobile\u003C/span>\n            columns = [col \u003Cspan class=\"hljs-keyword\">for\u003C/span> col \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns \u003Cspan class=\"hljs-keyword\">if\u003C/span> col.responsive_priority <= \u003Cspan class=\"hljs-number\">2\u003C/span>]\n        \n        \u003Cspan class=\"hljs-comment\"># Header row\u003C/span>\n        header_row = \u003Cspan class=\"hljs-string\">"| "\u003C/span> + \u003Cspan class=\"hljs-string\">" | "\u003C/span>.join([col.header \u003Cspan class=\"hljs-keyword\">for\u003C/span> col \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns]) + \u003Cspan class=\"hljs-string\">" |"\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Alignment row\u003C/span>\n        alignment_cells = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> col \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns:\n            alignment_cells.append(self.alignment_symbols.get(col.align, \u003Cspan class=\"hljs-string\">":--"\u003C/span>))\n        alignment_row = \u003Cspan class=\"hljs-string\">"| "\u003C/span> + \u003Cspan class=\"hljs-string\">" | "\u003C/span>.join(alignment_cells) + \u003Cspan class=\"hljs-string\">" |"\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> [header_row, alignment_row]\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_table_rows\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], columns: \u003Cspan class=\"hljs-type\">List\u003C/span>[ColumnConfig], \n                          responsive_mode: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]:\n        \u003Cspan class=\"hljs-string\">"""Generate the table data rows"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> responsive_mode:\n            \u003Cspan class=\"hljs-comment\"># Show only high-priority columns on mobile\u003C/span>\n            columns = [col \u003Cspan class=\"hljs-keyword\">for\u003C/span> col \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns \u003Cspan class=\"hljs-keyword\">if\u003C/span> col.responsive_priority <= \u003Cspan class=\"hljs-number\">2\u003C/span>]\n        \n        rows = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> row_data \u003Cspan class=\"hljs-keyword\">in\u003C/span> data:\n            cells = []\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> column \u003Cspan class=\"hljs-keyword\">in\u003C/span> columns:\n                formatted_value = self.format_cell_value(row_data.get(column.key), column)\n                cells.append(formatted_value)\n            \n            row_markdown = \u003Cspan class=\"hljs-string\">"| "\u003C/span> + \u003Cspan class=\"hljs-string\">" | "\u003C/span>.join(cells) + \u003Cspan class=\"hljs-string\">" |"\u003C/span>\n            rows.append(row_markdown)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rows\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_responsive_table\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], columns: \u003Cspan class=\"hljs-type\">List\u003C/span>[ColumnConfig], \n                                title: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">""\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate a complete responsive table with both desktop and mobile versions"""\u003C/span>\n        result = []\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> title:\n            result.append(\u003Cspan class=\"hljs-string\">f"## \u003Cspan class=\"hljs-subst\">{title}\u003C/span>"\u003C/span>)\n            result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Desktop version\u003C/span>\n        result.append(\u003Cspan class=\"hljs-string\">"### Desktop View"\u003C/span>)\n        result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        header_rows = self.generate_table_header(columns, responsive_mode=\u003Cspan class=\"hljs-literal\">False\u003C/span>)\n        data_rows = self.generate_table_rows(data, columns, responsive_mode=\u003Cspan class=\"hljs-literal\">False\u003C/span>)\n        \n        result.extend(header_rows)\n        result.extend(data_rows)\n        result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Mobile-optimized version\u003C/span>\n        result.append(\u003Cspan class=\"hljs-string\">"### Mobile View"\u003C/span>)\n        result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        result.append(\u003Cspan class=\"hljs-string\">"*Showing key columns only for mobile readability*"\u003C/span>)\n        result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        mobile_header_rows = self.generate_table_header(columns, responsive_mode=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n        mobile_data_rows = self.generate_table_rows(data, columns, responsive_mode=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n        \n        result.extend(mobile_header_rows)\n        result.extend(mobile_data_rows)\n        result.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">"\\n"\u003C/span>.join(result)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_summary_statistics\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], numeric_columns: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>]\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate a summary statistics table for numeric data"""\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">import\u003C/span> statistics\n        \n        stats_data = []\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> column_key \u003Cspan class=\"hljs-keyword\">in\u003C/span> numeric_columns:\n            values = [row[column_key] \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> data \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(row.get(column_key), (\u003Cspan class=\"hljs-built_in\">int\u003C/span>, \u003Cspan class=\"hljs-built_in\">float\u003C/span>))]\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> values:\n                stats_data.append({\n                    \u003Cspan class=\"hljs-string\">'metric'\u003C/span>: column_key.replace(\u003Cspan class=\"hljs-string\">'_'\u003C/span>, \u003Cspan class=\"hljs-string\">' '\u003C/span>).title(),\n                    \u003Cspan class=\"hljs-string\">'count'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(values),\n                    \u003Cspan class=\"hljs-string\">'mean'\u003C/span>: statistics.mean(values),\n                    \u003Cspan class=\"hljs-string\">'median'\u003C/span>: statistics.median(values),\n                    \u003Cspan class=\"hljs-string\">'std_dev'\u003C/span>: statistics.stdev(values) \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">len\u003C/span>(values) > \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                    \u003Cspan class=\"hljs-string\">'min_val'\u003C/span>: \u003Cspan class=\"hljs-built_in\">min\u003C/span>(values),\n                    \u003Cspan class=\"hljs-string\">'max_val'\u003C/span>: \u003Cspan class=\"hljs-built_in\">max\u003C/span>(values)\n                })\n        \n        columns = [\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Metric"\u003C/span>, \u003Cspan class=\"hljs-string\">"metric"\u003C/span>, DataType.TEXT, align=\u003Cspan class=\"hljs-string\">"left"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Count"\u003C/span>, \u003Cspan class=\"hljs-string\">"count"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Mean"\u003C/span>, \u003Cspan class=\"hljs-string\">"mean"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Median"\u003C/span>, \u003Cspan class=\"hljs-string\">"median"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Std Dev"\u003C/span>, \u003Cspan class=\"hljs-string\">"std_dev"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Min"\u003C/span>, \u003Cspan class=\"hljs-string\">"min_val"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Max"\u003C/span>, \u003Cspan class=\"hljs-string\">"max_val"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>)\n        ]\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.generate_responsive_table(stats_data, columns, \u003Cspan class=\"hljs-string\">"Summary Statistics"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_comparison_table\u003C/span>(\u003Cspan class=\"hljs-params\">self, items: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], criteria: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>], \n                                title: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">"Comparison Analysis"\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate a comparison table with scoring and ranking"""\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Calculate weighted scores if weights are provided\u003C/span>\n        comparison_data = []\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> item \u003Cspan class=\"hljs-keyword\">in\u003C/span> items:\n            item_data = {\u003Cspan class=\"hljs-string\">"name"\u003C/span>: item[\u003Cspan class=\"hljs-string\">"name"\u003C/span>]}\n            total_score = \u003Cspan class=\"hljs-number\">0\u003C/span>\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> criterion \u003Cspan class=\"hljs-keyword\">in\u003C/span> criteria:\n                score = item.get(criterion, \u003Cspan class=\"hljs-number\">0\u003C/span>)\n                weight = item.get(\u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{criterion}\u003C/span>_weight"\u003C/span>, \u003Cspan class=\"hljs-number\">1.0\u003C/span>)\n                item_data[criterion] = score\n                total_score += score * weight\n            \n            item_data[\u003Cspan class=\"hljs-string\">"total_score"\u003C/span>] = total_score\n            comparison_data.append(item_data)\n        \n        \u003Cspan class=\"hljs-comment\"># Sort by total score and add ranking\u003C/span>\n        comparison_data.sort(key=\u003Cspan class=\"hljs-keyword\">lambda\u003C/span> x: x[\u003Cspan class=\"hljs-string\">"total_score"\u003C/span>], reverse=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> i, item \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(comparison_data, \u003Cspan class=\"hljs-number\">1\u003C/span>):\n            item[\u003Cspan class=\"hljs-string\">"rank"\u003C/span>] = i\n        \n        \u003Cspan class=\"hljs-comment\"># Generate columns\u003C/span>\n        columns = [ColumnConfig(\u003Cspan class=\"hljs-string\">"Item"\u003C/span>, \u003Cspan class=\"hljs-string\">"name"\u003C/span>, DataType.TEXT, align=\u003Cspan class=\"hljs-string\">"left"\u003C/span>)]\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> criterion \u003Cspan class=\"hljs-keyword\">in\u003C/span> criteria:\n            columns.append(ColumnConfig(\n                criterion.replace(\u003Cspan class=\"hljs-string\">'_'\u003C/span>, \u003Cspan class=\"hljs-string\">' '\u003C/span>).title(), \n                criterion, \n                DataType.NUMBER, \n                align=\u003Cspan class=\"hljs-string\">"center"\u003C/span>,\n                format_pattern=\u003Cspan class=\"hljs-string\">"{:.1f}"\u003C/span>\n            ))\n        \n        columns.extend([\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Total Score"\u003C/span>, \u003Cspan class=\"hljs-string\">"total_score"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, format_pattern=\u003Cspan class=\"hljs-string\">"{:.2f}"\u003C/span>),\n            ColumnConfig(\u003Cspan class=\"hljs-string\">"Rank"\u003C/span>, \u003Cspan class=\"hljs-string\">"rank"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"center"\u003C/span>)\n        ])\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.generate_responsive_table(comparison_data, columns, title)\n\n\u003Cspan class=\"hljs-comment\"># Example usage and demonstration\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">demonstrate_advanced_table_generation\u003C/span>():\n    \u003Cspan class=\"hljs-string\">"""Demonstrate advanced table generation capabilities"""\u003C/span>\n    generator = ResponsiveTableGenerator(TableStyle.PROFESSIONAL)\n    \n    \u003Cspan class=\"hljs-comment\"># Sample performance data\u003C/span>\n    performance_data = [\n        {\n            \u003Cspan class=\"hljs-string\">"service"\u003C/span>: \u003Cspan class=\"hljs-string\">"API Gateway"\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"response_time"\u003C/span>: \u003Cspan class=\"hljs-number\">23.5\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"throughput"\u003C/span>: \u003Cspan class=\"hljs-number\">15420\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"error_rate"\u003C/span>: \u003Cspan class=\"hljs-number\">0.02\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"uptime"\u003C/span>: \u003Cspan class=\"hljs-number\">99.98\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"status"\u003C/span>: \u003Cspan class=\"hljs-string\">"Active"\u003C/span>\n        },\n        {\n            \u003Cspan class=\"hljs-string\">"service"\u003C/span>: \u003Cspan class=\"hljs-string\">"Database"\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"response_time"\u003C/span>: \u003Cspan class=\"hljs-number\">8.2\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"throughput"\u003C/span>: \u003Cspan class=\"hljs-number\">8934\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"error_rate"\u003C/span>: \u003Cspan class=\"hljs-number\">0.00\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"uptime"\u003C/span>: \u003Cspan class=\"hljs-number\">99.99\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"status"\u003C/span>: \u003Cspan class=\"hljs-string\">"Active"\u003C/span>\n        },\n        {\n            \u003Cspan class=\"hljs-string\">"service"\u003C/span>: \u003Cspan class=\"hljs-string\">"Cache Layer"\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"response_time"\u003C/span>: \u003Cspan class=\"hljs-number\">156.3\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"throughput"\u003C/span>: \u003Cspan class=\"hljs-number\">45230\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"error_rate"\u003C/span>: \u003Cspan class=\"hljs-number\">0.15\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"uptime"\u003C/span>: \u003Cspan class=\"hljs-number\">99.85\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"status"\u003C/span>: \u003Cspan class=\"hljs-string\">"Warning"\u003C/span>\n        }\n    ]\n    \n    \u003Cspan class=\"hljs-comment\"># Define columns with responsive priorities\u003C/span>\n    columns = [\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Service"\u003C/span>, \u003Cspan class=\"hljs-string\">"service"\u003C/span>, DataType.TEXT, align=\u003Cspan class=\"hljs-string\">"left"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">1\u003C/span>),\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Response Time (ms)"\u003C/span>, \u003Cspan class=\"hljs-string\">"response_time"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">1\u003C/span>),\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Throughput"\u003C/span>, \u003Cspan class=\"hljs-string\">"throughput"\u003C/span>, DataType.NUMBER, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">2\u003C/span>),\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Error Rate (%)"\u003C/span>, \u003Cspan class=\"hljs-string\">"error_rate"\u003C/span>, DataType.PERCENTAGE, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">3\u003C/span>),\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Uptime (%)"\u003C/span>, \u003Cspan class=\"hljs-string\">"uptime"\u003C/span>, DataType.PERCENTAGE, align=\u003Cspan class=\"hljs-string\">"right"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">2\u003C/span>),\n        ColumnConfig(\u003Cspan class=\"hljs-string\">"Status"\u003C/span>, \u003Cspan class=\"hljs-string\">"status"\u003C/span>, DataType.STATUS, align=\u003Cspan class=\"hljs-string\">"center"\u003C/span>, responsive_priority=\u003Cspan class=\"hljs-number\">1\u003C/span>)\n    ]\n    \n    \u003Cspan class=\"hljs-comment\"># Generate responsive table\u003C/span>\n    table_markdown = generator.generate_responsive_table(\n        performance_data, \n        columns, \n        \u003Cspan class=\"hljs-string\">"System Performance Dashboard"\u003C/span>\n    )\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(table_markdown)\n    \n    \u003Cspan class=\"hljs-comment\"># Generate summary statistics\u003C/span>\n    numeric_columns = [\u003Cspan class=\"hljs-string\">"response_time"\u003C/span>, \u003Cspan class=\"hljs-string\">"throughput"\u003C/span>, \u003Cspan class=\"hljs-string\">"error_rate"\u003C/span>, \u003Cspan class=\"hljs-string\">"uptime"\u003C/span>]\n    summary_stats = generator.generate_summary_statistics(performance_data, numeric_columns)\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(summary_stats)\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> __name__ == \u003Cspan class=\"hljs-string\">"__main__"\u003C/span>:\n    demonstrate_advanced_table_generation()\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Table formatting strategies integrate seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation systems and workflows\u003C/a>, sophisticated table formatting ensures that data presentations maintain consistency across all generated documents, reports, and automated content updates while preserving formatting integrity throughout content management processes.\u003C/p>\n\u003Cp>For advanced content architectures, table formatting works effectively with \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management and cross-referencing systems\u003C/a> to create interconnected data presentations where table content can reference other sections, external data sources, and related documentation while maintaining proper formatting and accessibility standards.\u003C/p>\n\u003Cp>When building comprehensive documentation platforms, table data formatting complements \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> by ensuring that data tables remain functional and readable in offline scenarios, mobile contexts, and progressive loading environments while maintaining interactive capabilities and responsive design principles.\u003C/p>\n\u003Ch2 id=\"css-integration-for-enhanced-styling\">CSS Integration for Enhanced Styling\u003C/h2>\n\u003Ch3 id=\"custom-table-themes\">Custom Table Themes\u003C/h3>\n\u003Cp>Implementing CSS frameworks for consistent table styling across platforms:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* professional-table-themes.css - Advanced table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--table-primary-color\u003C/span>: \u003Cspan class=\"hljs-number\">#2563eb\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-secondary-color\u003C/span>: \u003Cspan class=\"hljs-number\">#64748b\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-success-color\u003C/span>: \u003Cspan class=\"hljs-number\">#059669\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-warning-color\u003C/span>: \u003Cspan class=\"hljs-number\">#d97706\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-error-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc2626\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-bg-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-bg-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#f8fafc\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#1e293b\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#64748b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Professional Data Table */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Inter'\u003C/span>, -apple-system, BlinkMacSystemFont, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-bg-secondary);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-primary);\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(even) {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-bg-secondary);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f5f9\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Numeric data alignment and formatting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Monaco, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.currency\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-success-color);\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.percentage\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.percentage\u003C/span>\u003Cspan class=\"hljs-selector-class\">.positive\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-success-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.percentage\u003C/span>\u003Cspan class=\"hljs-selector-class\">.negative\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-error-color);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0.375rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.success\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dcfce7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-success-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.warning\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fef3c7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-warning-color);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.error\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fee2e2\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-error-color);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.hide-mobile\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Stack table on very small screens */\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n      \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-border-color);\n      \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0.375rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n      \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n      \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n      \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">": "\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n      \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n      \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n      \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-secondary);\n    }\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles for tables */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-header-group;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-row-group;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n  \u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n    \u003Cspan class=\"hljs-attr\">--table-bg-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#1e293b\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--table-bg-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#334155\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--table-border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#475569\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--table-text-primary\u003C/span>: \u003Cspan class=\"hljs-number\">#f8fafc\u003C/span>;\n    \u003Cspan class=\"hljs-attr\">--table-text-secondary\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e1\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-table-use-cases\">Advanced Table Use Cases\u003C/h2>\n\u003Ch3 id=\"financial-reporting-tables\">Financial Reporting Tables\u003C/h3>\n\u003Cp>Creating sophisticated financial data presentations:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Financial Reporting Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Profit & Loss Statement Summary\u003C/span>\n\n| Category | Q4 2023 | Q1 2024 | Q2 2024 | Q3 2024 | YTD 2024 | Change % |\n|:---------|--------:|--------:|--------:|--------:|---------:|---------:|\n| \u003Cspan class=\"hljs-strong\">**Revenue**\u003C/span> | | | | | | |\n| Product Sales | $2,450,000 | $2,680,000 | $2,890,000 | $3,100,000 | $8,670,000 | +18.2% |\n| Service Revenue | $890,000 | $945,000 | $1,020,000 | $1,150,000 | $3,115,000 | +22.5% |\n| Licensing | $340,000 | $365,000 | $380,000 | $395,000 | $1,140,000 | +16.2% |\n| \u003Cspan class=\"hljs-strong\">**Total Revenue**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,680,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,990,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$4,290,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$4,645,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$12,925,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+19.1%**\u003C/span> |\n| | | | | | | |\n| \u003Cspan class=\"hljs-strong\">**Expenses**\u003C/span> | | | | | | |\n| Cost of Goods | $1,470,000 | $1,595,000 | $1,716,000 | $1,858,000 | $5,169,000 | +17.8% |\n| Operating Expenses | $1,240,000 | $1,356,000 | $1,458,000 | $1,575,000 | $4,389,000 | +20.5% |\n| Marketing | $450,000 | $478,000 | $515,000 | $557,000 | $1,550,000 | +17.8% |\n| \u003Cspan class=\"hljs-strong\">**Total Expenses**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,160,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,429,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,689,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$3,990,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$11,108,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+18.8%**\u003C/span> |\n| | | | | | | |\n| \u003Cspan class=\"hljs-strong\">**Net Income**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$520,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$561,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$601,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$655,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**$1,817,000**\u003C/span> | \u003Cspan class=\"hljs-strong\">**+20.8%**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"technical-performance-monitoring\">Technical Performance Monitoring\u003C/h3>\n\u003Cp>Creating comprehensive system monitoring dashboards:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># System Performance Monitoring Dashboard\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Infrastructure Health Overview\u003C/span>\n\n| Component | Region | CPU | Memory | Storage | Network | Incidents | SLA | Status |\n|:----------|:------:|:---:|:------:|:-------:|:-------:|:---------:|:---:|:------:|\n| \u003Cspan class=\"hljs-strong\">**Web Tier**\u003C/span> |\n| Load Balancer 1 | US-East | 34% 🟢 | 45% 🟢 | 67% 🟡 | 2.3 GB/s | 0 | 99.99% | 🟢 Healthy |\n| Load Balancer 2 | US-West | 28% 🟢 | 38% 🟢 | 52% 🟢 | 1.8 GB/s | 1 | 99.95% | 🟢 Healthy |\n| Web Server 1 | US-East | 67% 🟡 | 78% 🟡 | 34% 🟢 | 890 MB/s | 2 | 99.92% | 🟡 Warning |\n| Web Server 2 | US-West | 23% 🟢 | 45% 🟢 | 29% 🟢 | 567 MB/s | 0 | 99.98% | 🟢 Healthy |\n| \u003Cspan class=\"hljs-strong\">**Database Tier**\u003C/span> |\n| Primary DB | US-East | 89% 🔴 | 92% 🔴 | 78% 🟡 | 1.2 GB/s | 3 | 99.89% | 🔴 Critical |\n| Read Replica 1 | US-East | 45% 🟢 | 56% 🟢 | 67% 🟡 | 456 MB/s | 1 | 99.94% | 🟢 Healthy |\n| Read Replica 2 | US-West | 38% 🟢 | 48% 🟢 | 43% 🟢 | 334 MB/s | 0 | 99.99% | 🟢 Healthy |\n| \u003Cspan class=\"hljs-strong\">**Cache Layer**\u003C/span> |\n| Redis Cluster 1 | US-East | 12% 🟢 | 67% 🟡 | N/A | 2.1 GB/s | 0 | 99.97% | 🟢 Healthy |\n| Redis Cluster 2 | US-West | 15% 🟢 | 72% 🟡 | N/A | 1.8 GB/s | 1 | 99.93% | 🟢 Healthy |\n\n\u003Cspan class=\"hljs-section\">## Application Performance Metrics\u003C/span>\n\n| Service Component | Requests/min | Avg Response | 95th Percentile | Error Rate | Apdex Score | Trend |\n|:------------------|-------------:|-------------:|----------------:|-----------:|------------:|:-----:|\n| User Authentication | 15,420 | 89ms | 234ms | 0.02% | 0.97 | ⬆️ |\n| Product Catalog | 8,934 | 156ms | 445ms | 0.08% | 0.94 | ➡️ |\n| Shopping Cart | 12,340 | 67ms | 178ms | 0.01% | 0.98 | ⬆️ |\n| Payment Processing | 2,847 | 1,234ms | 2,890ms | 0.15% | 0.89 | ⬇️ |\n| Order Management | 4,567 | 345ms | 789ms | 0.05% | 0.92 | ⬆️ |\n| \u003Cspan class=\"hljs-strong\">**Overall System**\u003C/span> | \u003Cspan class=\"hljs-strong\">**44,108**\u003C/span> | \u003Cspan class=\"hljs-strong\">**378ms**\u003C/span> | \u003Cspan class=\"hljs-strong\">**907ms**\u003C/span> | \u003Cspan class=\"hljs-strong\">**0.06%**\u003C/span> | \u003Cspan class=\"hljs-strong\">**0.94**\u003C/span> | \u003Cspan class=\"hljs-strong\">**⬆️**\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table data formatting and styling represents a sophisticated approach to professional data presentation that transforms raw information into comprehensible, visually appealing tables suitable for reports, documentation, and analytical presentations. Through systematic implementation of formatting patterns, responsive design principles, and consistent styling approaches, technical users can create publication-ready tables that effectively communicate complex data relationships while maintaining accessibility and cross-platform compatibility.\u003C/p>\n\u003Cp>The key to successful table formatting lies in understanding your audience's needs, implementing consistent visual hierarchies, and balancing comprehensive data presentation with readability and usability. Whether you're creating financial reports, technical documentation, performance dashboards, or analytical summaries, the techniques covered in this guide provide the foundation for creating professional, maintainable table presentations that serve both immediate communication needs and long-term documentation requirements.\u003C/p>\n\u003Cp>Remember to validate your table formatting across different platforms and devices, implement responsive design patterns that accommodate various viewing contexts, and maintain consistent styling standards that enhance rather than distract from your data presentation goals. With proper implementation of advanced table formatting techniques, your Markdown documents can achieve the same level of professional presentation quality that users expect from sophisticated reporting tools and data visualization platforms.\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-data-formatting-techniques","Foundation Data Formatting Techniques",{"id":23,"text":24,"level":18},"advanced-styling-and-presentation-techniques","Advanced Styling and Presentation Techniques",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"css-integration-for-enhanced-styling","CSS Integration for Enhanced Styling",{"id":32,"text":33,"level":18},"advanced-table-use-cases","Advanced Table Use Cases",{"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-styling-complete-guide","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","markdown table formatting, table data styling, markdown table alignment, data presentation markdown, table cell formatting, professional tables markdown, markdown table design, data visualization markdown",{"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",1792184944881]