[{"data":1,"prerenderedAt":69},["Reactive",2],{"blog-post-markdown-table-cell-alignment-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":43,"related":44},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>Advanced table cell alignment and justification techniques in Markdown enable sophisticated data presentation that transforms raw information into visually compelling, professionally formatted content with optimal readability and visual hierarchy. While basic Markdown table syntax provides limited alignment control through column separators, modern CSS integration and responsive design principles unlock comprehensive typography control that rivals professional publishing systems.\u003C/p>\n\u003Ch2 id=\"why-master-table-cell-alignment\">Why Master Table Cell Alignment?\u003C/h2>\n\u003Cp>Professional table alignment provides essential benefits for data communication:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Strategic alignment creates clear relationships between data elements and content groups\u003C/li>\n\u003Cli>\u003Cstrong>Improved Readability\u003C/strong>: Proper text alignment reduces cognitive load and enhances scanning efficiency\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Consistent alignment elevates documentation quality and user perception\u003C/li>\n\u003Cli>\u003Cstrong>Data Type Optimization\u003C/strong>: Numeric data aligns naturally with right alignment, while text content benefits from left alignment\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Platform Consistency\u003C/strong>: CSS-controlled alignment ensures consistent presentation across different rendering engines\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-alignment-concepts\">Foundation Alignment Concepts\u003C/h2>\n\u003Ch3 id=\"basic-markdown-alignment-syntax\">Basic Markdown Alignment Syntax\u003C/h3>\n\u003Cp>Standard Markdown provides column-level alignment through separator row formatting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Markdown Table Alignment Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Left-Aligned Columns (Default)\u003C/span>\n| Name | Department | Role |\n|------|------------|------|\n| Alice Johnson | Engineering | Senior Developer |\n| Bob Smith | Marketing | Content Manager |\n| Carol Williams | Sales | Account Executive |\n\n\u003Cspan class=\"hljs-section\">## Right-Aligned Columns\u003C/span>\n| Name | Department | Salary |\n|------|------------|-------:|\n| Alice Johnson | Engineering | $95,000 |\n| Bob Smith | Marketing | $72,000 |\n| Carol Williams | Sales | $68,000 |\n\n\u003Cspan class=\"hljs-section\">## Center-Aligned Columns\u003C/span>\n| Name | Department | Status |\n|------|:----------:|:------:|\n| Alice Johnson | Engineering | Active |\n| Bob Smith | Marketing | Active |\n| Carol Williams | Sales | On Leave |\n\n\u003Cspan class=\"hljs-section\">## Mixed Alignment\u003C/span>\n| Employee | Department | Salary | Status |\n|----------|:----------:|-------:|:------:|\n| Alice Johnson | Engineering | $95,000 | Active |\n| Bob Smith | Marketing | $72,000 | Active |\n| Carol Williams | Sales | $68,000 | On Leave |\n\n\u003Cspan class=\"hljs-section\"># Alignment Syntax Reference:\u003C/span>\n\u003Cspan class=\"hljs-section\"># |:---| = Left-aligned (default)\u003C/span>\n\u003Cspan class=\"hljs-section\"># |:--:| = Center-aligned  \u003C/span>\n\u003Cspan class=\"hljs-section\"># |---:| = Right-aligned\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"css-enhanced-alignment-control\">CSS-Enhanced Alignment Control\u003C/h3>\n\u003Cp>Advanced alignment techniques using CSS integration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Foundation alignment system */\u003C/span>\n\u003Cspan class=\"hljs-selector-pseudo\">:root\u003C/span> {\n  \u003Cspan class=\"hljs-attr\">--table-text-align-left\u003C/span>: left;\n  \u003Cspan class=\"hljs-attr\">--table-text-align-center\u003C/span>: center;\n  \u003Cspan class=\"hljs-attr\">--table-text-align-right\u003C/span>: right;\n  \u003Cspan class=\"hljs-attr\">--table-text-align-justify\u003C/span>: justify;\n  \n  \u003Cspan class=\"hljs-attr\">--table-line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">--table-letter-spacing\u003C/span>: normal;\n  \u003Cspan class=\"hljs-attr\">--table-word-spacing\u003C/span>: normal;\n  \u003Cspan class=\"hljs-attr\">--table-text-indent\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Base table styling with alignment support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-line-height);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.aligned-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\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Column-specific alignment classes */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-align-left);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-center\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-align-center);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-align-right);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-justify\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: \u003Cspan class=\"hljs-built_in\">var\u003C/span>(--table-text-align-justify);\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-word;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"content-type-specific-alignment\">Content-Type Specific Alignment\u003C/h3>\n\u003Cp>Optimizing alignment based on data characteristics:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Content-aware alignment system */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-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-comment\">/* Numeric content alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Monaco, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.025em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Currency values */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.currency-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Monaco, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.currency-cell\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\">0.1em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Percentage values */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.percentage-cell\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-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.percentage-cell\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\">0.1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Date and time alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.date-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\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-comment\">/* Status indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \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.05em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Long text content with justify */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-content\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-word;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Names and identifiers */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.name-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Action buttons */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.action-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\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\">/* Icon columns */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.icon-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-line content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line-cell\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\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line-cell\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.content-aware-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.multi-line-cell\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-alignment-techniques\">Advanced Alignment Techniques\u003C/h2>\n\u003Ch3 id=\"responsive-alignment-system\">Responsive Alignment System\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Responsive alignment that adapts to screen size */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-alignment-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\">/* Desktop alignment (default) */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.responsive-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.responsive-center\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.responsive-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet adjustments */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.responsive-right\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center; \u003Cspan class=\"hljs-comment\">/* Center numeric data on tablets */\u003C/span>\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.responsive-center\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left; \u003Cspan class=\"hljs-comment\">/* Left-align center content on smaller screens */\u003C/span>\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile alignment changes */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-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>; \u003Cspan class=\"hljs-comment\">/* Force left alignment on mobile */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none; \u003Cspan class=\"hljs-comment\">/* Hide headers on mobile */\u003C/span>\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">': '\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Special mobile alignment for numeric data */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.responsive-alignment-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: auto;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"contextual-alignment-with-css-grid\">Contextual Alignment with CSS Grid\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* CSS Grid approach for precise alignment control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-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\">2\u003C/span>fr \u003Cspan class=\"hljs-number\">1\u003C/span>fr \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\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\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-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-header\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">48px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-start;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-start;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: flex-end;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-justify\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: stretch;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: flex-start;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-line content in grid cells */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: flex-start;\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grid-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.grid-cell\u003C/span>\u003Cspan class=\"hljs-selector-class\">.multi-line\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"typography-enhanced-alignment\">Typography-Enhanced Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced typography control with alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-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  \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">"kern"\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">"liga"\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Headers with enhanced typography */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.3\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-center\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.align-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced text alignment with typography features */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-center\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-justify\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-word;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-indent\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Advanced justify with hanging punctuation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.text-justify-advanced\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">hanging-punctuation\u003C/span>: first last;\n  \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: break-word;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.01em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Numeric alignment with enhanced features */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-enhanced\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums lining-nums;\n  \u003Cspan class=\"hljs-attribute\">font-feature-settings\u003C/span>: \u003Cspan class=\"hljs-string\">"tnum"\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-string\">"lnum"\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.025em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">word-spacing\u003C/span>: -\u003Cspan class=\"hljs-number\">0.1em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Decimal point alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.decimal-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\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.typography-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.decimal-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\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>; \u003Cspan class=\"hljs-comment\">/* Adjust based on typical decimal placement */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: transparent;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"implementation-examples\">Implementation Examples\u003C/h2>\n\u003Ch3 id=\"financial-report-with-mixed-alignment\">Financial Report with Mixed Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Quarterly Financial Report\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-report-container"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"aligned-table financial-report"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="col-left">Account Category</th>\n        <th class="col-center">Department</th>\n        <th class="col-right">Q3 2025</th>\n        <th class="col-right">Q4 2025</th>\n        <th class="col-right">Change</th>\n        <th class="col-center">Trend</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="revenue-section">\n        <td class="name-cell">Product Revenue</td>\n        <td class="status-cell">Sales</td>\n        <td class="currency-cell">$456,789</td>\n        <td class="currency-cell">$523,456</td>\n        <td class="percentage-cell positive">+14.6</td>\n        <td class="trend-cell">📈</td>\n      </tr>\n      <tr class="revenue-section">\n        <td class="name-cell">Service Revenue</td>\n        <td class="status-cell">Support</td>\n        <td class="currency-cell">$234,567</td>\n        <td class="currency-cell">$267,890</td>\n        <td class="percentage-cell positive">+14.2</td>\n        <td class="trend-cell">📊</td>\n      </tr>\n      <tr class="expense-section">\n        <td class="name-cell">Operating Expenses</td>\n        <td class="status-cell">Operations</td>\n        <td class="currency-cell negative">$345,678</td>\n        <td class="currency-cell negative">$378,901</td>\n        <td class="percentage-cell negative">+9.6</td>\n        <td class="trend-cell">📈</td>\n      </tr>\n      <tr class="summary-section">\n        <td class="name-cell strong">Net Income</td>\n        <td class="status-cell">Overall</td>\n        <td class="currency-cell profit">$345,678</td>\n        <td class="currency-cell profit">$412,445</td>\n        <td class="percentage-cell positive strong">+19.3</td>\n        <td class="trend-cell">🚀</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.financial-report-container {\n  margin: 2rem 0;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.financial-report {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.financial-report th {\n  padding: 18px 24px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border-bottom: 2px solid #dee2e6;\n  font-weight: 600;\n}\n\n.financial-report td {\n  padding: 14px 24px;\n  border-bottom: 1px solid #f1f3f4;\n  vertical-align: middle;\n}\n\n.financial-report .name-cell {\n  text-align: left;\n  font-weight: 500;\n}\n\n.financial-report .name-cell.strong {\n  font-weight: 700;\n  font-size: 1.05em;\n}\n\n.financial-report .status-cell {\n  text-align: center;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 0.9em;\n  color: #6c757d;\n}\n\n.financial-report .currency-cell {\n  text-align: right;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.financial-report .currency-cell.positive {\n  color: #28a745;\n}\n\n.financial-report .currency-cell.negative {\n  color: #dc3545;\n}\n\n.financial-report .currency-cell.profit {\n  color: #007bff;\n  font-weight: 600;\n}\n\n.financial-report .percentage-cell {\n  text-align: right;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n.financial-report .percentage-cell.positive {\n  color: #28a745;\n}\n\n.financial-report .percentage-cell.negative {\n  color: #dc3545;\n}\n\n.financial-report .percentage-cell.strong {\n  font-weight: 700;\n  font-size: 1.1em;\n}\n\n.financial-report .trend-cell {\n  text-align: center;\n  font-size: 1.4em;\n}\n\n.financial-report .revenue-section {\n  background-color: rgba(212, 237, 218, 0.3);\n}\n\n.financial-report .expense-section {\n  background-color: rgba(248, 215, 218, 0.3);\n}\n\n.financial-report .summary-section {\n  background-color: rgba(204, 229, 255, 0.3);\n  border-top: 2px solid #007bff;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"product-comparison-with-complex-alignment\">Product Comparison with Complex Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Feature Comparison Matrix\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"comparison-matrix-container"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"aligned-table comparison-matrix"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="col-left feature-header">Feature Description</th>\n        <th class="col-center plan-header">Basic Plan</th>\n        <th class="col-center plan-header popular">Pro Plan</th>\n        <th class="col-center plan-header">Enterprise</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr class="feature-group">\n        <td class="text-content">\n          <strong>User Management System</strong><br>\n          Comprehensive user account management with role-based permissions, \n          single sign-on integration, and advanced security controls for \n          enterprise-grade authentication workflows.\n        </td>\n        <td class="feature-value limited">Basic RBAC</td>\n        <td class="feature-value available">Full RBAC + SSO</td>\n        <td class="feature-value premium">Advanced Security</td>\n      </tr>\n      <tr class="feature-group">\n        <td class="text-content">\n          <strong>API Rate Limiting</strong><br>\n          Intelligent rate limiting with burst handling, geographic distribution, \n          and real-time monitoring to ensure optimal performance and prevent \n          system abuse while maintaining service quality.\n        </td>\n        <td class="numeric-cell">1,000/hour</td>\n        <td class="numeric-cell">50,000/hour</td>\n        <td class="feature-value premium">Unlimited</td>\n      </tr>\n      <tr class="feature-group">\n        <td class="text-content">\n          <strong>Data Analytics Dashboard</strong><br>\n          Real-time analytics with customizable dashboards, advanced reporting \n          capabilities, and machine learning insights for data-driven decision \n          making across all business operations.\n        </td>\n        <td class="feature-value unavailable">Not Available</td>\n        <td class="feature-value available">Standard Analytics</td>\n        <td class="feature-value premium">AI-Powered Insights</td>\n      </tr>\n      <tr class="feature-group">\n        <td class="text-content">\n          <strong>Customer Support</strong><br>\n          Multi-channel support system with priority routing, dedicated account \n          management, and 24/7 availability for mission-critical business \n          operations and technical assistance.\n        </td>\n        <td class="status-cell">Email Only</td>\n        <td class="status-cell">Email + Chat</td>\n        <td class="status-cell premium">Dedicated Manager</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.comparison-matrix-container {\n  margin: 2.5rem 0;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  border: 1px solid #e1e5e9;\n}\n\n.comparison-matrix {\n  margin: 0;\n  width: 100%;\n}\n\n.comparison-matrix th {\n  padding: 24px 20px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  font-weight: 600;\n  border: none;\n}\n\n.comparison-matrix .feature-header {\n  width: 45%;\n  text-align: left;\n  font-size: 1.1em;\n}\n\n.comparison-matrix .plan-header {\n  width: 18.33%;\n  text-align: center;\n  position: relative;\n}\n\n.comparison-matrix .plan-header.popular::before {\n  content: 'Most Popular';\n  position: absolute;\n  top: -3px;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: #ffd700;\n  font-size: 0.7em;\n  color: #333;\n  text-align: center;\n  line-height: 3px;\n}\n\n.comparison-matrix td {\n  padding: 24px 20px;\n  border: none;\n  border-bottom: 1px solid #f1f3f4;\n  vertical-align: top;\n  background: white;\n}\n\n.comparison-matrix .feature-group:hover {\n  background: rgba(102, 126, 234, 0.05);\n}\n\n.comparison-matrix .text-content {\n  text-align: justify;\n  line-height: 1.6;\n  hyphens: auto;\n  word-break: break-word;\n  text-align-last: left;\n}\n\n.comparison-matrix .text-content strong {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 1.1em;\n  color: #333;\n  text-align: left;\n}\n\n.comparison-matrix .feature-value {\n  text-align: center;\n  font-weight: 600;\n  font-size: 1.05em;\n  white-space: nowrap;\n}\n\n.comparison-matrix .feature-value.available {\n  color: #28a745;\n}\n\n.comparison-matrix .feature-value.limited {\n  color: #ffc107;\n}\n\n.comparison-matrix .feature-value.unavailable {\n  color: #dc3545;\n  opacity: 0.7;\n}\n\n.comparison-matrix .feature-value.premium {\n  color: #6f42c1;\n  font-weight: 700;\n}\n\n.comparison-matrix .numeric-cell {\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 600;\n  color: #495057;\n}\n\n.comparison-matrix .status-cell {\n  text-align: center;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 0.9em;\n  color: #6c757d;\n}\n\n.comparison-matrix .status-cell.premium {\n  color: #6f42c1;\n  font-weight: 700;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"technical-documentation-with-justify-alignment\">Technical Documentation with Justify Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># API Documentation Table\u003C/span>\n\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"api-docs-container"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"aligned-table api-docs"\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <thead>\n      <tr>\n        <th class="col-left">Endpoint</th>\n        <th class="col-center">Method</th>\n        <th class="col-justify">Description</th>\n        <th class="col-center">Auth Required</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td class="endpoint-cell">/api/v2/users</td>\n        <td class="method-cell get">GET</td>\n        <td class="description-cell">\n          Retrieves a paginated list of all user accounts in the system with \n          comprehensive profile information, access permissions, and activity \n          status. This endpoint supports advanced filtering parameters including \n          role-based queries, date range selections, and custom search criteria \n          to efficiently locate specific user records within large datasets.\n        </td>\n        <td class="auth-cell required">Required</td>\n      </tr>\n      <tr>\n        <td class="endpoint-cell">/api/v2/users/{id}</td>\n        <td class="method-cell get">GET</td>\n        <td class="description-cell">\n          Fetches detailed information for a specific user account identified \n          by the unique user ID parameter. The response includes complete profile \n          data, permission sets, recent activity logs, and associated metadata \n          that provides comprehensive insight into user account status and \n          configuration settings.\n        </td>\n        <td class="auth-cell required">Required</td>\n      </tr>\n      <tr>\n        <td class="endpoint-cell">/api/v2/users</td>\n        <td class="method-cell post">POST</td>\n        <td class="description-cell">\n          Creates a new user account in the system using the provided profile \n          information and initial configuration settings. This endpoint validates \n          all input parameters, enforces business rules for user creation, and \n          automatically generates secure authentication credentials while sending \n          appropriate welcome notifications through configured communication channels.\n        </td>\n        <td class="auth-cell admin">Admin Only</td>\n      </tr>\n      <tr>\n        <td class="endpoint-cell">/api/v2/users/{id}</td>\n        <td class="method-cell put">PUT</td>\n        <td class="description-cell">\n          Updates an existing user account with new profile information, permission \n          modifications, or configuration changes. The endpoint performs comprehensive \n          validation of all updated fields, maintains audit trails for security \n          compliance, and triggers appropriate notifications to affected users and \n          administrators when critical account changes are processed.\n        </td>\n        <td class="auth-cell admin">Admin Only</td>\n      </tr>\n      <tr>\n        <td class="endpoint-cell">/api/v2/users/{id}</td>\n        <td class="method-cell delete">DELETE</td>\n        <td class="description-cell">\n          Permanently removes a user account from the system after performing \n          necessary data archival and cleanup operations. This action is \n          irreversible and includes comprehensive data purging, permission \n          revocation, session invalidation, and notification delivery to ensure \n          complete account removal while maintaining system integrity and audit compliance.\n        </td>\n        <td class="auth-cell admin">Admin Only</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.api-docs-container {\n  margin: 2rem 0;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.api-docs {\n  margin: 0;\n  font-size: 0.95em;\n}\n\n.api-docs th {\n  padding: 18px 20px;\n  background: #2d3748;\n  color: white;\n  font-weight: 600;\n  border: none;\n}\n\n.api-docs td {\n  padding: 16px 20px;\n  border: none;\n  border-bottom: 1px solid #e2e8f0;\n  vertical-align: top;\n}\n\n.api-docs tbody tr:hover {\n  background-color: #f7fafc;\n}\n\n.endpoint-cell {\n  text-align: left;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 600;\n  color: #2d3748;\n  white-space: nowrap;\n  background-color: #f7fafc;\n  border-radius: 4px;\n  padding: 16px 24px !important;\n}\n\n.method-cell {\n  text-align: center;\n  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n  font-weight: 700;\n  font-size: 0.85em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  border-radius: 4px;\n  padding: 12px 16px !important;\n}\n\n.method-cell.get {\n  background-color: #48bb78;\n  color: white;\n}\n\n.method-cell.post {\n  background-color: #4299e1;\n  color: white;\n}\n\n.method-cell.put {\n  background-color: #ed8936;\n  color: white;\n}\n\n.method-cell.delete {\n  background-color: #f56565;\n  color: white;\n}\n\n.description-cell {\n  text-align: justify;\n  text-align-last: left;\n  line-height: 1.6;\n  hyphens: auto;\n  word-break: break-word;\n  max-width: 400px;\n  color: #4a5568;\n}\n\n.auth-cell {\n  text-align: center;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-size: 0.85em;\n  white-space: nowrap;\n  border-radius: 4px;\n  padding: 12px 16px !important;\n}\n\n.auth-cell.required {\n  background-color: #ffeaa7;\n  color: #2d3748;\n}\n\n.auth-cell.admin {\n  background-color: #fab1a0;\n  color: white;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-alignment-techniques\">Platform-Specific Alignment Techniques\u003C/h2>\n\u003Ch3 id=\"github-flavored-markdown\">GitHub Flavored Markdown\u003C/h3>\n\u003Cp>GitHub's table alignment syntax limitations and workarounds:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\"><!-- GitHub supports basic alignment but has limitations -->\n\n| Feature | Basic | Pro | Enterprise |\n|:--------|:-----:|----:|:----------:|\n| Users | 5 | 100 | Unlimited |\n| Storage | 1GB | 100GB | 1TB |\n| Support | Email | Priority | Dedicated |\n\n<!-- For advanced alignment, use HTML tables in GitHub -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <th align="left">Feature</th>\n    <th align="center">Basic</th>\n    <th align="right">Pro</th>\n    <th align="center">Enterprise</th>\n  </tr>\n  <tr>\n    <td>API Calls</td>\n    <td align="center">1,000</td>\n    <td align="right">50,000</td>\n    <td align="center">Unlimited</td>\n  </tr>\n</table>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-and-static-site-generators\">Jekyll and Static Site Generators\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- Jekyll include for aligned tables -->\n<!-- _includes/aligned-table.html -->\n<div class="table-container">\n  <table class="aligned-table {{ include.class }}">\n    {% if include.headers %}\n      <thead>\n        <tr>\n          {% for header in include.headers %}\n            <th class="{{ header.align | default: 'col-left' }} {{ header.class }}">\n              {{ header.text }}\n            </th>\n          {% endfor %}\n        </tr>\n      </thead>\n    {% endif %}\n    <tbody>\n      {% for row in include.rows %}\n        <tr class="{{ row.class }}">\n          {% for cell in row.cells %}\n            <td class="{{ cell.align | default: 'col-left' }} {{ cell.class }}">\n              {{ cell.content }}\n            </td>\n          {% endfor %}\n        </tr>\n      {% endfor %}\n    </tbody>\n  </table>\n</div>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Usage:\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-meta\">---\u003C/span>\n\u003Cspan class=\"hljs-attr\">pricing_table:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">headers:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">text:\u003C/span> \u003Cspan class=\"hljs-string\">"Feature"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-left"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">text:\u003C/span> \u003Cspan class=\"hljs-string\">"Basic"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-center"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">text:\u003C/span> \u003Cspan class=\"hljs-string\">"Pro"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-center"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">class:\u003C/span> \u003Cspan class=\"hljs-string\">"highlight"\u003C/span>\n  \u003Cspan class=\"hljs-attr\">rows:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">cells:\u003C/span>\n        \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">content:\u003C/span> \u003Cspan class=\"hljs-string\">"Storage"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-left"\u003C/span>\n        \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">content:\u003C/span> \u003Cspan class=\"hljs-string\">"10GB"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-center"\u003C/span>\n        \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">content:\u003C/span> \u003Cspan class=\"hljs-string\">"100GB"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">align:\u003C/span> \u003Cspan class=\"hljs-string\">"col-center"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">class:\u003C/span> \u003Cspan class=\"hljs-string\">"highlight"\u003C/span>\n\u003Cspan class=\"hljs-meta\">---\n\u003C/span>\n{\u003Cspan class=\"hljs-string\">%\u003C/span> \u003Cspan class=\"hljs-string\">include\u003C/span> \u003Cspan class=\"hljs-string\">aligned-table.html\u003C/span> \n   \u003Cspan class=\"hljs-string\">headers=page.pricing_table.headers\u003C/span> \n   \u003Cspan class=\"hljs-string\">rows=page.pricing_table.rows\u003C/span> \n   \u003Cspan class=\"hljs-string\">class="pricing-table"\u003C/span> \u003Cspan class=\"hljs-string\">%\u003C/span>}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-integration\">Hugo Shortcode Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/aligned-table.html -->\n{{ $alignment := .Get "alignment" | default "mixed" }}\n{{ $responsive := .Get "responsive" | default true }}\n\n<div class="table-wrapper alignment-{{ $alignment }}{{ if $responsive }} responsive{{ end }}">\n  <table class="aligned-table">\n    {{ .Inner | markdownify }}\n  </table>\n</div>\n\n<style>\n.alignment-left table th,\n.alignment-left table td {\n  text-align: left;\n}\n\n.alignment-center table th,\n.alignment-center table td {\n  text-align: center;\n}\n\n.alignment-right table th,\n.alignment-right table td {\n  text-align: right;\n}\n\n.alignment-mixed table th:nth-child(1),\n.alignment-mixed table td:nth-child(1) {\n  text-align: left;\n}\n\n.alignment-mixed table th:nth-child(2),\n.alignment-mixed table td:nth-child(2) {\n  text-align: center;\n}\n\n.alignment-mixed table th:nth-child(3),\n.alignment-mixed table td:nth-child(3) {\n  text-align: right;\n}\n\n@media (max-width: 768px) {\n  .table-wrapper.responsive table th,\n  .table-wrapper.responsive table td {\n    text-align: left !important;\n  }\n}\n</style>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-performance-optimization\">Accessibility and Performance Optimization\u003C/h2>\n\u003Ch3 id=\"screen-reader-compatible-alignment\">Screen Reader Compatible Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Accessible alignment with screen reader support */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left; \u003Cspan class=\"hljs-comment\">/* Always left-align headers for accessibility */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Numeric data alignment with accessibility considerations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-data\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\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-data\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\">9999px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-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\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.accessible-aligned-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.25rem\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-aligned-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\">.accessible-aligned-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\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#4c90f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">3px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">76\u003C/span>, \u003Cspan class=\"hljs-number\">144\u003C/span>, \u003Cspan class=\"hljs-number\">240\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-optimized-alignment\">Performance-Optimized Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Efficient alignment with minimal reflows */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style paint;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">text-overflow\u003C/span>: ellipsis;\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n  \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: contents;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Use transform for alignment to avoid reflows */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.align-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.align-center\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Minimize repaint regions */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation-systems\">Integration with Modern Documentation Systems\u003C/h2>\n\u003Cp>Table cell alignment and justify techniques integrate seamlessly with comprehensive Markdown documentation workflows. When combined with \u003Ca href=\"/blog/markdown-table-responsive-design-complete-guide\">responsive table design principles\u003C/a>, proper alignment ensures optimal data presentation across desktop, tablet, and mobile viewing contexts while maintaining professional appearance and functional accessibility.\u003C/p>\n\u003Cp>For technical documentation systems, alignment control works effectively with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting capabilities\u003C/a> to create code documentation tables that present API references, configuration options, and command specifications in scannable, professionally formatted layouts that enhance developer productivity.\u003C/p>\n\u003Cp>When building comprehensive content architectures, table alignment complements \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows\u003C/a> to ensure that programmatically generated tables maintain consistent formatting standards and alignment principles across all documentation deliverables.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-alignment-issues\">Troubleshooting Common Alignment Issues\u003C/h2>\n\u003Ch3 id=\"inconsistent-column-widths\">Inconsistent Column Widths\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Text alignment appears inconsistent due to varying column widths\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Fix column widths for consistent alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.fixed-width-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.fixed-width-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-narrow\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">20%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.fixed-width-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-medium\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">30%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.fixed-width-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.col-wide\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Alternative: Use CSS Grid for precise control */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.grid-width-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\">2\u003C/span>fr \u003Cspan class=\"hljs-number\">1\u003C/span>fr \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\">1px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-alignment-breaking\">Mobile Alignment Breaking\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Complex alignment breaks on mobile devices\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Progressive enhancement for mobile alignment */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> screen \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">767px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\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    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\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\">.mobile-safe-alignment\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">attr\u003C/span>(data-label) \u003Cspan class=\"hljs-string\">': '\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">140px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Preserve numeric alignment on mobile */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.mobile-safe-alignment\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">140px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: -\u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"justify-text-performance-issues\">Justify Text Performance Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Text justification causing layout thrashing\u003Cbr>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Optimize justify performance */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.performance-justify\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">text-align-last\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">hyphens\u003C/span>: manual; \u003Cspan class=\"hljs-comment\">/* Avoid automatic hyphenation */\u003C/span>\n  \u003Cspan class=\"hljs-attribute\">word-break\u003C/span>: normal;\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Use CSS containment to isolate reflows */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.performance-justify-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style paint;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: justify;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced table cell alignment and justify techniques in Markdown transform basic data presentation into sophisticated, professionally formatted content that optimizes readability, visual hierarchy, and user comprehension across all viewing contexts. By mastering CSS integration, responsive alignment strategies, and accessibility-compliant implementations, content creators can produce tables that serve both functional and aesthetic requirements while maintaining performance standards.\u003C/p>\n\u003Cp>The key to successful table alignment lies in understanding the relationship between content types, visual design principles, and user experience requirements, then applying these insights consistently throughout your documentation workflow. Whether you're presenting financial data, feature comparisons, or technical specifications, the techniques covered in this guide provide the foundation for professional table formatting that enhances information accessibility and user engagement.\u003C/p>\n\u003Cp>Remember to test your alignment implementations across different devices and browsers, validate accessibility compliance for screen readers and keyboard navigation, and optimize for performance when handling complex layouts with extensive justify formatting. With proper cell alignment and typography control, your Markdown tables become powerful communication tools that balance visual appeal with functional clarity, creating documentation that truly serves your audience's information needs and professional standards.\u003C/p>\n",[15,19,22,25,28,31,34,37,40],{"id":16,"text":17,"level":18},"why-master-table-cell-alignment","Why Master Table Cell Alignment?",2,{"id":20,"text":21,"level":18},"foundation-alignment-concepts","Foundation Alignment Concepts",{"id":23,"text":24,"level":18},"advanced-alignment-techniques","Advanced Alignment Techniques",{"id":26,"text":27,"level":18},"implementation-examples","Implementation Examples",{"id":29,"text":30,"level":18},"platform-specific-alignment-techniques","Platform-Specific Alignment Techniques",{"id":32,"text":33,"level":18},"accessibility-and-performance-optimization","Accessibility and Performance Optimization",{"id":35,"text":36,"level":18},"integration-with-modern-documentation-systems","Integration with Modern Documentation Systems",{"id":38,"text":39,"level":18},"troubleshooting-common-alignment-issues","Troubleshooting Common Alignment Issues",{"id":41,"text":42,"level":18},"conclusion","Conclusion",[],[45,53,61],{"slug":46,"title":47,"description":48,"excerpt":49,"date":50,"category":9,"author":10,"keywords":51,"readingMinutes":52},"markdown-table-column-width-alignment-complete-guide","Markdown Table Column Width and Alignment: Complete Guide for Professional Data Presentation and Layout Control","Master table column width and alignment controls in Markdown for professional data presentation. Learn CSS integration, responsive design techniques, and advanced table formatting for optimal readability and visual organization.","Table column width and alignment control in Markdown enables professional data presentation that transforms basic tabular information into visually organized, responsive layouts with precise…","2025-09-14","markdown table width, table column alignment, markdown table css, responsive tables markdown, table formatting markdown, professional table design, markdown data presentation, table layout control",19,{"slug":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":60},"markdown-table-column-alignment-and-formatting-complete-guide","Markdown Table Column Alignment and Advanced Formatting: Complete Guide to Professional Data Presentation and Layout Control","Master advanced Markdown table column alignment, formatting techniques, and professional data presentation strategies. Learn alignment methods, width control, and visual formatting for comprehensive table design.","Advanced Markdown table column alignment and formatting techniques enable sophisticated data presentation that enhances readability, maintains visual consistency, and provides professional-quality…","2025-12-15","markdown table alignment, table column formatting, markdown table layout, table data alignment, markdown table width, table formatting guide, professional markdown tables, table presentation",18,{"slug":62,"title":63,"description":64,"excerpt":65,"date":66,"category":9,"author":10,"keywords":67,"readingMinutes":68},"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,1792184944619]