[{"data":1,"prerenderedAt":93},["Reactive",2],{"blog-post-markdown-tables-advanced-features-and-styling-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":64,"related":68},"markdown-tables-advanced-features-and-styling-guide","Advanced Markdown Tables: Complete Guide to Formatting, Styling, and Enhanced Features","Master advanced Markdown table features including alignment, styling, complex data structures, and platform-specific enhancements. Learn professional table formatting for documentation and reports.","Tables are fundamental components of technical documentation, data presentation, and structured content. While basic Markdown table syntax is straightforward, advanced table features enable…","2025-08-24","Tutorial","Matthew Rathbone","markdown tables, markdown table formatting, advanced markdown tables, table alignment markdown, markdown table styling, complex markdown tables",13,"\u003Cp>Tables are fundamental components of technical documentation, data presentation, and structured content. While basic Markdown table syntax is straightforward, advanced table features enable sophisticated data presentation, complex formatting, and professional documentation. This comprehensive guide covers everything from basic table construction to advanced styling techniques and platform-specific enhancements.\u003C/p>\n\u003Ch2 id=\"why-use-advanced-markdown-tables\">Why Use Advanced Markdown Tables?\u003C/h2>\n\u003Cp>Advanced table features provide significant benefits for professional content:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data Visualization\u003C/strong>: Clear presentation of complex information and statistics\u003C/li>\n\u003Cli>\u003Cstrong>Professional Formatting\u003C/strong>: Consistent, polished appearance across platforms\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Strategic alignment and styling improve comprehension\u003C/li>\n\u003Cli>\u003Cstrong>Interactive Elements\u003C/strong>: Platform-specific features enable sorting and filtering\u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Tables that adapt to different screen sizes and contexts\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"basic-table-construction\">Basic Table Construction\u003C/h2>\n\u003Cp>Standard Markdown tables use pipe characters to separate columns:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Header 1 | Header 2 | Header 3 |\n|----------|----------|----------|\n| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |\n| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"simplified-table-syntax\">Simplified Table Syntax\u003C/h3>\n\u003Cp>For faster writing, outer pipes are optional:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">Header 1 | Header 2 | Header 3\n---------|----------|----------\nRow 1 Col 1 | Row 1 Col 2 | Row 1 Col 3\nRow 2 Col 1 | Row 2 Col 2 | Row 2 Col 3\n\u003C/code>\u003C/pre>\u003Ch3 id=\"column-alignment\">Column Alignment\u003C/h3>\n\u003Cp>Control text alignment using colons in the separator row:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Left Aligned | Center Aligned | Right Aligned |\n|:-------------|:--------------:|--------------:|\n| Default      | Centered       | Right-aligned |\n| Text         | Content        | Numbers       |\n| Alignment    | Here           | 123.45        |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-alignment-techniques\">Advanced Alignment Techniques\u003C/h2>\n\u003Ch3 id=\"mixed-alignment-patterns\">Mixed Alignment Patterns\u003C/h3>\n\u003Cp>Strategic alignment improves data readability:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Feature Name | Status | Priority | Estimated Hours | Completion |\n|:-------------|:------:|---------:|----------------:|-----------:|\n| User Login   | ✅ Done | High     | 8.5             | 100%       |\n| Dashboard    | 🔄 In Progress | Medium | 16.0   | 65%        |\n| Reports      | ⏳ Pending | Low      | 12.0            | 0%         |\n| Settings     | 📋 Planned | Medium   | 6.5             | 0%         |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"numeric-data-presentation\">Numeric Data Presentation\u003C/h3>\n\u003Cp>Right-align numeric columns for better comparison:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Quarter | Revenue | Growth Rate | Profit Margin |\n|:--------|--------:|------------:|--------------:|\n| Q1 2024 | $125,000 | 15.2% | 18.5% |\n| Q2 2024 | $142,300 | 13.8% | 19.1% |\n| Q3 2024 | $158,900 | 11.7% | 20.3% |\n| Q4 2024 | $171,200 | 7.7%  | 21.8% |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"complex-table-content\">Complex Table Content\u003C/h2>\n\u003Ch3 id=\"multi-line-cell-content\">Multi-line Cell Content\u003C/h3>\n\u003Cp>Handle longer content within table cells:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Configuration | Description | Example Value |\n|:--------------|:------------|:--------------|\n| Database URL  | Connection string for primary database | \u003Cspan class=\"hljs-code\">`postgresql://user:pass@localhost:5432/db`\u003C/span> |\n| Cache Settings | Redis configuration with timeout and memory limits | \u003Cspan class=\"hljs-code\">`redis://localhost:6379`\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span> Timeout: 300s \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span> Memory: 256MB |\n| API Endpoints | RESTful service endpoints for external integrations | \u003Cspan class=\"hljs-code\">`/api/v1/users`\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span> \u003Cspan class=\"hljs-code\">`/api/v1/orders`\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span> \u003Cspan class=\"hljs-code\">`/api/v1/reports`\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"code-blocks-in-tables\">Code Blocks in Tables\u003C/h3>\n\u003Cp>Include code examples within table cells:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Language | Basic Syntax | Example |\n|:---------|:-------------|:--------|\n| Python   | Variable assignment | \u003Cspan class=\"hljs-code\">`name = "John"`\u003C/span> |\n| JavaScript | Function declaration | \u003Cspan class=\"hljs-code\">`function hello() { return "Hi"; }`\u003C/span> |\n| SQL      | SELECT statement | \u003Cspan class=\"hljs-code\">`SELECT * FROM users WHERE active = 1`\u003C/span> |\n| CSS      | Style rule | \u003Cspan class=\"hljs-code\">`.header { background: #333; color: white; }`\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"lists-within-tables\">Lists Within Tables\u003C/h3>\n\u003Cp>Embed lists in table cells for structured content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Feature Category | Components | Status |\n|:-----------------|:-----------|:-------|\n| Authentication   | • User registration\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Login/logout\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Password reset | ✅ Complete |\n| User Management  | • Profile editing\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Account settings\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Preferences | 🔄 In Progress |\n| Data Visualization | • Charts and graphs\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Export functionality\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>>\u003C/span>\u003C/span>• Real-time updates | ⏳ Planned |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-enhancements\">Platform-Specific Enhancements\u003C/h2>\n\u003Ch3 id=\"github-table-features\">GitHub Table Features\u003C/h3>\n\u003Cp>GitHub provides enhanced table rendering with additional features:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Feature | Supported | Notes |\n|:--------|:---------:|:------|\n| Basic Tables | ✅ | Full GFM support |\n| Alignment | ✅ | Left, center, right |\n| HTML in cells | ✅ | Limited HTML tags |\n| Task lists | ✅ | \u003Cspan class=\"hljs-code\">`- [ ] Task item`\u003C/span> |\n| Emoji | ✅ | \u003Cspan class=\"hljs-code\">`:emoji_name:`\u003C/span> syntax |\n\u003C/code>\u003C/pre>\u003Ch4 id=\"github-issues-integration\">GitHub Issues Integration\u003C/h4>\n\u003Cp>Reference issues and pull requests within tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Issue | Type | Priority | Assignee | Status |\n|:------|:-----|:---------|:---------|:-------|\n| #123 | Bug | High | @developer1 | Open |\n| #124 | Feature | Medium | @developer2 | In Review |\n| #125 | Enhancement | Low | @developer1 | Closed |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-table-enhancements\">GitLab Table Enhancements\u003C/h3>\n\u003Cp>GitLab supports additional table formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Merge Request | Author | Approval Status | Pipeline |\n|:--------------|:-------|:----------------|:---------|\n| !45 | @team-lead | ✅ Approved | ✅ Passed |\n| !46 | @developer | ⏳ Pending | 🔄 Running |\n| !47 | @designer | ❌ Changes Requested | ❌ Failed |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-table-processing\">Jekyll Table Processing\u003C/h3>\n\u003Cp>Jekyll sites can enhance tables with Liquid templating:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\">| Feature | {% for env in site.environments %}{{ env }} | {% endfor %}\n|:--------|{% for env in site.environments %}:--------:|{% endfor %}\n{% for feature in site.data.features %}\n| {{ feature.name }} | {% for env in site.environments %}{% if feature.environments contains env %}✅{% else %}❌{% endif %} | {% endfor %}\n{% endfor %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"notion-table-features\">Notion Table Features\u003C/h3>\n\u003Cp>Notion combines Markdown with database functionality:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Property | Type | Formula |\n|:---------|:-----|:--------|\n| Task Name | Title | - |\n| Status | Select | - |\n| Due Date | Date | - |\n| Progress | Number | \u003Cspan class=\"hljs-code\">`prop("Completed Tasks") / prop("Total Tasks") * 100`\u003C/span> |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"html-enhancement-for-complex-tables\">HTML Enhancement for Complex Tables\u003C/h2>\n\u003Ch3 id=\"custom-styling-with-html\">Custom Styling with HTML\u003C/h3>\n\u003Cp>When Markdown limitations require more control:\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\">"enhanced-table"\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>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Feature\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\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Browser Support\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Notes\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\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Chrome\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>>\u003C/span>Firefox\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>>\u003C/span>Safari\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>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>CSS Grid\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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>>\u003C/span>Full support in modern versions\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\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Flexbox\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"supported"\u003C/span>>\u003C/span>✅\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>>\u003C/span>Excellent cross-browser support\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\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.enhanced-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\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.enhanced-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\">#ddd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.enhanced-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.supported\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-table-design\">Responsive Table Design\u003C/h3>\n\u003Cp>Create tables that adapt to mobile screens:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-responsive"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-table"\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>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Feature"\u003C/span>>\u003C/span>Feature\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Desktop"\u003C/span>>\u003C/span>Desktop\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Tablet"\u003C/span>>\u003C/span>Tablet\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Mobile"\u003C/span>>\u003C/span>Mobile\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>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Feature"\u003C/span>>\u003C/span>Navigation Menu\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Desktop"\u003C/span>>\u003C/span>Horizontal\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Tablet"\u003C/span>>\u003C/span>Collapsible\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Mobile"\u003C/span>>\u003C/span>Hamburger\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\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\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\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-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\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">float\u003C/span>: left;\n  }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-styling-techniques\">Advanced Styling Techniques\u003C/h2>\n\u003Ch3 id=\"css-table-styling\">CSS Table Styling\u003C/h3>\n\u003Cp>Professional table appearance with custom CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Modern table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-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\">25px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f3f4f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-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\">#f8f9ff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Zebra striping */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.striped\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-number\">#f9f9f9\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.striped\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)\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"status-indicators-and-icons\">Status Indicators and Icons\u003C/h3>\n\u003Cp>Visual enhancements for data representation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Task | Status | Priority | Owner |\n|:-----|:------:|:--------:|:------|\n| Database Migration | 🟢 Complete | 🔴 Critical | @dba-team |\n| API Development | 🟡 In Progress | 🟠 High | @backend-team |\n| UI Components | 🔵 Review | 🟢 Medium | @frontend-team |\n| Testing Suite | ⚪ Planned | 🟣 Low | @qa-team |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progress-bars-in-tables\">Progress Bars in Tables\u003C/h3>\n\u003Cp>Visual progress representation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\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\">th\u003C/span>>\u003C/span>Project\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>>\u003C/span>Progress\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>>\u003C/span>Completion\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\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Frontend Development\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>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-bar"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 75%"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \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>>\u003C/span>75%\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\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Backend API\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>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-bar"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 90%"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \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>>\u003C/span>90%\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\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.progress-bar\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progress\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#4CAF50\u003C/span>, \u003Cspan class=\"hljs-number\">#45a049\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"data-driven-table-generation\">Data-Driven Table Generation\u003C/h2>\n\u003Ch3 id=\"javascript-table-generation\">JavaScript Table Generation\u003C/h3>\n\u003Cp>Dynamic table creation from data:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">createMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">data, options = {}\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!data || data.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>;\n  \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>(data[\u003Cspan class=\"hljs-number\">0\u003C/span>]);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignment = options.\u003Cspan class=\"hljs-property\">alignment\u003C/span> || {};\n  \n  \u003Cspan class=\"hljs-comment\">// Create header row\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">let\u003C/span> table = \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\">' |\\n'\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">// Create separator row with alignment\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">let\u003C/span> separator = \u003Cspan class=\"hljs-string\">'|'\u003C/span>;\n  headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> align = alignment[header] || \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (align) {\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'center'\u003C/span>:\n        separator += \u003Cspan class=\"hljs-string\">':--------------:|'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>:\n        separator += \u003Cspan class=\"hljs-string\">'--------------:|'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n        separator += \u003Cspan class=\"hljs-string\">'---------------|'\u003C/span>;\n    }\n  });\n  table += separator + \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>;\n  \n  \u003Cspan class=\"hljs-comment\">// Create data rows\u003C/span>\n  data.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> values = headers.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> \n      row[header] || \u003Cspan class=\"hljs-string\">''\u003C/span>\n    );\n    table += \u003Cspan class=\"hljs-string\">'| '\u003C/span> + values.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |\\n'\u003C/span>;\n  });\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> table;\n}\n\n\u003Cspan class=\"hljs-comment\">// Example usage\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> projectData = [\n  { \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'Website Redesign'\u003C/span>, \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'Complete'\u003C/span>, \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'High'\u003C/span>, \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-string\">'100%'\u003C/span> },\n  { \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'Mobile App'\u003C/span>, \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'In Progress'\u003C/span>, \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'Medium'\u003C/span>, \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-string\">'65%'\u003C/span> },\n  { \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'API Documentation'\u003C/span>, \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'Planned'\u003C/span>, \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'Low'\u003C/span>, \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-string\">'0%'\u003C/span> }\n];\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> tableMarkdown = \u003Cspan class=\"hljs-title function_\">createMarkdownTable\u003C/span>(projectData, {\n  \u003Cspan class=\"hljs-attr\">alignment\u003C/span>: {\n    \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'center'\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>\n  }\n});\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(tableMarkdown);\n\u003C/code>\u003C/pre>\u003Ch3 id=\"python-table-processing\">Python Table Processing\u003C/h3>\n\u003Cp>Generate tables from structured data:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> pandas \u003Cspan class=\"hljs-keyword\">as\u003C/span> pd\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> tabulate \u003Cspan class=\"hljs-keyword\">import\u003C/span> tabulate\n\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">dataframe_to_markdown\u003C/span>(\u003Cspan class=\"hljs-params\">df, alignment=\u003Cspan class=\"hljs-literal\">None\u003C/span>\u003C/span>):\n    \u003Cspan class=\"hljs-string\">"""Convert pandas DataFrame to Markdown table format"""\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> alignment:\n        \u003Cspan class=\"hljs-comment\"># Apply column alignment\u003C/span>\n        aligned_df = df.copy()\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tabulate(aligned_df, headers=\u003Cspan class=\"hljs-string\">'keys'\u003C/span>, tablefmt=\u003Cspan class=\"hljs-string\">'pipe'\u003C/span>, \n                       colalign=alignment, showindex=\u003Cspan class=\"hljs-literal\">False\u003C/span>)\n    \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tabulate(df, headers=\u003Cspan class=\"hljs-string\">'keys'\u003C/span>, tablefmt=\u003Cspan class=\"hljs-string\">'pipe'\u003C/span>, showindex=\u003Cspan class=\"hljs-literal\">False\u003C/span>)\n\n\u003Cspan class=\"hljs-comment\"># Example usage\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> numpy \u003Cspan class=\"hljs-keyword\">as\u003C/span> np\n\n\u003Cspan class=\"hljs-comment\"># Sample data\u003C/span>\ndata = {\n    \u003Cspan class=\"hljs-string\">'Metric'\u003C/span>: [\u003Cspan class=\"hljs-string\">'Response Time'\u003C/span>, \u003Cspan class=\"hljs-string\">'Memory Usage'\u003C/span>, \u003Cspan class=\"hljs-string\">'CPU Usage'\u003C/span>, \u003Cspan class=\"hljs-string\">'Error Rate'\u003C/span>],\n    \u003Cspan class=\"hljs-string\">'Current'\u003C/span>: [\u003Cspan class=\"hljs-string\">'245ms'\u003C/span>, \u003Cspan class=\"hljs-string\">'512MB'\u003C/span>, \u003Cspan class=\"hljs-string\">'35%'\u003C/span>, \u003Cspan class=\"hljs-string\">'0.02%'\u003C/span>],\n    \u003Cspan class=\"hljs-string\">'Target'\u003C/span>: [\u003Cspan class=\"hljs-string\">'< 200ms'\u003C/span>, \u003Cspan class=\"hljs-string\">'< 256MB'\u003C/span>, \u003Cspan class=\"hljs-string\">'< 50%'\u003C/span>, \u003Cspan class=\"hljs-string\">'< 0.01%'\u003C/span>],\n    \u003Cspan class=\"hljs-string\">'Status'\u003C/span>: [\u003Cspan class=\"hljs-string\">'⚠️ Warning'\u003C/span>, \u003Cspan class=\"hljs-string\">'❌ Over'\u003C/span>, \u003Cspan class=\"hljs-string\">'✅ Good'\u003C/span>, \u003Cspan class=\"hljs-string\">'⚠️ Warning'\u003C/span>]\n}\n\ndf = pd.DataFrame(data)\nmarkdown_table = dataframe_to_markdown(df, \n    alignment=[\u003Cspan class=\"hljs-string\">'left'\u003C/span>, \u003Cspan class=\"hljs-string\">'right'\u003C/span>, \u003Cspan class=\"hljs-string\">'right'\u003C/span>, \u003Cspan class=\"hljs-string\">'center'\u003C/span>])\n\n\u003Cspan class=\"hljs-built_in\">print\u003C/span>(markdown_table)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"interactive-table-features\">Interactive Table Features\u003C/h2>\n\u003Ch3 id=\"sortable-tables-with-javascript\">Sortable Tables with JavaScript\u003C/h3>\n\u003Cp>Add sorting functionality to static tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">makeSortableTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableId\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(tableId);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n  \n  headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n    header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n    header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(table, index);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Add sort indicator\u003C/span>\n    header.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> += \u003Cspan class=\"hljs-string\">' <span class="sort-indicator">↕️</span>'\u003C/span>;\n  });\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(\u003Cspan class=\"hljs-params\">table, columnIndex\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n  \n  \u003Cspan class=\"hljs-comment\">// Determine sort direction\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentDirection = table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> || \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> newDirection = currentDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n  table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> = newDirection;\n  \n  rows.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> aValue = a.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> bValue = b.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Try to parse as numbers\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> aNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aValue.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^0-9.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> bNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bValue.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^0-9.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n    \n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(aNum) && !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(bNum)) {\n      comparison = aNum - bNum;\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      comparison = aValue.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bValue);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> newDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? comparison : -comparison;\n  });\n  \n  \u003Cspan class=\"hljs-comment\">// Re-append sorted rows\u003C/span>\n  rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n  \n  \u003Cspan class=\"hljs-comment\">// Update sort indicators\u003C/span>\n  table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th .sort-indicator'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">indicator, index\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index === columnIndex) {\n      indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = newDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'↑'\u003C/span> : \u003Cspan class=\"hljs-string\">'↓'\u003C/span>;\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'↕️'\u003C/span>;\n    }\n  });\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"filterable-tables\">Filterable Tables\u003C/h3>\n\u003Cp>Add search and filter capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">addTableFilter\u003C/span>(\u003Cspan class=\"hljs-params\">tableId, filterId\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(tableId);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> filter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(filterId);\n  \n  filter.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n    \n    rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = row.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterValue);\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = matches ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Update visible row count\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr:not([style*="display: none"])'\u003C/span>);\n    \u003Cspan class=\"hljs-title function_\">updateRowCount\u003C/span>(visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span>, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n  });\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">updateRowCount\u003C/span>(\u003Cspan class=\"hljs-params\">visible, total\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">let\u003C/span> counter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-counter'\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!counter) {\n    counter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    counter.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-counter'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>).\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(counter, \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>));\n  }\n  counter.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visible}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows`\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-optimization\">Performance Optimization\u003C/h2>\n\u003Ch3 id=\"large-table-handling\">Large Table Handling\u003C/h3>\n\u003Cp>Techniques for managing large datasets:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Pagination approach -->\n\u003Cspan class=\"hljs-section\">## Project Status (Page 1 of 5)\u003C/span>\n\n| Project | Status | Owner | Due Date |\n|:--------|:-------|:------|:---------|\n| Alpha Release | In Progress | Team A | 2025-09-01 |\n| Beta Testing | Planned | Team B | 2025-09-15 |\n| Documentation | In Progress | Team C | 2025-08-30 |\n\n\u003Cspan class=\"hljs-strong\">**Navigation**\u003C/span>: [\u003Cspan class=\"hljs-string\">Previous\u003C/span>](\u003Cspan class=\"hljs-link\">#\u003C/span>) | \u003Cspan class=\"hljs-strong\">**1**\u003C/span> | [\u003Cspan class=\"hljs-string\">2\u003C/span>](\u003Cspan class=\"hljs-link\">#page2\u003C/span>) | [\u003Cspan class=\"hljs-string\">3\u003C/span>](\u003Cspan class=\"hljs-link\">#page3\u003C/span>) | [\u003Cspan class=\"hljs-string\">4\u003C/span>](\u003Cspan class=\"hljs-link\">#page4\u003C/span>) | [\u003Cspan class=\"hljs-string\">5\u003C/span>](\u003Cspan class=\"hljs-link\">#page5\u003C/span>) | [\u003Cspan class=\"hljs-string\">Next\u003C/span>](\u003Cspan class=\"hljs-link\">#page2\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch3 id=\"virtual-scrolling-for-large-tables\">Virtual Scrolling for Large Tables\u003C/h3>\n\u003Cp>JavaScript implementation for performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTable\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, data, rowHeight = \u003Cspan class=\"hljs-number\">40\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = container;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = data;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span> = rowHeight;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(container.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span> / rowHeight);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupScrolling\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">render\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n    table.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Create header\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> thead = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n    \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>]).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">key\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> th = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n      th.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = key;\n      headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(th);\n    });\n    thead.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerRow);\n    table.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(thead);\n    \n    \u003Cspan class=\"hljs-comment\">// Create tbody for visible rows\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n    table.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVisibleRows\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>,\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n    );\n    \n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>; i < endIndex; i++) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> tr = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n      \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>[i]).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">value\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> td = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        td.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = value;\n        tr.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(td);\n      });\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tr);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> newStartIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>\n      );\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newStartIndex !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = newStartIndex;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVisibleRows\u003C/span>();\n      }\n    });\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-screen-readers\">Accessibility and Screen Readers\u003C/h2>\n\u003Ch3 id=\"semantic-table-markup\">Semantic Table Markup\u003C/h3>\n\u003Cp>Ensure proper accessibility:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">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\">"Project status overview"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>Current project status and assignments\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> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"project"\u003C/span>>\u003C/span>Project Name\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\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>Status\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\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"owner"\u003C/span>>\u003C/span>Owner\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\">td\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"cell"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"project"\u003C/span>>\u003C/span>Website Redesign\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>In Progress\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"owner"\u003C/span>>\u003C/span>Design Team\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=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Screen reader friendly table styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">caption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">10000px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">caption\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: static;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-tag\">th\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;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Advanced tables work excellently alongside other Markdown documentation features. When creating comprehensive technical documentation, combine tables with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting\u003C/a> to present code examples and configuration data clearly.\u003C/p>\n\u003Cp>For project documentation requiring both tabular data and task tracking, tables complement \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> by providing detailed status overviews alongside actionable task items.\u003C/p>\n\u003Cp>When documenting complex procedures that include both structured data and step-by-step instructions, consider combining tables with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to organize detailed reference tables into manageable, expandable sections.\u003C/p>\n\u003Cp>If you're working with tables from spreadsheets, the \u003Ca href=\"/tools/sheets-to-markdown\">Google Sheets → Markdown\u003C/a> and \u003Ca href=\"/tools/excel-to-markdown\">Excel → Markdown\u003C/a> converters let you paste or upload tabular data and get properly formatted Markdown tables instantly. For cleaning up misaligned or hand-written tables, the \u003Ca href=\"/tools/markdown-table-formatter\">Markdown Table Formatter\u003C/a> normalizes spacing and column alignment automatically.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"column-alignment-problems\">Column Alignment Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Table columns don't align correctly across platforms\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Ensure consistent separator formatting -->\n| Header 1 | Header 2 | Header 3 |\n|:---------|:--------:|---------:|\n<!-- All separators should have same base length -->\n\n<!-- Use explicit alignment indicators -->\n| Left     | Center   | Right    |\n|:---------|:--------:|---------:|\n| Text     | Content  | Numbers  |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"content-overflow-issues\">Content Overflow Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Long content breaks table layout\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Use word wrapping for long content\u003C/li>\n\u003Cli>Abbreviate with ellipsis for very long strings  \u003C/li>\n\u003Cli>Break long URLs with \u003Ccode><wbr>\u003C/code> tags\u003C/li>\n\u003Cli>Use responsive design for mobile compatibility\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| URL | Description |\n|:----|:------------|\n| \u003Cspan class=\"hljs-code\">`https://very-long-<wbr>domain-name.com/api/v1/endpoint`\u003C/span> | API endpoint with word break |\n| \u003Cspan class=\"hljs-code\">`https://example.com/...`\u003C/span> | Abbreviated URL |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"markdown-parser-compatibility\">Markdown Parser Compatibility\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables render differently across platforms\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Test tables on target platforms\u003C/li>\n\u003Cli>Use standard GFM syntax for maximum compatibility\u003C/li>\n\u003Cli>Avoid platform-specific extensions\u003C/li>\n\u003Cli>Provide HTML fallbacks for complex layouts\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"best-practices-for-professional-tables\">Best Practices for Professional Tables\u003C/h2>\n\u003Ch3 id=\"data-organization-strategies\">Data Organization Strategies\u003C/h3>\n\u003Col>\n\u003Cli>\u003Cstrong>Logical Column Order\u003C/strong>: Place most important data in leftmost columns\u003C/li>\n\u003Cli>\u003Cstrong>Consistent Formatting\u003C/strong>: Use uniform date formats, number formats, and units\u003C/li>\n\u003Cli>\u003Cstrong>Clear Headers\u003C/strong>: Use descriptive, unambiguous column headers\u003C/li>\n\u003Cli>\u003Cstrong>Appropriate Alignment\u003C/strong>: Numbers right-aligned, text left-aligned, status centered\u003C/li>\n\u003C/ol>\n\u003Ch3 id=\"performance-and-usability\">Performance and Usability\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\">### Table Design Checklist\u003C/span>\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Headers are descriptive and clear\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Numeric columns are right-aligned\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Status indicators use consistent symbols\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Table width accommodates all content\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Mobile-friendly responsive design\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Accessible markup for screen readers\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Fast loading for large datasets\n\u003C/code>\u003C/pre>\u003Ch3 id=\"maintenance-and-updates\">Maintenance and Updates\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- Version control friendly table format -->\n| Feature | Status | Updated |\n|:--------|:-------|:--------|\n| Authentication | Complete | 2025-08-20 |\n| Dashboard | In Progress | 2025-08-22 |\n| Reports | Planned | - |\n\n<!-- Keep consistent row order for diff clarity -->\n<!-- Use ISO date format for sorting -->\n<!-- Document table structure in comments -->\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-and-content-strategy-benefits\">SEO and Content Strategy Benefits\u003C/h2>\n\u003Ch3 id=\"structured-data-benefits\">Structured Data Benefits\u003C/h3>\n\u003Cp>Well-formatted tables provide SEO advantages through:\u003C/p>\n\u003Cul>\n\u003Cli>Enhanced content structure and readability\u003C/li>\n\u003Cli>Rich snippets potential for search results\u003C/li>\n\u003Cli>Improved user engagement metrics\u003C/li>\n\u003Cli>Better content indexing by search engines\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"schemaorg-integration\">Schema.org Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced table markup for search engines -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/Table"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"about"\u003C/span>>\u003C/span>Software feature comparison\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>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Feature\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\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Basic Plan\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\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Pro Plan\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\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/TableRow"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Storage\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\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"value"\u003C/span>>\u003C/span>10GB\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\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"value"\u003C/span>>\u003C/span>100GB\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>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown tables transform simple data presentation into professional, interactive, and accessible content that enhances documentation quality and user experience. Whether you're creating technical specifications, project reports, or data dashboards, mastering these advanced table techniques enables sophisticated information architecture.\u003C/p>\n\u003Cp>The key to effective table implementation lies in understanding your platform's capabilities, choosing appropriate formatting for your data types, and maintaining consistency across your documentation. By implementing the techniques covered in this guide, you can create tables that not only present information clearly but also enhance the overall professionalism and usability of your content.\u003C/p>\n\u003Cp>Remember to test table rendering across your target platforms, optimize for accessibility and performance, and maintain consistent formatting standards throughout your documentation. With proper attention to these details, your Markdown tables will become powerful tools for clear, organized, and professional data presentation.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52,55,58,61],{"id":16,"text":17,"level":18},"why-use-advanced-markdown-tables","Why Use Advanced Markdown Tables?",2,{"id":20,"text":21,"level":18},"basic-table-construction","Basic Table Construction",{"id":23,"text":24,"level":18},"advanced-alignment-techniques","Advanced Alignment Techniques",{"id":26,"text":27,"level":18},"complex-table-content","Complex Table Content",{"id":29,"text":30,"level":18},"platform-specific-enhancements","Platform-Specific Enhancements",{"id":32,"text":33,"level":18},"html-enhancement-for-complex-tables","HTML Enhancement for Complex Tables",{"id":35,"text":36,"level":18},"advanced-styling-techniques","Advanced Styling Techniques",{"id":38,"text":39,"level":18},"data-driven-table-generation","Data-Driven Table Generation",{"id":41,"text":42,"level":18},"interactive-table-features","Interactive Table Features",{"id":44,"text":45,"level":18},"performance-optimization","Performance Optimization",{"id":47,"text":48,"level":18},"accessibility-and-screen-readers","Accessibility and Screen Readers",{"id":50,"text":51,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":53,"text":54,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":56,"text":57,"level":18},"best-practices-for-professional-tables","Best Practices for Professional Tables",{"id":59,"text":60,"level":18},"seo-and-content-strategy-benefits","SEO and Content Strategy Benefits",{"id":62,"text":63,"level":18},"conclusion","Conclusion",[65,66,67],"sheets-to-markdown","excel-to-markdown","markdown-table-formatter",[69,77,85],{"slug":70,"title":71,"description":72,"excerpt":73,"date":74,"category":9,"author":10,"keywords":75,"readingMinutes":76},"markdown-data-tables-styling-complete-guide","Markdown Data Tables Styling and Formatting: Complete Guide for Professional Documentation","Master advanced Markdown table styling techniques, responsive design, data formatting, and professional presentation. Learn platform-specific features, accessibility best practices, and integration patterns for technical documentation.","Advanced Markdown table styling and data formatting techniques enable the creation of professional, accessible, and visually compelling data presentations that enhance technical documentation and…","2025-10-24","markdown tables styling, responsive markdown tables, table formatting markdown, data tables markdown, professional markdown tables, table design documentation, markdown table accessibility",14,{"slug":78,"title":79,"description":80,"excerpt":81,"date":82,"category":9,"author":10,"keywords":83,"readingMinutes":84},"markdown-text-decoration-combinations-complete-guide","Markdown Text Decoration Combinations: Complete Guide for Advanced Formatting and Cross-Platform Styling","Master advanced Markdown text decoration combinations including strikethrough, underline, and mixed formatting techniques. Learn platform-specific implementations, accessibility considerations, and best practices for complex text styling.","Advanced Markdown text decoration combinations enable sophisticated document formatting that goes beyond basic emphasis, allowing technical writers and content creators to develop nuanced visual…","2025-11-27","markdown text decoration, markdown strikethrough combinations, advanced markdown formatting, markdown text styling, cross-platform markdown, markdown accessibility formatting, text decoration markdown",10,{"slug":86,"title":87,"description":88,"excerpt":89,"date":90,"category":9,"author":10,"keywords":91,"readingMinutes":92},"markdown-blockquotes-advanced-styling-complete-guide","Markdown Blockquotes: Advanced Styling and Professional Implementation Guide for Enhanced Content Presentation","Master advanced blockquote techniques in Markdown for professional content presentation. Learn CSS styling, nested quotes, platform-specific implementations, and accessibility best practices for compelling visual content.","Blockquotes in Markdown provide powerful tools for highlighting important content, presenting testimonials, showcasing citations, and creating visually distinct content sections that enhance…","2025-09-16","markdown blockquotes, markdown quotes, blockquote styling, nested blockquotes, css blockquotes, markdown citation formatting, professional markdown quotes, blockquote accessibility",19,1792184941018]