[{"data":1,"prerenderedAt":78},["Reactive",2],{"blog-post-markdown-table-cell-alignment-and-justify-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":52,"related":53},"markdown-table-cell-alignment-and-justify-complete-guide","Markdown Table Cell Alignment and Justification: Complete Guide for Data Presentation and Content Formatting","Master advanced Markdown table cell alignment techniques including left, right, center, and justified text alignment. Learn CSS integration, responsive alignment strategies, and cross-platform compatibility for professional data presentation.","Advanced Markdown table cell alignment and justification techniques enable sophisticated data presentation that enhances readability, visual hierarchy, and professional document formatting across…","2025-11-12","Tutorial","Matthew Rathbone","markdown table alignment, table cell justify, markdown table text alignment, table formatting markdown, markdown table css alignment, table cell positioning, markdown table responsive alignment, table alignment guide",19,"\u003Cp>Advanced Markdown table cell alignment and justification techniques enable sophisticated data presentation that enhances readability, visual hierarchy, and professional document formatting across technical documentation, reports, and content management systems. By mastering comprehensive alignment strategies, CSS integration methods, and responsive design considerations, content creators can build tables that maintain visual consistency and optimal readability across different devices, platforms, and presentation contexts.\u003C/p>\n\u003Ch2 id=\"why-master-advanced-table-cell-alignment\">Why Master Advanced Table Cell Alignment?\u003C/h2>\n\u003Cp>Professional table alignment provides essential benefits for data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Guide reader attention through strategic alignment patterns and content organization\u003C/li>\n\u003Cli>\u003Cstrong>Data Readability\u003C/strong>: Optimize number alignment, text positioning, and content flow for enhanced comprehension  \u003C/li>\n\u003Cli>\u003Cstrong>Professional Presentation\u003C/strong>: Create polished, publication-ready tables that meet design standards\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Platform Consistency\u003C/strong>: Ensure alignment works across different Markdown processors and output formats\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Implement alignment patterns that support screen readers and assistive technologies\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-alignment-techniques\">Foundation Alignment Techniques\u003C/h2>\n\u003Ch3 id=\"basic-markdown-table-alignment\">Basic Markdown Table Alignment\u003C/h3>\n\u003Cp>Understanding fundamental alignment syntax and implementation patterns:\u003C/p>\n\u003Cp>Basic table alignment examples and syntax patterns:\u003C/p>\n\u003Ch2 id=\"standard-alignment-options\">Standard Alignment Options\u003C/h2>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Left Aligned\u003C/th>\n\u003Cth align=\"center\">Center Aligned\u003C/th>\n\u003Cth align=\"right\">Right Aligned\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd align=\"left\">Default\u003C/td>\n\u003Ctd align=\"center\">Center content\u003C/td>\n\u003Ctd align=\"right\">Right content\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">Left content\u003C/td>\n\u003Ctd align=\"center\">Centered text\u003C/td>\n\u003Ctd align=\"right\">Numbers: 1,234.56\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">Text flows left\u003C/td>\n\u003Ctd align=\"center\">Symmetrical\u003C/td>\n\u003Ctd align=\"right\">Currency: $45.99\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Ch2 id=\"alignment-syntax-breakdown\">Alignment Syntax Breakdown\u003C/h2>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">| Column Header   | Column Header      | Column Header     |\n|:----------------|:------------------:|------------------:|\n| Left align      | Center align       | Right align       |\n| Use :---        | Use :---:          | Use ---:          |\n\u003C/code>\u003C/pre>\u003Ch2 id=\"mixed-content-alignment\">Mixed Content Alignment\u003C/h2>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Item Name\u003C/th>\n\u003Cth align=\"left\">Category\u003C/th>\n\u003Cth align=\"right\">Price\u003C/th>\n\u003Cth align=\"center\">Status\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd align=\"left\">Premium Widget\u003C/td>\n\u003Ctd align=\"left\">Electronics\u003C/td>\n\u003Ctd align=\"right\">$299.99\u003C/td>\n\u003Ctd align=\"center\">Available\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">Standard Tool\u003C/td>\n\u003Ctd align=\"left\">Hardware\u003C/td>\n\u003Ctd align=\"right\">$49.95\u003C/td>\n\u003Ctd align=\"center\">Limited\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">Basic Component\u003C/td>\n\u003Ctd align=\"left\">Accessories\u003C/td>\n\u003Ctd align=\"right\">$12.50\u003C/td>\n\u003Ctd align=\"center\">In Stock\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Ch2 id=\"complex-alignment-patterns\">Complex Alignment Patterns\u003C/h2>\n\u003Cdiv class=\"table-responsive\">\u003Ctable class=\"table\">\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Product Code\u003C/th>\n\u003Cth align=\"left\">Description\u003C/th>\n\u003Cth align=\"right\">Unit Price\u003C/th>\n\u003Cth align=\"right\">Quantity\u003C/th>\n\u003Cth align=\"right\">Total\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd align=\"left\">PRD-001\u003C/td>\n\u003Ctd align=\"left\">High-performance processor\u003C/td>\n\u003Ctd align=\"right\">$459.99\u003C/td>\n\u003Ctd align=\"right\">2\u003C/td>\n\u003Ctd align=\"right\">$919.98\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">PRD-002\u003C/td>\n\u003Ctd align=\"left\">Memory module 32GB DDR4\u003C/td>\n\u003Ctd align=\"right\">$189.95\u003C/td>\n\u003Ctd align=\"right\">4\u003C/td>\n\u003Ctd align=\"right\">$759.80\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">PRD-003\u003C/td>\n\u003Ctd align=\"left\">Storage drive 1TB NVMe\u003C/td>\n\u003Ctd align=\"right\">$129.99\u003C/td>\n\u003Ctd align=\"right\">1\u003C/td>\n\u003Ctd align=\"right\">$129.99\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd align=\"left\">\u003Cstrong>TOTAL\u003C/strong>\u003C/td>\n\u003Ctd align=\"left\">\u003C/td>\n\u003Ctd align=\"right\">\u003C/td>\n\u003Ctd align=\"right\">\u003C/td>\n\u003Ctd align=\"right\">\u003Cstrong>$1,809.77\u003C/strong>\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\u003C/div>\n\u003Ch3 id=\"css-enhanced-alignment-systems\">CSS-Enhanced Alignment Systems\u003C/h3>\n\u003Cp>Implementing advanced alignment through CSS integration and custom styling:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced table cell alignment CSS */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\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\">font-family\u003C/span>: system-ui, -apple-system, sans-serif;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Advanced Text Alignment Classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.align-left\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-start;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.align-center\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.align-right\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.align-justify\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-justify\u003C/span>: inter-word;\n    \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Vertical Alignment Options */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.valign-top\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.valign-middle\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: middle;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.valign-bottom\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: bottom;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.valign-baseline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: baseline;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content-Specific Alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.number-align\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.currency-align\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.currency-align\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'$'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.percentage-align\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.percentage-align\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'%'\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-line Content Alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.multiline-content\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">word-wrap\u003C/span>: break-word;\n    \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.multiline-content\u003C/span>\u003Cspan class=\"hljs-selector-class\">.center\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.multiline-content\u003C/span>\u003Cspan class=\"hljs-selector-class\">.justify\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n    \u003Cspan class=\"hljs-attribute\">text-justify\u003C/span>: inter-word;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status and Category Styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\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    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-available\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#d4edda\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#155724\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-limited\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#856404\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-unavailable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8d7da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#721c24\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive Alignment */\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\">.markdown-table-enhanced\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Stack cells vertically on small screens */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-stack\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-stack\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-stack\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 \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-stack\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\">12px\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>: left;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">50%\u003C/span> - \u003Cspan class=\"hljs-number\">24px\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print Optimizations */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">break-inside\u003C/span>: avoid;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.markdown-table-enhanced\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">break-inside\u003C/span>: avoid;\n        \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-alignment-implementation-system\">Advanced Alignment Implementation System\u003C/h3>\n\u003Cp>Creating comprehensive alignment management for complex table structures:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-alignment-manager.js - Advanced table alignment system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableAlignmentManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">defaultAlignment\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableAutoDetection\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">responsiveBreakpoint\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableJustification\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentPatterns\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">currency\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^\\$?\\d+([,.]?\\d{3})*([.,]\\d{2})?$/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">percentage\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^\\d+([.,]\\d+)?%$/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">number\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^-?\\d+([,.]?\\d{3})*([.,]\\d+)?$/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">date\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^\\d{1,2}[\\/\\-\\.]\\d{1,2}[\\/\\-\\.]\\d{2,4}$/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">email\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-regexp\">/^https?:\\/\\/[^\\s]+$/\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentRules\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">currency\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">percentage\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">number\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">date\u003C/span>: \u003Cspan class=\"hljs-string\">'center'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">email\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">url\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTableContent\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Analyzing table content for optimal alignment...'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysisResult = {\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnAnalysis\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">recommendedAlignments\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">contentTypes\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze each column\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> colIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>; colIndex < tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>; colIndex++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractColumnData\u003C/span>(tableData, colIndex);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnAnalysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeColumn\u003C/span>(columnData, colIndex);\n            \n            analysisResult.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(columnAnalysis);\n            analysisResult.\u003Cspan class=\"hljs-property\">recommendedAlignments\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(columnAnalysis.\u003Cspan class=\"hljs-property\">recommendedAlignment\u003C/span>);\n            analysisResult.\u003Cspan class=\"hljs-property\">contentTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(columnAnalysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysisResult;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractColumnData\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnData = {\n            \u003Cspan class=\"hljs-attr\">header\u003C/span>: tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>[columnIndex],\n            \u003Cspan class=\"hljs-attr\">values\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">nonEmptyValues\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">avgLength\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Extract all cell values for this column\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> row \u003Cspan class=\"hljs-keyword\">of\u003C/span> tableData.\u003Cspan class=\"hljs-property\">rows\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = row[columnIndex] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            columnData.\u003Cspan class=\"hljs-property\">values\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(cellValue);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellValue.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(cellValue.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                columnData.\u003Cspan class=\"hljs-property\">maxLength\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(columnData.\u003Cspan class=\"hljs-property\">maxLength\u003C/span>, cellValue.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate average length\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            columnData.\u003Cspan class=\"hljs-property\">avgLength\u003C/span> = columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\n                \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, val\u003C/span>) =>\u003C/span> sum + val.\u003Cspan class=\"hljs-property\">length\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>\n            ) / columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> columnData;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnData, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = {\n            columnIndex,\n            \u003Cspan class=\"hljs-attr\">header\u003C/span>: columnData.\u003Cspan class=\"hljs-property\">header\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalValues\u003C/span>: columnData.\u003Cspan class=\"hljs-property\">values\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">nonEmptyValues\u003C/span>: columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxLength\u003C/span>: columnData.\u003Cspan class=\"hljs-property\">maxLength\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">avgLength\u003C/span>: columnData.\u003Cspan class=\"hljs-property\">avgLength\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">contentTypes\u003C/span>: {},\n            \u003Cspan class=\"hljs-attr\">primaryContentType\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">recommendedAlignment\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">defaultAlignment\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">confidence\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">characteristics\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze content types\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> value \u003Cspan class=\"hljs-keyword\">of\u003C/span> columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> detectedType = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectContentType\u003C/span>(value);\n            analysis.\u003Cspan class=\"hljs-property\">contentTypes\u003C/span>[detectedType] = (analysis.\u003Cspan class=\"hljs-property\">contentTypes\u003C/span>[detectedType] || \u003Cspan class=\"hljs-number\">0\u003C/span>) + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Determine primary content type\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedTypes = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">contentTypes\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[,a], [,b]\u003C/span>) =>\u003C/span> b - a);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortedTypes.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> [primaryType, primaryCount] = sortedTypes[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            analysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span> = primaryType;\n            analysis.\u003Cspan class=\"hljs-property\">confidence\u003C/span> = primaryCount / analysis.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Determine recommended alignment\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">confidence\u003C/span> >= \u003Cspan class=\"hljs-number\">0.7\u003C/span>) { \u003Cspan class=\"hljs-comment\">// 70% confidence threshold\u003C/span>\n            analysis.\u003Cspan class=\"hljs-property\">recommendedAlignment\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentRules\u003C/span>[analysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span>] || \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            analysis.\u003Cspan class=\"hljs-property\">recommendedAlignment\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">inferAlignmentFromHeader\u003C/span>(columnData.\u003Cspan class=\"hljs-property\">header\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add characteristics\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addColumnCharacteristics\u003C/span>(analysis, columnData);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysis;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectContentType\u003C/span>(\u003Cspan class=\"hljs-params\">value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cleanValue = value.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [type, pattern] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentPatterns\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (pattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(cleanValue)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> type;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">inferAlignmentFromHeader\u003C/span>(\u003Cspan class=\"hljs-params\">header\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerHeader = header.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Common patterns in headers that suggest alignment\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'price'\u003C/span>) || lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'cost'\u003C/span>) || \n            lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'amount'\u003C/span>) || lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'total'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'date'\u003C/span>) || lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'time'\u003C/span>) ||\n            lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'status'\u003C/span>) || lowerHeader.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'type'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'center'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addColumnCharacteristics\u003C/span>(\u003Cspan class=\"hljs-params\">analysis, columnData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Wide content detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">avgLength\u003C/span> > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n            analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'wide-content'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Mixed content detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> typeCount = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">contentTypes\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (typeCount > \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n            analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'mixed-content'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Numeric sequence detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span> === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> numbers = columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>\n                .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">val\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(val.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[,$]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)))\n                .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">num\u003C/span> =>\u003C/span> !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(num));\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isSequential\u003C/span>(numbers)) {\n                analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'sequential'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hasConsistentDecimals\u003C/span>(columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>)) {\n                analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'consistent-decimals'\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Uniform length detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lengths = columnData.\u003Cspan class=\"hljs-property\">nonEmptyValues\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">val\u003C/span> =>\u003C/span> val.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> uniqueLengths = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(lengths);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (uniqueLengths.\u003Cspan class=\"hljs-property\">size\u003C/span> <= \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n            analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'uniform-length'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isSequential\u003C/span>(\u003Cspan class=\"hljs-params\">numbers\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numbers.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">3\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedNumbers = [...numbers].\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a - b);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> isSequential = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < sortedNumbers.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortedNumbers[i] - sortedNumbers[i - \u003Cspan class=\"hljs-number\">1\u003C/span>] !== \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                isSequential = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> isSequential;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hasConsistentDecimals\u003C/span>(\u003Cspan class=\"hljs-params\">values\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> decimalCounts = values.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">val\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = val.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\.(\\d+)/\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> match ? match[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> uniqueDecimalCounts = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(decimalCounts);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> uniqueDecimalCounts.\u003Cspan class=\"hljs-property\">size\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAlignmentCSS\u003C/span>(\u003Cspan class=\"hljs-params\">analysisResult, customOptions = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cssRules = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableClass = customOptions.\u003Cspan class=\"hljs-property\">tableClass\u003C/span> || \u003Cspan class=\"hljs-string\">'markdown-table-aligned'\u003C/span>;\n        \n        cssRules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`\n/* Generated table alignment CSS */\n.\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 1.5em 0;\n}\n\n.\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> th,\n.\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> td {\n    padding: 8px 12px;\n    border: 1px solid #e1e5e9;\n    vertical-align: top;\n}\n`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate column-specific rules\u003C/span>\n        analysisResult.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">analysis, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nthChild = index + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignment = analysis.\u003Cspan class=\"hljs-property\">recommendedAlignment\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> additionalStyles = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Add content-specific styling\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span> === \u003Cspan class=\"hljs-string\">'currency'\u003C/span> || analysis.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span> === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n                additionalStyles += \u003Cspan class=\"hljs-string\">`\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'wide-content'\u003C/span>)) {\n                additionalStyles += \u003Cspan class=\"hljs-string\">`\n    max-width: 200px;\n    word-wrap: break-word;`\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (analysis.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'uniform-length'\u003C/span>)) {\n                additionalStyles += \u003Cspan class=\"hljs-string\">`\n    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;`\u003C/span>;\n            }\n            \n            cssRules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`\n.\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> th:nth-child(\u003Cspan class=\"hljs-subst\">${nthChild}\u003C/span>),\n.\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> td:nth-child(\u003Cspan class=\"hljs-subst\">${nthChild}\u003C/span>) {\n    text-align: \u003Cspan class=\"hljs-subst\">${alignment}\u003C/span>;\u003Cspan class=\"hljs-subst\">${additionalStyles}\u003C/span>\n}\n`\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add responsive rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (customOptions.\u003Cspan class=\"hljs-property\">responsive\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>) {\n            cssRules.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateResponsiveCSS\u003C/span>(tableClass, analysisResult));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cssRules.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateResponsiveCSS\u003C/span>(\u003Cspan class=\"hljs-params\">tableClass, analysisResult\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n/* Responsive table alignment */\n@media (max-width: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.responsiveBreakpoint}\u003C/span>px) {\n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span> {\n        font-size: 0.9em;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack {\n        display: block;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack thead {\n        display: none;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack tbody,\n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack tr,\n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack td {\n        display: block;\n        width: 100%;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack tr {\n        border: 1px solid #e1e5e9;\n        margin-bottom: 1em;\n        border-radius: 4px;\n        padding: 12px;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack td {\n        text-align: left !important;\n        padding: 4px 0;\n        border: none;\n        position: relative;\n        padding-left: 40% !important;\n    }\n    \n    .\u003Cspan class=\"hljs-subst\">${tableClass}\u003C/span>.responsive-stack td::before {\n        content: attr(data-label) ': ';\n        position: absolute;\n        left: 0;\n        width: 35%;\n        text-align: left;\n        font-weight: 600;\n        color: #666;\n    }\n}`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, alignmentOptions = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableContent\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> markdownTable = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Generate header row\u003C/span>\n        markdownTable += \u003Cspan class=\"hljs-string\">'| '\u003C/span> + tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |\\n'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Generate separator row with alignment\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> separators = analysis.\u003Cspan class=\"hljs-property\">recommendedAlignments\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">alignment\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (alignment) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'left'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">':---'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'center'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">':---:'\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'---:'\u003C/span>;\n                \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'---'\u003C/span>;\n            }\n        });\n        \n        markdownTable += \u003Cspan class=\"hljs-string\">'|'\u003C/span> + separators.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sep\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">` \u003Cspan class=\"hljs-subst\">${sep}\u003C/span> `\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>) + \u003Cspan class=\"hljs-string\">'|\\n'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Generate data rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> row \u003Cspan class=\"hljs-keyword\">of\u003C/span> tableData.\u003Cspan class=\"hljs-property\">rows\u003C/span>) {\n            markdownTable += \u003Cspan class=\"hljs-string\">'| '\u003C/span> + row.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |\\n'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">markdown\u003C/span>: markdownTable,\n            \u003Cspan class=\"hljs-attr\">analysis\u003C/span>: analysis,\n            \u003Cspan class=\"hljs-attr\">css\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAlignmentCSS\u003C/span>(analysis, alignmentOptions)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">optimizeTableForAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">tableData, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> optimizations = {\n            \u003Cspan class=\"hljs-attr\">addScope\u003C/span>: options.\u003Cspan class=\"hljs-property\">addScope\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">addSummary\u003C/span>: options.\u003Cspan class=\"hljs-property\">addSummary\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">improveHeaders\u003C/span>: options.\u003Cspan class=\"hljs-property\">improveHeaders\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibilityReport = {\n            \u003Cspan class=\"hljs-attr\">improvements\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">warnings\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Check for proper header structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (optimizations.\u003Cspan class=\"hljs-property\">addScope\u003C/span>) {\n            accessibilityReport.\u003Cspan class=\"hljs-property\">improvements\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Added scope attributes to headers'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for column header clarity\u003C/span>\n        tableData.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-property\">length\u003C/span> < \u003Cspan class=\"hljs-number\">3\u003C/span>) {\n                accessibilityReport.\u003Cspan class=\"hljs-property\">warnings\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\n                    \u003Cspan class=\"hljs-string\">`Column \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> header "\u003Cspan class=\"hljs-subst\">${header}\u003C/span>" is very short - consider more descriptive text`\u003C/span>\n                );\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check for data accessibility\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableContent\u003C/span>(tableData);\n        analysis.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">col, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (col.\u003Cspan class=\"hljs-property\">primaryContentType\u003C/span> === \u003Cspan class=\"hljs-string\">'number'\u003C/span> && col.\u003Cspan class=\"hljs-property\">confidence\u003C/span> > \u003Cspan class=\"hljs-number\">0.8\u003C/span>) {\n                accessibilityReport.\u003Cspan class=\"hljs-property\">recommendations\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\n                    \u003Cspan class=\"hljs-string\">`Column \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> (\u003Cspan class=\"hljs-subst\">${col.header}\u003C/span>) contains numbers - consider adding units or context`\u003C/span>\n                );\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> accessibilityReport;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableReport\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableContent\u003C/span>(tableData);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibilityReport = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeTableForAccessibility\u003C/span>(tableData);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">summary\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">columns\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">rows\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">rowCount\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalCells\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">columnCount\u003C/span> * analysis.\u003Cspan class=\"hljs-property\">rowCount\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">alignment\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">recommendedAlignments\u003C/span>.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">', '\u003C/span>)\n            },\n            \u003Cspan class=\"hljs-attr\">columnAnalysis\u003C/span>: analysis.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">accessibility\u003C/span>: accessibilityReport,\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateOptimizationRecommendations\u003C/span>(analysis)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateOptimizationRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">analysis\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check for alignment consistency\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignmentTypes = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(analysis.\u003Cspan class=\"hljs-property\">recommendedAlignments\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (alignmentTypes.\u003Cspan class=\"hljs-property\">size\u003C/span> === analysis.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'alignment'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'low'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">'Consider grouping similar content types for consistent alignment patterns'\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for wide content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> wideColumns = analysis.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">col\u003C/span> =>\u003C/span> \n            col.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'wide-content'\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (wideColumns.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'layout'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${wideColumns.length}\u003C/span> columns have wide content - consider responsive design strategies`\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for mixed content types\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> mixedColumns = analysis.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">col\u003C/span> =>\u003C/span>\n            col.\u003Cspan class=\"hljs-property\">characteristics\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'mixed-content'\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mixedColumns.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'data-quality'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">priority\u003C/span>: \u003Cspan class=\"hljs-string\">'medium'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">message\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${mixedColumns.length}\u003C/span> columns have mixed content types - consider data normalization`\u003C/span>\n            });\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage examples and testing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">demonstrateTableAlignment\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignmentManager = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableAlignmentManager\u003C/span>({\n        \u003Cspan class=\"hljs-attr\">enableAutoDetection\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n        \u003Cspan class=\"hljs-attr\">responsiveBreakpoint\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Example table data\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = {\n        \u003Cspan class=\"hljs-attr\">headers\u003C/span>: [\u003Cspan class=\"hljs-string\">'Product'\u003C/span>, \u003Cspan class=\"hljs-string\">'Category'\u003C/span>, \u003Cspan class=\"hljs-string\">'Price'\u003C/span>, \u003Cspan class=\"hljs-string\">'Rating'\u003C/span>, \u003Cspan class=\"hljs-string\">'Availability'\u003C/span>],\n        \u003Cspan class=\"hljs-attr\">rows\u003C/span>: [\n            [\u003Cspan class=\"hljs-string\">'Premium Laptop'\u003C/span>, \u003Cspan class=\"hljs-string\">'Electronics'\u003C/span>, \u003Cspan class=\"hljs-string\">'$1,299.99'\u003C/span>, \u003Cspan class=\"hljs-string\">'4.8/5'\u003C/span>, \u003Cspan class=\"hljs-string\">'In Stock'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'Wireless Mouse'\u003C/span>, \u003Cspan class=\"hljs-string\">'Accessories'\u003C/span>, \u003Cspan class=\"hljs-string\">'$29.95'\u003C/span>, \u003Cspan class=\"hljs-string\">'4.2/5'\u003C/span>, \u003Cspan class=\"hljs-string\">'Limited'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'USB Cable'\u003C/span>, \u003Cspan class=\"hljs-string\">'Cables'\u003C/span>, \u003Cspan class=\"hljs-string\">'$12.50'\u003C/span>, \u003Cspan class=\"hljs-string\">'4.0/5'\u003C/span>, \u003Cspan class=\"hljs-string\">'Available'\u003C/span>],\n            [\u003Cspan class=\"hljs-string\">'Monitor Stand'\u003C/span>, \u003Cspan class=\"hljs-string\">'Furniture'\u003C/span>, \u003Cspan class=\"hljs-string\">'$89.99'\u003C/span>, \u003Cspan class=\"hljs-string\">'4.6/5'\u003C/span>, \u003Cspan class=\"hljs-string\">'Back Order'\u003C/span>]\n        ]\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Table Alignment Demo:'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'==================='\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Generate optimized table\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = alignmentManager.\u003Cspan class=\"hljs-title function_\">generateMarkdownTable\u003C/span>(tableData);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\nGenerated Markdown:'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(result.\u003Cspan class=\"hljs-property\">markdown\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Show analysis\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\nAlignment Analysis:'\u003C/span>);\n    result.\u003Cspan class=\"hljs-property\">analysis\u003C/span>.\u003Cspan class=\"hljs-property\">columnAnalysis\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">col, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Column \u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span> (\u003Cspan class=\"hljs-subst\">${col.header}\u003C/span>): \u003Cspan class=\"hljs-subst\">${col.recommendedAlignment}\u003C/span> (\u003Cspan class=\"hljs-subst\">${col.primaryContentType}\u003C/span>, \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.round(col.confidence * \u003Cspan class=\"hljs-number\">100\u003C/span>)}\u003C/span>% confidence)`\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Generate report\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = alignmentManager.\u003Cspan class=\"hljs-title function_\">generateTableReport\u003C/span>(tableData);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'\\nOptimization Report:'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(report.\u003Cspan class=\"hljs-property\">summary\u003C/span>, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>));\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n}\n\n\u003Cspan class=\"hljs-comment\">// Export for use in other modules\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">module\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">MarkdownTableAlignmentManager\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-alignment-implementation\">Platform-Specific Alignment Implementation\u003C/h2>\n\u003Ch3 id=\"github-flavored-markdown-alignment\">GitHub Flavored Markdown Alignment\u003C/h3>\n\u003Cp>Optimizing alignment for GitHub and similar platforms:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># GitHub-Optimized Table Alignment\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Basic GitHub Table Alignment\u003C/span>\n\nGitHub supports standard alignment syntax with some limitations:\n\n| Left Aligned | Center Aligned | Right Aligned |\n|:-------------|:-------------:|-------------:|\n| Content      | Content       | Content      |\n| Left         | Center        | Right        |\n\n\u003Cspan class=\"hljs-section\">## GitHub Table Limitations\u003C/span>\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> No CSS styling in markdown files\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Limited control over cell padding\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> No vertical alignment control\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> No responsive behavior\n\n\u003Cspan class=\"hljs-section\">## Workarounds for GitHub\u003C/span>\n\n\u003Cspan class=\"hljs-section\">### Using Unicode Characters for Spacing\u003C/span>\n\n| Product                    | Price      | Stock |\n|:---------------------------|----------:|:-----:|\n| Item A                     |    $29.99 |   ✓   |\n| Very Long Product Name B   |   $149.99 |   ✗   |\n| Item C                     |     $5.99 |   ✓   |\n\n\u003Cspan class=\"hljs-section\">### Using HTML Entities\u003C/span>\n\n| Feature | Description | Status |\n|:--------|:-----------:|-------:|\n| Feature A | Available now | ✓ |\n| Feature B | Coming soon | × |\n| Feature C | In development | … |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-and-static-site-generator-integration\">Jekyll and Static Site Generator Integration\u003C/h3>\n\u003Cp>Enhanced alignment for Jekyll-powered sites:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-scss\">\u003Cspan class=\"hljs-comment\">// _sass/table-alignment.scss - Jekyll table styling\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-wrapper\u003C/span> {\n    \u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n        \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\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-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\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.95rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Enhanced alignment classes\u003C/span>\n        &\u003Cspan class=\"hljs-selector-class\">.align-enhanced\u003C/span> {\n            \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n                \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--border-color, \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--header-bg, \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>);\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                \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Column-specific alignment\u003C/span>\n            \u003Cspan class=\"hljs-selector-class\">.col-number\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n                \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n                \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Consolas, monospace;\n            }\n            \n            \u003Cspan class=\"hljs-selector-class\">.col-currency\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n                \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n                \n                &\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-currency-symbol);\n                    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-selector-class\">.col-center\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n            }\n            \n            \u003Cspan class=\"hljs-selector-class\">.col-status\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n                \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n                \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n                \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n                \n                &\u003Cspan class=\"hljs-selector-attr\">[data-status=\u003Cspan class=\"hljs-string\">"active"\u003C/span>]\u003C/span> {\n                    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--success-color, \u003Cspan class=\"hljs-number\">#28a745\u003C/span>);\n                }\n                \n                &\u003Cspan class=\"hljs-selector-attr\">[data-status=\u003Cspan class=\"hljs-string\">"pending"\u003C/span>]\u003C/span> {\n                    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--warning-color, \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>);\n                }\n                \n                &\u003Cspan class=\"hljs-selector-attr\">[data-status=\u003Cspan class=\"hljs-string\">"inactive"\u003C/span>]\u003C/span> {\n                    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--danger-color, \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Zebra striping\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-built_in\">var\u003C/span>(--stripe-bg, \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Hover effects\u003C/span>\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-built_in\">var\u003C/span>(--hover-bg, \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>);\n                \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n            }\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Responsive table behavior\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\">.table-container\u003C/span> {\n        \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n            \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n            \n            \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n            }\n            \n            \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>, \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n                \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--border-color, \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>);\n                \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n                \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n                \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\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\">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.05\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n                \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\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\">border\u003C/span>: none;\n                \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n                \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n                \n                &\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\">35%\u003C/span>;\n                    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n                    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--label-color, \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>);\n                }\n            }\n        }\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-integration\">Hugo Shortcode Integration\u003C/h3>\n\u003Cp>Custom Hugo shortcodes for advanced table alignment:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\">{{\u003Cspan class=\"hljs-comment\">/* layouts/shortcodes/aligned-table.html - Hugo shortcode for enhanced tables */\u003C/span>}}\n{{ $tableId := .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{{ $responsive := .Get \u003Cspan class=\"hljs-string\">"responsive"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n{{ $striped := .Get \u003Cspan class=\"hljs-string\">"striped"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n{{ $hover := .Get \u003Cspan class=\"hljs-string\">"hover"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"table-container {{ if eq $responsive "\u003C/span>\u003Cspan class=\"hljs-literal\">true\u003C/span>\u003Cspan class=\"hljs-string\">" }}responsive{{ end }}"\u003C/span>>\n    <table id=\u003Cspan class=\"hljs-string\">"{{ $tableId }}"\u003C/span> class=\u003Cspan class=\"hljs-string\">"aligned-table {{ if eq $striped "\u003C/span>\u003Cspan class=\"hljs-literal\">true\u003C/span>\u003Cspan class=\"hljs-string\">" }}striped{{ end }} {{ if eq $hover "\u003C/span>\u003Cspan class=\"hljs-literal\">true\u003C/span>\u003Cspan class=\"hljs-string\">" }}hover{{ end }}"\u003C/span>>\n        {{ .Inner | markdownify }}\n    </table>\n</div>\n\n<style>\n#{{ $tableId }} {\n    width: \u003Cspan class=\"hljs-number\">100\u003C/span>%;\n    border-collapse: collapse;\n    margin: \u003Cspan class=\"hljs-number\">2\u003C/span>rem \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    font-size: \u003Cspan class=\"hljs-number\">0.95\u003C/span>rem;\n}\n\n#{{ $tableId }} th,\n#{{ $tableId }} td {\n    padding: \u003Cspan class=\"hljs-number\">12\u003C/span>px \u003Cspan class=\"hljs-number\">16\u003C/span>px;\n    border: \u003Cspan class=\"hljs-number\">1\u003C/span>px solid #e1e5e9;\n    text-align: left;\n}\n\n#{{ $tableId }} th {\n    background-color: #f8f9fa;\n    font-weight: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    text-transform: uppercase;\n    letter-spacing: \u003Cspan class=\"hljs-number\">0.5\u003C/span>px;\n    font-size: \u003Cspan class=\"hljs-number\">0.85\u003C/span>rem;\n}\n\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $striped \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n#{{ $tableId }} tbody tr:nth-child(even) {\n    background-color: #f8f9fa;\n}\n{{ end }}\n\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $hover \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n#{{ $tableId }} tbody tr:hover {\n    background-color: #e9ecef;\n    transition: background-color \u003Cspan class=\"hljs-number\">0.2\u003C/span>s ease;\n}\n{{ end }}\n\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $responsive \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n@media (max-width: \u003Cspan class=\"hljs-number\">768\u003C/span>px) {\n    .table-container.responsive {\n        overflow-x: auto;\n    }\n    \n    #{{ $tableId }} {\n        min-width: \u003Cspan class=\"hljs-number\">600\u003C/span>px;\n    }\n}\n{{ end }}\n</style>\n\n<!-- Usage in content files -->\n{{< aligned-table id=\u003Cspan class=\"hljs-string\">"products"\u003C/span> responsive=\u003Cspan class=\"hljs-string\">"true"\u003C/span> striped=\u003Cspan class=\"hljs-string\">"true"\u003C/span> >}}\n| Product | Category | Price | Status |\n|:--------|:---------|------:|:------:|\n| Item A  | Tech     | $\u003Cspan class=\"hljs-number\">99\u003C/span>   | Active |\n| Item B  | Home     | $\u003Cspan class=\"hljs-number\">49\u003C/span>   | Sold   |\n{{< /aligned-table >}}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-semantic-alignment\">Accessibility and Semantic Alignment\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cp>Implementing alignment techniques that enhance accessibility:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible table alignment with proper semantics -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"data-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\">"Product inventory summary"\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\">"sr-only"\u003C/span>>\u003C/span>\n        Product inventory showing names, categories, prices, and availability status\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>>\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\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>\n                Product 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> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"category"\u003C/span>>\u003C/span>\n                Category\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> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"descending"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable numeric"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"price"\u003C/span>>\u003C/span>\n                Price (USD)\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> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\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\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-col"\u003C/span>>\u003C/span>\n                Availability\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>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"product-name"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Premium Laptop\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\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> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"category"\u003C/span>>\u003C/span>Electronics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"currency"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"1299.99"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"1,299 dollars and 99 cents"\u003C/span>>\u003C/span>$1,299.99\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> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status available"\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-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"In stock"\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\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-text"\u003C/span>>\u003C/span>Available\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\">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>\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Accessibility-focused alignment CSS */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader optimizations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\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\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#0066cc\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\">/* Sortable header indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    user-select: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Content-specific alignment with accessibility */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.numeric\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.currency\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[data-sort-value]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-col\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status\u003C/span>\u003Cspan class=\"hljs-selector-class\">.available\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status\u003C/span>\u003Cspan class=\"hljs-selector-class\">.limited\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#212529\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status\u003C/span>\u003Cspan class=\"hljs-selector-class\">.unavailable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid currentColor;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.data-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.sortable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Table alignment strategies integrate seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content management systems\u003C/a>, intelligent alignment detection ensures that tables maintain professional presentation standards across all documentation formats and deployment environments, enhancing both visual appeal and content accessibility.\u003C/p>\n\u003Cp>For sophisticated content architectures, alignment techniques work effectively with \u003Ca href=\"/blog/markdown-form-creation-input-validation-complete-guide\">form creation and data validation systems\u003C/a> to create cohesive user experiences where form inputs align with tabular data presentation, maintaining consistent visual patterns and improving user interface design across interactive documentation platforms.\u003C/p>\n\u003Cp>When building comprehensive information systems, table alignment complements \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation features\u003C/a> by ensuring that offline-cached tables maintain proper alignment and readability, providing consistent user experiences regardless of connectivity status while supporting advanced table interactions through service worker optimization.\u003C/p>\n\u003Ch2 id=\"advanced-responsive-alignment-strategies\">Advanced Responsive Alignment Strategies\u003C/h2>\n\u003Ch3 id=\"container-query-based-alignment\">Container Query-Based Alignment\u003C/h3>\n\u003Cp>Modern CSS features for responsive table behavior:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Container query-based table alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> {\n    container-type: inline-size;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-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}\n\n\u003Cspan class=\"hljs-comment\">/* Alignment adjustments based on container width */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@container\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\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.9em\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\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Right-aligned content becomes left-aligned on small containers */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.currency\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.currency\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"$ "\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@container\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\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> {\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>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\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\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\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\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\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\">35%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"grid-based-table-layout\">Grid-Based Table Layout\u003C/h3>\n\u003Cp>Alternative layout strategies for complex alignment requirements:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* CSS Grid table layout for advanced alignment control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr auto auto \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ccc\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    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">div\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.header\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \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    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-product\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-start;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-price\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Consolas, monospace;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-rating\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-status\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive grid behavior */\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\">.grid-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">div\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.header\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cell\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">40%\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.grid-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cell\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\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">35%\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-and-optimization\">Performance and Optimization\u003C/h2>\n\u003Ch3 id=\"efficient-alignment-processing\">Efficient Alignment Processing\u003C/h3>\n\u003Cp>Optimizing table alignment for large datasets and performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// performance-optimized-alignment.js - Efficient table processing\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceOptimizedTableAlignment\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentCache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeObservers\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeObservers\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Intersection Observer for lazy alignment processing\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\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>) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-table-id'\u003C/span>);\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(tableId)) {\n                            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableId)();\n                            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n                        }\n                    }\n                });\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Resize Observer for responsive alignment updates\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'ResizeObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttleResize\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\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\">const\u003C/span> tableId = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-table-id'\u003C/span>);\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableAlignment\u003C/span>(tableId);\n                    });\n                });\n            });\n        }\n    }\n    \n    throttleResize = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">callback\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title function_\">callback\u003C/span>(), \u003Cspan class=\"hljs-number\">250\u003C/span>);\n    \n    \u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-params\">func, wait\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeout;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">executedFunction\u003C/span>(\u003Cspan class=\"hljs-params\">...args\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">later\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n                \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n                \u003Cspan class=\"hljs-title function_\">func\u003C/span>(...args);\n            };\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n            timeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(later, wait);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processTableLazy\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, alignmentConfig\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableId\u003C/span>();\n        tableElement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-table-id'\u003C/span>, tableId);\n        \n        \u003Cspan class=\"hljs-comment\">// Store processing callback\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(tableId, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processTableAlignment\u003C/span>(tableElement, alignmentConfig);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Start observing\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(tableElement);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Fallback for browsers without IntersectionObserver\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processTableAlignment\u003C/span>(tableElement, alignmentConfig);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Observe for resize\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(tableElement);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processTableAlignment\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cacheKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(tableElement, config);\n        \n        \u003Cspan class=\"hljs-comment\">// Check cache first\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(cacheKey)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAlignment\u003C/span>(tableElement, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(cacheKey));\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze table content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableFast\u003C/span>(tableElement);\n        \n        \u003Cspan class=\"hljs-comment\">// Generate alignment rules\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignmentRules = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateAlignmentRules\u003C/span>(analysis, config);\n        \n        \u003Cspan class=\"hljs-comment\">// Cache results\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(cacheKey, alignmentRules);\n        \n        \u003Cspan class=\"hljs-comment\">// Apply alignment\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAlignment\u003C/span>(tableElement, alignmentRules);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTableFast\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = tableElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = tableElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> analysis = {\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: headers.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnTypes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">maxSampleSize\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">50\u003C/span>, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>) \u003Cspan class=\"hljs-comment\">// Limit sample size for performance\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Analyze each column using a sample of rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> colIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>; colIndex < analysis.\u003Cspan class=\"hljs-property\">columnCount\u003C/span>; colIndex++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnSample = [];\n            \n            \u003Cspan class=\"hljs-comment\">// Collect sample data\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> rowIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>; rowIndex < analysis.\u003Cspan class=\"hljs-property\">maxSampleSize\u003C/span>; rowIndex++) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rows[rowIndex]) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = rows[rowIndex].\u003Cspan class=\"hljs-property\">cells\u003C/span>[colIndex];\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell && cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n                        columnSample.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                    }\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Analyze column type\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnType = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectColumnTypeFast\u003C/span>(columnSample);\n            analysis.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(columnType);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> analysis;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectColumnTypeFast\u003C/span>(\u003Cspan class=\"hljs-params\">sample\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sample.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> numberCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currencyCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> dateCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Fast pattern matching\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> numberPattern = \u003Cspan class=\"hljs-regexp\">/^-?\\d+([,.]\\d+)*$/\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currencyPattern = \u003Cspan class=\"hljs-regexp\">/^\\$?\\d+([,.]?\\d{3})*([.,]\\d{2})?$/\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> datePattern = \u003Cspan class=\"hljs-regexp\">/^\\d{1,2}[\\/\\-\\.]\\d{1,2}[\\/\\-\\.]\\d{2,4}$/\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> value \u003Cspan class=\"hljs-keyword\">of\u003C/span> sample) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currencyPattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) currencyCount++;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numberPattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) numberCount++;\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (datePattern.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(value)) dateCount++;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = sample.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> threshold = \u003Cspan class=\"hljs-number\">0.7\u003C/span>; \u003Cspan class=\"hljs-comment\">// 70% confidence threshold\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currencyCount / total >= threshold) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'currency'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (numberCount / total >= threshold) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (dateCount / total >= threshold) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateAlignmentRules\u003C/span>(\u003Cspan class=\"hljs-params\">analysis, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rules = {\n            \u003Cspan class=\"hljs-attr\">columns\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">classes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: config.\u003Cspan class=\"hljs-property\">responsive\u003C/span> || {}\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignmentMap = {\n            \u003Cspan class=\"hljs-string\">'text'\u003C/span>: \u003Cspan class=\"hljs-string\">'left'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'number'\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'currency'\u003C/span>: \u003Cspan class=\"hljs-string\">'right'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'date'\u003C/span>: \u003Cspan class=\"hljs-string\">'center'\u003C/span>\n        };\n        \n        analysis.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">type, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignment = alignmentMap[type] || \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n            \n            rules.\u003Cspan class=\"hljs-property\">columns\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                index,\n                type,\n                alignment,\n                \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">`col-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>\n            });\n            \n            rules.\u003Cspan class=\"hljs-property\">classes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">selector\u003C/span>: \u003Cspan class=\"hljs-string\">`.col-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">styles\u003C/span>: {\n                    \u003Cspan class=\"hljs-string\">'text-align'\u003C/span>: alignment,\n                    ...(type === \u003Cspan class=\"hljs-string\">'number'\u003C/span> || type === \u003Cspan class=\"hljs-string\">'currency'\u003C/span> ? {\n                        \u003Cspan class=\"hljs-string\">'font-variant-numeric'\u003C/span>: \u003Cspan class=\"hljs-string\">'tabular-nums'\u003C/span>\n                    } : {})\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rules;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyAlignment\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, rules\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Apply column classes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = tableElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rules.\u003Cspan class=\"hljs-property\">columns\u003C/span>[index]) {\n                    cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(rules.\u003Cspan class=\"hljs-property\">columns\u003C/span>[index].\u003Cspan class=\"hljs-property\">className\u003C/span>);\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Inject CSS if not already present\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">injectCSS\u003C/span>(rules);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">injectCSS\u003C/span>(\u003Cspan class=\"hljs-params\">rules\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cssId = \u003Cspan class=\"hljs-string\">'table-alignment-styles'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(cssId)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n            style.\u003Cspan class=\"hljs-property\">id\u003C/span> = cssId;\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> styleSheet = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(cssId).\u003Cspan class=\"hljs-property\">sheet\u003C/span>;\n        \n        rules.\u003Cspan class=\"hljs-property\">classes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rule\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cssText = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${rule.selector}\u003C/span> { \u003Cspan class=\"hljs-subst\">${\n                \u003Cspan class=\"hljs-built_in\">Object\u003C/span>.entries(rule.styles)\n                    .map(([prop, value]) => \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${prop}\u003C/span>: \u003Cspan class=\"hljs-subst\">${value}\u003C/span>`\u003C/span>)\n                    .join(\u003Cspan class=\"hljs-string\">'; '\u003C/span>)\n            }\u003C/span> }`\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                styleSheet.\u003Cspan class=\"hljs-title function_\">insertRule\u003C/span>(cssText, styleSheet.\u003Cspan class=\"hljs-property\">cssRules\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to insert CSS rule:'\u003C/span>, cssText);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableId\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateCacheKey\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableHTML = tableElement.\u003Cspan class=\"hljs-property\">outerHTML\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> configString = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(config);\n        \n        \u003Cspan class=\"hljs-comment\">// Simple hash function for cache key\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hash = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> str = tableHTML + configString;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < str.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> char = str.\u003Cspan class=\"hljs-title function_\">charCodeAt\u003C/span>(i);\n            hash = ((hash << \u003Cspan class=\"hljs-number\">5\u003C/span>) - hash) + char;\n            hash = hash & hash; \u003Cspan class=\"hljs-comment\">// Convert to 32bit integer\u003C/span>\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> hash.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateTableAlignment\u003C/span>(\u003Cspan class=\"hljs-params\">tableId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-table-id="\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableElement && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(tableId)) {\n            \u003Cspan class=\"hljs-comment\">// Re-process alignment for responsive updates\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processTableAlignment\u003C/span>(tableElement, {\n                \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanup\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\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">alignmentCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observerCallbacks\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize and use the optimized alignment system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> tableAlignment = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceOptimizedTableAlignment\u003C/span>();\n\n\u003Cspan class=\"hljs-comment\">// Auto-process all tables on page load\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-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n    tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        tableAlignment.\u003Cspan class=\"hljs-title function_\">processTableLazy\u003C/span>(table, {\n            \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">autoDetect\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n    });\n});\n\n\u003Cspan class=\"hljs-comment\">// Cleanup on page unload\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeunload'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    tableAlignment.\u003Cspan class=\"hljs-title function_\">cleanup\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table cell alignment and justification techniques represent a sophisticated approach to data presentation that transforms simple tabular content into professional, accessible, and visually compelling documentation elements. By mastering comprehensive alignment strategies, CSS integration methods, and responsive design considerations, content creators can build tables that maintain visual consistency and optimal readability across different platforms, devices, and presentation contexts.\u003C/p>\n\u003Cp>The key to successful table alignment lies in understanding the relationship between content types, user needs, and platform capabilities, ensuring that technical implementation serves both aesthetic goals and functional requirements. Whether you're creating technical documentation, data reports, or interactive content systems, the techniques covered in this guide provide the foundation for creating tables that enhance rather than hinder content comprehension and user experience.\u003C/p>\n\u003Cp>Remember to implement alignment strategies as part of your broader content design system, test table behavior across different devices and assistive technologies, and continuously monitor user interaction patterns to refine your alignment approaches. With proper implementation of advanced table alignment techniques, your Markdown-based content can deliver exceptional data presentation experiences that support both visual learners and accessibility requirements while maintaining the simplicity and maintainability that makes Markdown such an effective content creation format.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49],{"id":16,"text":17,"level":18},"why-master-advanced-table-cell-alignment","Why Master Advanced Table Cell Alignment?",2,{"id":20,"text":21,"level":18},"foundation-alignment-techniques","Foundation Alignment Techniques",{"id":23,"text":24,"level":18},"standard-alignment-options","Standard Alignment Options",{"id":26,"text":27,"level":18},"alignment-syntax-breakdown","Alignment Syntax Breakdown",{"id":29,"text":30,"level":18},"mixed-content-alignment","Mixed Content Alignment",{"id":32,"text":33,"level":18},"complex-alignment-patterns","Complex Alignment Patterns",{"id":35,"text":36,"level":18},"platform-specific-alignment-implementation","Platform-Specific Alignment Implementation",{"id":38,"text":39,"level":18},"accessibility-and-semantic-alignment","Accessibility and Semantic Alignment",{"id":41,"text":42,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":44,"text":45,"level":18},"advanced-responsive-alignment-strategies","Advanced Responsive Alignment Strategies",{"id":47,"text":48,"level":18},"performance-and-optimization","Performance and Optimization",{"id":50,"text":51,"level":18},"conclusion","Conclusion",[],[54,62,70],{"slug":55,"title":56,"description":57,"excerpt":58,"date":59,"category":9,"author":10,"keywords":60,"readingMinutes":61},"markdown-table-cell-merging-and-advanced-formatting","Markdown Table Cell Merging and Advanced Formatting: Complete Guide for Professional Data Presentation","Master advanced table formatting in Markdown including cell merging, column spanning, row grouping, and complex table layouts. Learn platform-specific features and professional table design techniques.","Advanced Markdown table formatting capabilities extend far beyond basic grid layouts, offering sophisticated cell merging, column spanning, and professional formatting options that transform…","2025-12-13","markdown table merging, markdown table formatting, advanced markdown tables, cell spanning markdown, table design markdown, markdown table styling, professional markdown tables",13,{"slug":63,"title":64,"description":65,"excerpt":66,"date":67,"category":9,"author":10,"keywords":68,"readingMinutes":69},"markdown-table-cell-merging-and-advanced-formatting-complete-guide","Markdown Table Cell Merging and Advanced Formatting: Complete Guide to Complex Table Structures and Data Presentation","Master advanced Markdown table formatting including cell merging, spanning, complex layouts, and sophisticated data presentation techniques. Learn table styling, responsive design, and accessibility best practices.","Advanced Markdown table formatting with cell merging, spanning, and complex layout capabilities transforms basic data presentation into sophisticated information architecture that supports complex…","2025-12-08","markdown table cell merge, markdown table spanning, advanced markdown tables, markdown table formatting, table cell merging markdown, markdown complex tables, table layout markdown, responsive markdown tables",18,{"slug":71,"title":72,"description":73,"excerpt":74,"date":75,"category":9,"author":10,"keywords":76,"readingMinutes":77},"markdown-table-cell-alignment-justify-complete-guide","Markdown Table Cell Alignment and Justify: Complete Guide for Professional Data Presentation and Typography Control","Master Markdown table cell alignment techniques including left, right, center, and justify alignment. Learn CSS integration, responsive alignment, and advanced typography control for professional data presentation.","Advanced table cell alignment and justification techniques in Markdown enable sophisticated data presentation that transforms raw information into visually compelling, professionally formatted…","2025-11-11","markdown table alignment, table cell alignment, markdown table justify, table text alignment, markdown table css styling, table typography control, professional table alignment, markdown table formatting",16,1792184944632]