[{"data":1,"prerenderedAt":70},["Reactive",2],{"blog-post-markdown-data-tables-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":46,"related":47},"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","Tutorial","Matthew Rathbone","markdown tables styling, responsive markdown tables, table formatting markdown, data tables markdown, professional markdown tables, table design documentation, markdown table accessibility",14,"\u003Cp>Advanced Markdown table styling and data formatting techniques enable the creation of professional, accessible, and visually compelling data presentations that enhance technical documentation and improve reader comprehension. By mastering responsive table design, proper data formatting conventions, and platform-specific styling capabilities, technical writers can transform basic Markdown tables into sophisticated data visualization tools that maintain readability across all devices and platforms.\u003C/p>\n\u003Ch2 id=\"why-master-advanced-table-styling\">Why Master Advanced Table Styling?\u003C/h2>\n\u003Cp>Professional table styling provides essential benefits for technical documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Properly styled tables improve data comprehension and reduce cognitive load\u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Tables that adapt gracefully to different screen sizes and devices\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Polished presentation that reflects attention to detail and quality\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Tables that work effectively with screen readers and assistive technologies\u003C/li>\n\u003Cli>\u003Cstrong>Data Hierarchy\u003C/strong>: Visual emphasis that guides readers through complex information structures\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-table-styling-concepts\">Foundation Table Styling Concepts\u003C/h2>\n\u003Ch3 id=\"basic-markdown-table-structure\">Basic Markdown Table Structure\u003C/h3>\n\u003Cp>Understanding the fundamental structure before applying advanced styling:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Markdown Table Structure\u003C/span>\n\n| Header 1 | Header 2 | Header 3 |\n|----------|----------|----------|\n| Cell 1   | Cell 2   | Cell 3   |\n| Cell 4   | Cell 5   | Cell 6   |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-integration-for-enhanced-styling\">CSS Integration for Enhanced Styling\u003C/h3>\n\u003Cp>Transforming basic tables with custom CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Professional table base styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">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-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\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\">2px\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-comment\">/* Header styling */\u003C/span>\n\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    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\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.5px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4a5568\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Body styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n}\n\n\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\">#f7fafc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">1px\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\">12px\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.05\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span> \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternating row colors */\u003C/span>\n\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\">#f8f9fa\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-table-framework\">Responsive Table Framework\u003C/h3>\n\u003Cp>Creating tables that work across all device sizes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive table container */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\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\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\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}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-first responsive approach */\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\">.responsive-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\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-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> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Stack table on very small screens */\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\">tbody\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\">#e2e8f0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\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    }\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>: left;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">120px\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\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">110px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#4a5568\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-styling-techniques\">Advanced Styling Techniques\u003C/h2>\n\u003Ch3 id=\"data-type-formatting\">Data Type Formatting\u003C/h3>\n\u003Cp>Specialized styling for different data types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Financial Data Table Example\u003C/span>\n\n| Metric | Q1 2024 | Q2 2024 | Q3 2024 | Growth |\n|--------|---------|---------|---------|--------|\n| Revenue | $125.4K | $142.8K | $158.9K | +26.7% |\n| Expenses | $89.2K | $94.1K | $101.3K | +13.6% |\n| Profit | $36.2K | $48.7K | $57.6K | +59.1% |\n| Margin | 28.9% | 34.1% | 36.2% | +7.3pp |\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Numeric data styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.financial-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.currency\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'JetBrains Mono'\u003C/span>, monospace;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.financial-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.percentage\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#2d3748\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.financial-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.positive\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#38a169\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">56\u003C/span>, \u003Cspan class=\"hljs-number\">161\u003C/span>, \u003Cspan class=\"hljs-number\">105\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.financial-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-class\">.negative\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#e53e3e\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">229\u003C/span>, \u003Cspan class=\"hljs-number\">62\u003C/span>, \u003Cspan class=\"hljs-number\">62\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-approved\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\">#48bb78\u003C/span>, \u003Cspan class=\"hljs-number\">#38a169\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-pending\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\">#ed8936\u003C/span>, \u003Cspan class=\"hljs-number\">#dd6b20\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-rejected\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\">#f56565\u003C/span>, \u003Cspan class=\"hljs-number\">#e53e3e\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">80px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-table-features\">Interactive Table Features\u003C/h3>\n\u003Cp>Adding sorting, filtering, and search capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced table with interactive features -->\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\">"interactive-table-container"\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\">"table-controls"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-search"\u003C/span> \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search table..."\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"column-filter"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-select"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>Filter by column...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>Column 1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"1"\u003C/span>>\u003C/span>Column 2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Column 3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\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\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>\n                    Project Name\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                \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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"1"\u003C/span>>\u003C/span>\n                    Status\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                \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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\n                    Completion\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                \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\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\n                    Due Date\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                \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\">"Project Name"\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-approved"\u003C/span>>\u003C/span>Completed\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Completion"\u003C/span>>\u003C/span>100%\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\">"Due Date"\u003C/span>>\u003C/span>2025-10-20\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> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Project Name"\u003C/span>>\u003C/span>API 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> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-pending"\u003C/span>>\u003C/span>In Progress\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Completion"\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\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Due Date"\u003C/span>>\u003C/span>2025-11-15\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> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Project Name"\u003C/span>>\u003C/span>Mobile App\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\">"Status"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-pending"\u003C/span>>\u003C/span>Planning\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\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\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Completion"\u003C/span>>\u003C/span>25%\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\">"Due Date"\u003C/span>>\u003C/span>2025-12-30\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\u003C/code>\u003C/pre>\u003Ch3 id=\"specialized-table-layouts\">Specialized Table Layouts\u003C/h3>\n\u003Cp>Creating tables for specific use cases:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Comparison Table Layout\u003C/span>\n\n| Feature | Basic Plan | Pro Plan | Enterprise |\n|---------|------------|----------|------------|\n| \u003Cspan class=\"hljs-strong\">**Storage**\u003C/span> | 10 GB | 100 GB | 1 TB |\n| \u003Cspan class=\"hljs-strong\">**Users**\u003C/span> | 1 | 10 | Unlimited |\n| \u003Cspan class=\"hljs-strong\">**API Calls**\u003C/span> | 1,000/month | 10,000/month | Unlimited |\n| \u003Cspan class=\"hljs-strong\">**Support**\u003C/span> | Email | Priority | Dedicated |\n| \u003Cspan class=\"hljs-strong\">**Price**\u003C/span> | Free | $29/month | Custom |\n| | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"plan-btn basic"\u003C/span>>\u003C/span>\u003C/span>Select\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"plan-btn pro"\u003C/span>>\u003C/span>\u003C/span>Select\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span> | \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"plan-btn enterprise"\u003C/span>>\u003C/span>\u003C/span>Contact\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\u003C/span> |\n\n\u003Cspan class=\"hljs-section\"># Technical Specification Table\u003C/span>\n\n| Component | Specification | Performance | Notes |\n|-----------|---------------|-------------|--------|\n| \u003Cspan class=\"hljs-strong\">**CPU**\u003C/span> | Intel i7-12700K | 3.6 GHz base, 5.0 GHz boost | 12 cores, 20 threads |\n| \u003Cspan class=\"hljs-strong\">**Memory**\u003C/span> | 32 GB DDR5-4800 | 4800 MT/s | ECC supported |\n| \u003Cspan class=\"hljs-strong\">**Storage**\u003C/span> | 1 TB NVMe SSD | 7,000 MB/s read | PCIe 4.0 interface |\n| \u003Cspan class=\"hljs-strong\">**GPU**\u003C/span> | NVIDIA RTX 4080 | 16 GB VRAM | DLSS 3 compatible |\n\n\u003Cspan class=\"hljs-section\"># Documentation Change Log\u003C/span>\n\n| Version | Date | Changes | Author |\n|---------|------|---------|---------|\n| 2.1.0 | 2025-10-24 | Added responsive table features | Technical Writing Team |\n| 2.0.5 | 2025-10-20 | Fixed mobile layout issues | @john.doe |\n| 2.0.4 | 2025-10-18 | Updated accessibility attributes | @sarah.smith |\n| 2.0.3 | 2025-10-15 | Performance optimizations | @mike.johnson |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-implementation\">Platform-Specific Implementation\u003C/h2>\n\u003Ch3 id=\"github-flavored-markdown-tables\">GitHub Flavored Markdown Tables\u003C/h3>\n\u003Cp>Optimizing tables for GitHub repositories and documentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># GitHub Repository Statistics\u003C/span>\n\n| Repository | Stars | Forks | Issues | Last Updated |\n|------------|-------|-------|--------|--------------|\n| [\u003Cspan class=\"hljs-string\">awesome-markdown\u003C/span>](\u003Cspan class=\"hljs-link\">https://github.com/example/awesome-markdown\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Stars\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/stars/example/awesome-markdown\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Forks\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/forks/example/awesome-markdown\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Issues\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/issues/example/awesome-markdown\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Last Commit\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/last-commit/example/awesome-markdown\u003C/span>) |\n| [\u003Cspan class=\"hljs-string\">markdown-parser\u003C/span>](\u003Cspan class=\"hljs-link\">https://github.com/example/markdown-parser\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Stars\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/stars/example/markdown-parser\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Forks\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/forks/example/markdown-parser\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Issues\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/issues/example/markdown-parser\u003C/span>) | ![\u003Cspan class=\"hljs-string\">Last Commit\u003C/span>](\u003Cspan class=\"hljs-link\">https://img.shields.io/github/last-commit/example/markdown-parser\u003C/span>) |\n\n\u003Cspan class=\"hljs-section\"># API Endpoint Documentation\u003C/span>\n\n| Method | Endpoint | Parameters | Response | Status |\n|--------|----------|------------|----------|--------|\n| \u003Cspan class=\"hljs-code\">`GET`\u003C/span> | \u003Cspan class=\"hljs-code\">`/api/users`\u003C/span> | \u003Cspan class=\"hljs-code\">`?page=1&limit=20`\u003C/span> | \u003Cspan class=\"hljs-code\">`{ users: [...] }`\u003C/span> | ✅ Active |\n| \u003Cspan class=\"hljs-code\">`POST`\u003C/span> | \u003Cspan class=\"hljs-code\">`/api/users`\u003C/span> | \u003Cspan class=\"hljs-code\">`{ name, email, ... }`\u003C/span> | \u003Cspan class=\"hljs-code\">`{ user: {...} }`\u003C/span> | ✅ Active |\n| \u003Cspan class=\"hljs-code\">`PUT`\u003C/span> | \u003Cspan class=\"hljs-code\">`/api/users/:id`\u003C/span> | \u003Cspan class=\"hljs-code\">`{ name?, email?, ... }`\u003C/span> | \u003Cspan class=\"hljs-code\">`{ user: {...} }`\u003C/span> | ✅ Active |\n| \u003Cspan class=\"hljs-code\">`DELETE`\u003C/span> | \u003Cspan class=\"hljs-code\">`/api/users/:id`\u003C/span> | None | \u003Cspan class=\"hljs-code\">`{ success: true }`\u003C/span> | ⚠️ Deprecated |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-table-processing\">Jekyll Table Processing\u003C/h3>\n\u003Cp>Enhanced Jekyll integration with Liquid templating:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/responsive-table.html -->\n<div class="table-container">\n    <table class="responsive-table {{ include.class }}">\n        {% if include.data %}\n            <thead>\n                <tr>\n                    {% for header in include.data.headers %}\n                        <th>{{ header }}</th>\n                    {% endfor %}\n                </tr>\n            </thead>\n            <tbody>\n                {% for row in include.data.rows %}\n                    <tr>\n                        {% for cell in row %}\n                            <td data-label="{{ include.data.headers[forloop.index0] }}">\n                                {{ cell }}\n                            </td>\n                        {% endfor %}\n                    </tr>\n                {% endfor %}\n            </tbody>\n        {% endif %}\n    </table>\n</div>\n\n<!-- Usage in markdown -->\n{% assign project_data = site.data.projects %}\n{% include responsive-table.html data=project_data class="project-table" %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-table-shortcodes\">Hugo Table Shortcodes\u003C/h3>\n\u003Cp>Custom Hugo shortcodes for advanced table functionality:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\"><!-- layouts/shortcodes/data-table.html -->\n{{ $data := .Get \u003Cspan class=\"hljs-string\">"data"\u003C/span> }}\n{{ $class := .Get \u003Cspan class=\"hljs-string\">"class"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"default-table"\u003C/span> }}\n{{ $responsive := .Get \u003Cspan class=\"hljs-string\">"responsive"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span> }}\n\n{{ with $data }}\n    {{ $tableData := index $.Site.Data . }}\n    \n    <div class=\u003Cspan class=\"hljs-string\">"table-container {{ if $responsive }}responsive{{ end }}"\u003C/span>>\n        <table class=\u003Cspan class=\"hljs-string\">"{{ $class }}"\u003C/span>>\n            <thead>\n                <tr>\n                    {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $tableData.headers }}\n                        <th>{{ . }}</th>\n                    {{ end }}\n                </tr>\n            </thead>\n            <tbody>\n                {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $tableData.rows }}\n                    <tr>\n                        {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> . }}\n                            <td>{{ . | markdownify }}</td>\n                        {{ end }}\n                    </tr>\n                {{ end }}\n            </tbody>\n        </table>\n    </div>\n{{ end }}\n\n<!-- Advanced sortable table shortcode -->\n<!-- layouts/shortcodes/sortable-table.html -->\n{{ $id := .Get \u003Cspan class=\"hljs-string\">"id"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> (printf \u003Cspan class=\"hljs-string\">"table-%d"\u003C/span> (now.Unix)) }}\n{{ $data := .Get \u003Cspan class=\"hljs-string\">"data"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"sortable-table-container"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $id }}"\u003C/span>>\n    <table class=\u003Cspan class=\"hljs-string\">"sortable-table"\u003C/span>>\n        <!-- Table content with data attributes \u003Cspan class=\"hljs-keyword\">for\u003C/span> sorting -->\n    </table>\n</div>\n\n<script>\ndocument.addEventListener(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, function() {\n    initSortableTable(\u003Cspan class=\"hljs-string\">'{{ $id }}'\u003C/span>);\n});\n</script>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-semantic-html\">Accessibility and Semantic HTML\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cp>Creating tables that work effectively with assistive technologies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible table markup -->\u003C/span>\n\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 dashboard"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"visually-hidden"\u003C/span>>\u003C/span>\n        Current project status showing 3 active projects with completion percentages\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n    \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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\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> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>Team Lead\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    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>Website Redesign\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-badge approved"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status: Completed"\u003C/span>>\u003C/span>\n                    Completed\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\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>\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> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"progressbar"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuenow\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuemin\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuemax\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"100% complete"\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-fill"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%"\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>Sarah Johnson\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=\"keyboard-navigation-support\">Keyboard Navigation Support\u003C/h3>\n\u003Cp>Implementing keyboard accessibility for interactive tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Focus indicators for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> select\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4299e1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\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\">3px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">66\u003C/span>, \u003Cspan class=\"hljs-number\">153\u003C/span>, \u003Cspan class=\"hljs-number\">225\u003C/span>, \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced focus for table rows */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ebf8ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4299e1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Skip links for screen readers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-to-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-to-table\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-table-automation\">Advanced Table Automation\u003C/h2>\n\u003Ch3 id=\"data-driven-table-generation\">Data-Driven Table Generation\u003C/h3>\n\u003Cp>Automatic table creation from structured data:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-generator.js - Dynamic table creation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedTableGenerator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, options = {}\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\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">searchable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">pagination\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">itemsPerPage\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'generated-table'\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortColumn\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\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\">filteredData\u003C/span> = [...data];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\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_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTable\u003C/span>();\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        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchable\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createSearchInput\u003C/span>());\n        }\n        \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-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pagination\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createPagination\u003C/span>());\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">attachEventListeners\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTable\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n        table.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">responsive\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            wrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-container responsive'\u003C/span>;\n            wrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> wrapper;\n        }\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        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\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, index\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> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatHeader\u003C/span>(key);\n                th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'col'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">sortable\u003C/span>) {\n                    th.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sortable'\u003C/span>;\n                    th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-column'\u003C/span>, key);\n                    th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n                    th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'columnheader'\u003C/span>);\n                    th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-sort'\u003C/span>, \u003Cspan class=\"hljs-string\">'none'\u003C/span>);\n                    \n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortIndicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n                    sortIndicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sort-indicator'\u003C/span>;\n                    th.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(sortIndicator);\n                }\n                \n                headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(th);\n            });\n        }\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 body\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\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> 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            tr.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'row'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, 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-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatHeader\u003C/span>(key));\n                td.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatCellValue\u003C/span>(key, value);\n                tr.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(td);\n            });\n            \n            tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tr);\n        });\n        \n        table.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tbody);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> table;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createSearchInput\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table...'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-input'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Search table content'\u003C/span>);\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> searchContainer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatHeader\u003C/span>(\u003Cspan class=\"hljs-params\">key\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> key.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/(?=[A-Z])/\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>)\n                  .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^./\u003C/span>, \u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">str\u003C/span> =>\u003C/span> str.\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatCellValue\u003C/span>(\u003Cspan class=\"hljs-params\">key, value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Custom formatting based on data type or column name\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'currency'\u003C/span>) || key.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'price'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Intl\u003C/span>.\u003Cspan class=\"hljs-title class_\">NumberFormat\u003C/span>(\u003Cspan class=\"hljs-string\">'en-US'\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">style\u003C/span>: \u003Cspan class=\"hljs-string\">'currency'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">currency\u003C/span>: \u003Cspan class=\"hljs-string\">'USD'\u003C/span>\n                }).\u003Cspan class=\"hljs-title function_\">format\u003C/span>(value);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (key.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'percentage'\u003C/span>)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${(value * \u003Cspan class=\"hljs-number\">100\u003C/span>).toFixed(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>%`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">toLocaleString\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> value === \u003Cspan class=\"hljs-string\">'string'\u003C/span> && value.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/^\\d{4}-\\d{2}-\\d{2}/\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLocaleDateString\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">attachEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Sorting functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">sortable\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th.sortable'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> {\n                th.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortBy\u003C/span>(th.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>));\n                th.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> || e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortBy\u003C/span>(th.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>);\n                    }\n                });\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Search functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchable\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-search-input'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (searchInput) {\n                searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">search\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>));\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortBy\u003C/span>(\u003Cspan class=\"hljs-params\">column\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortColumn\u003C/span> === column) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortColumn\u003C/span> = column;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\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\">let\u003C/span> aVal = a[column];\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> bVal = b[column];\n            \n            \u003Cspan class=\"hljs-comment\">// Handle different data types\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> aVal === \u003Cspan class=\"hljs-string\">'number'\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> bVal === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? aVal - bVal : bVal - aVal;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// String comparison\u003C/span>\n            aVal = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(aVal).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            bVal = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(bVal).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> aVal.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bVal);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> bVal.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(aVal);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">search\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>];\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchTerm = query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span>\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">value\u003C/span> =>\u003C/span>\n                    \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(searchTerm)\n                )\n            );\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">render\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSortIndicators\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_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th.sortable'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> {\n            th.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-sort'\u003C/span>, \u003Cspan class=\"hljs-string\">'none'\u003C/span>);\n            th.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'sort-asc'\u003C/span>, \u003Cspan class=\"hljs-string\">'sort-desc'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentTh = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`th[data-column="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.sortColumn}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentTh) {\n            currentTh.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-sort'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span>);\n            currentTh.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`sort-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.sortDirection}\u003C/span>`\u003C/span>);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'advanced-table'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableGenerator = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedTableGenerator\u003C/span>(tableContainer, {\n        \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">searchable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'professional-table'\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Sample data\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> projectData = [\n        {\n            \u003Cspan class=\"hljs-attr\">projectName\u003C/span>: \u003Cspan class=\"hljs-string\">'Website Redesign'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'Completed'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-number\">1.0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">teamLead\u003C/span>: \u003Cspan class=\"hljs-string\">'Sarah Johnson'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">dueDate\u003C/span>: \u003Cspan class=\"hljs-string\">'2025-10-20'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">budget\u003C/span>: \u003Cspan class=\"hljs-number\">15000\u003C/span>\n        },\n        {\n            \u003Cspan class=\"hljs-attr\">projectName\u003C/span>: \u003Cspan class=\"hljs-string\">'API Development'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'In Progress'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-number\">0.75\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">teamLead\u003C/span>: \u003Cspan class=\"hljs-string\">'Mike Chen'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">dueDate\u003C/span>: \u003Cspan class=\"hljs-string\">'2025-11-15'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">budget\u003C/span>: \u003Cspan class=\"hljs-number\">25000\u003C/span>\n        },\n        {\n            \u003Cspan class=\"hljs-attr\">projectName\u003C/span>: \u003Cspan class=\"hljs-string\">'Mobile App'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'Planning'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-number\">0.25\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">teamLead\u003C/span>: \u003Cspan class=\"hljs-string\">'Lisa Rodriguez'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">dueDate\u003C/span>: \u003Cspan class=\"hljs-string\">'2025-12-30'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">budget\u003C/span>: \u003Cspan class=\"hljs-number\">45000\u003C/span>\n        }\n    ];\n    \n    tableGenerator.\u003Cspan class=\"hljs-title function_\">setData\u003C/span>(projectData);\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced table styling integrates seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-form-creation-input-validation-complete-guide\">form creation and validation systems\u003C/a>, styled tables can present form field specifications, validation rules, and user input examples in professionally formatted layouts that enhance technical documentation quality.\u003C/p>\n\u003Cp>For sophisticated content management, table styling works effectively with \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation systems\u003C/a> to create offline-capable data presentations that maintain formatting and functionality even without internet connectivity, ensuring consistent user experiences across all access scenarios.\u003C/p>\n\u003Cp>When building comprehensive documentation architectures, professional table styling complements \u003Ca href=\"/blog/markdown-link-management-cross-referencing-complete-guide\">link management and cross-referencing systems\u003C/a> by presenting relationship data, cross-reference matrices, and navigation hierarchies in clear, scannable formats that improve information architecture and user navigation patterns.\u003C/p>\n\u003Ch2 id=\"performance-and-optimization\">Performance and Optimization\u003C/h2>\n\u003Ch3 id=\"lazy-loading-for-large-tables\">Lazy Loading for Large Tables\u003C/h3>\n\u003Cp>Implementing efficient loading strategies for data-heavy tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// lazy-table-loader.js - Performance optimization for large datasets\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LazyTableLoader\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, data, options = {}\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\">fullData\u003C/span> = data;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">batchSize\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">200\u003C/span>, \u003Cspan class=\"hljs-comment\">// pixels from bottom to trigger load\u003C/span>\n            \u003Cspan class=\"hljs-attr\">showLoadingIndicator\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadInitialBatch\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTable\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\">'lazy-table'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create header (same as before)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> thead = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTableHeader\u003C/span>();\n        table.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(thead);\n        \n        \u003Cspan class=\"hljs-comment\">// Create tbody\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-title function_\">appendChild\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add loading indicator\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">showLoadingIndicator\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createLoadingIndicator\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadInitialBatch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadBatch\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadBatch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> || \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">fullData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showLoadingIndicator\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Simulate async loading (replace with actual data fetching)\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span>;\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>(startIndex + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">batchSize\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">fullData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> batchData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">fullData\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startIndex, endIndex);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n            \n            batchData.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTableRow\u003C/span>(rowData);\n                fragment.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row);\n            });\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>(fragment);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span> = endIndex;\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideLoadingIndicator\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Update loading trigger if more data available\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span> < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">fullData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateLoadingTrigger\u003C/span>();\n            }\n        }, \u003Cspan class=\"hljs-number\">100\u003C/span>); \u003Cspan class=\"hljs-comment\">// Simulate network delay\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadBatch\u003C/span>();\n                }\n            });\n        }, {\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.threshold}\u003C/span>px`\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateLoadingTrigger\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove old trigger\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> oldTrigger = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.loading-trigger'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (oldTrigger) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(oldTrigger);\n            oldTrigger.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add new trigger if more data available\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedRows\u003C/span> < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">fullData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> trigger = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            trigger.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'loading-trigger'\u003C/span>;\n            trigger.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">'1px'\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>(trigger);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observer\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(trigger);\n        }\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-optimization-for-large-tables\">CSS Optimization for Large Tables\u003C/h3>\n\u003Cp>Efficient styling strategies for performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Performance-optimized table styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">/* Use transform for better performance than changing layout properties */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: transform;\n    \n    \u003Cspan class=\"hljs-comment\">/* Optimize repaints */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">backface-visibility\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">perspective\u003C/span>: \u003Cspan class=\"hljs-number\">1000px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Efficient hover effects */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\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\">/* Avoid expensive box-shadow animations on large tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.large-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\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-comment\">/* Remove shadow for performance */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Use CSS containment for better performance */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style paint;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Optimize for mobile performance */\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\">.large-table\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">/* Reduce visual effects on mobile */\u003C/span>\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.large-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-comment\">/* Disable hover effects on touch devices */\u003C/span>\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: initial;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Virtual scrolling container */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.virtual-scroll-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-scroll-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"table-rendering-problems\">Table Rendering Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables breaking layout or not displaying correctly\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Fix common table display issues */\u003C/span>\n\u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">/* Ensure table displays properly in flex containers */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">/* Fix width calculation issues */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n    \n    \u003Cspan class=\"hljs-comment\">/* Prevent overflow issues */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">overflow-wrap\u003C/span>: break-word;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix mobile display issues */\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\">.responsive-table\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">/* Ensure proper mobile display */\u003C/span>\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n        \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\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    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-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\u003C/code>\u003C/pre>\u003Ch3 id=\"accessibility-issues\">Accessibility Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Tables not working properly with screen readers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Improved accessibility markup -->\u003C/span>\n\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-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-description"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-description"\u003C/span>>\u003C/span>\n        Project status dashboard showing 5 active projects with current progress and team assignments\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n    \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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>\n                Project Name\n            \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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>\n                Status\n            \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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"columnheader"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"progress"\u003C/span>>\u003C/span>\n                Progress\n            \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    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>\n                Website Redesign\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"status-help"\u003C/span>>\u003C/span>\n                Completed\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> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"progress"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"visually-hidden"\u003C/span>>\u003C/span>100 percent complete\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"progressbar"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuenow\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuemin\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-valuemax\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span>>\u003C/span>\n                    100%\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\">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\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"visually-hidden"\u003C/span>>\u003C/span>\n    Status indicates current phase: Planning, In Progress, or Completed\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table styling and formatting techniques transform basic data presentation into professional, accessible, and engaging documentation elements that enhance reader comprehension and improve content quality. By implementing responsive design principles, proper accessibility standards, and performance optimization strategies, technical writers can create table-based content that serves users effectively across all devices and platforms.\u003C/p>\n\u003Cp>The key to successful table implementation lies in balancing visual appeal with functional requirements, ensuring that styling enhancements support rather than hinder data comprehension and accessibility. Whether you're creating API documentation, project dashboards, or technical specifications, the techniques covered in this guide provide the foundation for building sophisticated data presentations that meet modern web standards and user expectations.\u003C/p>\n\u003Cp>Remember to test your tables across different devices and assistive technologies, implement progressive enhancement strategies that gracefully degrade on older platforms, and maintain consistent styling patterns that align with your overall documentation design system. With proper attention to advanced styling techniques, your Markdown tables can become powerful tools for data communication that enhance both usability and professional presentation quality.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43],{"id":16,"text":17,"level":18},"why-master-advanced-table-styling","Why Master Advanced Table Styling?",2,{"id":20,"text":21,"level":18},"foundation-table-styling-concepts","Foundation Table Styling Concepts",{"id":23,"text":24,"level":18},"advanced-styling-techniques","Advanced Styling Techniques",{"id":26,"text":27,"level":18},"platform-specific-implementation","Platform-Specific Implementation",{"id":29,"text":30,"level":18},"accessibility-and-semantic-html","Accessibility and Semantic HTML",{"id":32,"text":33,"level":18},"advanced-table-automation","Advanced Table Automation",{"id":35,"text":36,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":38,"text":39,"level":18},"performance-and-optimization","Performance and Optimization",{"id":41,"text":42,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":44,"text":45,"level":18},"conclusion","Conclusion",[],[48,56,62],{"slug":49,"title":50,"description":51,"excerpt":52,"date":53,"category":9,"author":10,"keywords":54,"readingMinutes":55},"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","markdown table formatting, data presentation markdown, table styling, numeric formatting tables, markdown data visualization, professional table design, responsive markdown tables, table data alignment",16,{"slug":57,"title":50,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":55},"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":63,"title":64,"description":65,"excerpt":66,"date":67,"category":9,"author":10,"keywords":68,"readingMinutes":69},"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,1792184943797]