[{"data":1,"prerenderedAt":72},["Reactive",2],{"blog-post-markdown-table-cell-merging-and-advanced-formatting-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":46,"related":47},"markdown-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","Tutorial","Matthew Rathbone","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,"\u003Cp>Advanced Markdown table formatting with cell merging, spanning, and complex layout capabilities transforms basic data presentation into sophisticated information architecture that supports complex data relationships, hierarchical content organization, and professional document formatting. By mastering cell spanning techniques, advanced formatting patterns, and responsive table design principles, technical writers can create comprehensive data presentations that maintain readability across diverse viewing contexts while preserving semantic meaning and accessibility standards.\u003C/p>\n\u003Ch2 id=\"why-master-advanced-table-formatting\">Why Master Advanced Table Formatting?\u003C/h2>\n\u003Cp>Professional table formatting provides essential benefits for complex data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Data Relationships\u003C/strong>: Express hierarchical and grouped data relationships through merged cells and spanning\u003C/li>\n\u003Cli>\u003Cstrong>Visual Clarity\u003C/strong>: Improve comprehension through strategic cell merging and logical grouping\u003C/li>\n\u003Cli>\u003Cstrong>Space Efficiency\u003C/strong>: Maximize information density while maintaining readability\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Create publication-ready tables that meet professional standards\u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Ensure table functionality across different screen sizes and viewing contexts\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-concepts-for-cell-merging\">Foundation Concepts for Cell Merging\u003C/h2>\n\u003Ch3 id=\"understanding-markdown-table-limitations\">Understanding Markdown Table Limitations\u003C/h3>\n\u003Cp>Standard Markdown has inherent limitations for complex table structures:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Standard Markdown Table Limitations\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Basic Table Structure\u003C/span>\n| Column 1 | Column 2 | Column 3 |\n|----------|----------|----------|\n| Cell A   | Cell B   | Cell C   |\n| Cell D   | Cell E   | Cell F   |\n\n\u003Cspan class=\"hljs-section\">## What Standard Markdown Cannot Do:\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Cell merging/spanning across rows or columns\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Complex header hierarchies\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Nested table structures\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Variable column widths\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Advanced styling and formatting\n\n\u003Cspan class=\"hljs-section\">## Workarounds Required:\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> HTML integration for advanced features\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Extended syntax processors\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Custom CSS styling\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> JavaScript enhancement for interactivity\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-integration-for-advanced-features\">HTML Integration for Advanced Features\u003C/h3>\n\u003Cp>Implementing cell merging through strategic HTML integration:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># HTML-Enhanced Markdown Tables\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Basic Cell Spanning with HTML\u003C/span>\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\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr>\n      <th>Product Category</th>\n      <th colspan="2">Sales Data</th>\n      <th rowspan="2">Total</th>\n    </tr>\n    <tr>\n      <th></th>\n      <th>Q1</th>\n      <th>Q2</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Software</td>\n      <td>$125,000</td>\n      <td>$148,000</td>\n      <td rowspan="2">$495,000</td>\n    </tr>\n    <tr>\n      <td>Hardware</td>\n      <td>$98,000</td>\n      <td>$124,000</td>\n    </tr>\n  </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Mixed Markdown and HTML Approach\u003C/span>\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 colspan="3">Project Status Overview</th>\n  </tr>\n  <tr>\n    <td rowspan="2">Development Phase</td>\n    <td>**Frontend**</td>\n    <td>\n      - React components: 85% complete\n      - Testing coverage: 92%\n      - *Target completion: Dec 15*\n    </td>\n  </tr>\n  <tr>\n    <td>**Backend**</td>\n    <td>\n      - API endpoints: 78% complete\n      - Database schema: 100% complete\n      - *Target completion: Dec 20*\n    </td>\n  </tr>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Advantages of HTML Integration:\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Full control over cell spanning\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Support for complex header structures\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Ability to nest Markdown content within HTML cells\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Professional table appearance\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Semantic HTML structure for accessibility\n\u003C/code>\u003C/pre>\u003Ch3 id=\"extended-markdown-processors\">Extended Markdown Processors\u003C/h3>\n\u003Cp>Leveraging processors with enhanced table capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Extended Markdown Table Features\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## GridTables (Pandoc)\u003C/span>\n\u003Cspan class=\"hljs-code\">```\n+===============+===============+===============+\n| Header 1      | Header 2      | Header 3      |\n+===============+===============+===============+\n| Row 1 Col 1   | Row 1 Col 2   | Row 1 Col 3   |\n+---------------+---------------+---------------+\n| Row 2 spans   | Row 2 Col 2   | Row 2 Col 3   |\n| multiple rows |               |               |\n+---------------+---------------+---------------+\n| Row 3 Col 1   | Row 3 spans multiple columns |\n+---------------+-------------------------------+\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Pipe Tables with Extensions\u003C/span>\n\u003Cspan class=\"hljs-code\">```\n| Feature          | Basic | Pro   | Enterprise |\n|------------------|:-----:|:-----:|:----------:|\n| User Accounts    |  10   |  100  |  Unlimited |\n| Storage          | 1GB   | 10GB  |            |\n| ^                |       |       | Unlimited  |\n| Support          | Email | Email | 24/7 Phone |\n| ^                |       | Chat  | ^          |\n| Custom Branding  |   ❌  |   ✅  |     ✅     |\n```\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## MultiMarkdown Features\u003C/span>\n\u003Cspan class=\"hljs-code\">```\n|             |          Grouping           ||\n| First Header  | Second Header | Third Header |\n| ------------- | :-----------: | -----------: |\n| Content       |          *Long Cell*        ||\n| Content       |   **Cell**    |         Cell |\n\n| New section   |     More      |         Data |\n| And more      | With an escaped '\\|'       ||\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-cell-merging-techniques\">Advanced Cell Merging Techniques\u003C/h2>\n\u003Ch3 id=\"hierarchical-data-presentation\">Hierarchical Data Presentation\u003C/h3>\n\u003Cp>Creating structured data hierarchies through strategic cell merging:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Complex hierarchical data table with multiple spanning levels -->\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\">"hierarchical-data"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Organization\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>Performance Metrics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Revenue\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Growth\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Q3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Q4\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>YoY\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>QoQ\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Technology Division\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$2.4M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$2.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+15%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+12%\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Above Target\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Product Development\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+22%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+8%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Infrastructure\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+8%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+18%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Sales Division\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$1.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$2.1M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+18%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+15%\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>On Target\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Enterprise Sales\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+25%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>+12%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"complex-comparison-tables\">Complex Comparison Tables\u003C/h3>\n\u003Cp>Implementing sophisticated comparison structures:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Feature comparison table with grouped categories -->\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\">"feature-comparison"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Feature Category\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Feature\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Subscription Tiers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Basic\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Professional\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Enterprise\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Core Features\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>User Accounts\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Up to 5\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Up to 50\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Unlimited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Storage Space\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1 GB\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>100 GB\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Unlimited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>API Calls/Month\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>10,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Unlimited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Project Workspaces\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>10\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Unlimited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Advanced Features\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Custom Integrations\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>❌\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>✅\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>✅\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Advanced Analytics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>❌\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Limited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Full Suite\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>White-label Options\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>❌\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>❌\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>✅\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Support\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Response Time\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>48 hours\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>24 hours\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>4 hours\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Support Channels\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Email\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Email, Chat\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Email, Chat, Phone\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"multi-level-header-structures\">Multi-Level Header Structures\u003C/h3>\n\u003Cp>Creating complex header hierarchies with spanning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Multi-level header structure for complex data relationships -->\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\">"multi-level-headers"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>Product\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"6"\u003C/span>>\u003C/span>Sales Performance\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>Inventory\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>2024 Data\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>2023 Data\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Revenue\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Units\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Revenue\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Units\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Gross\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Net\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Gross\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Net\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Software Licenses\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$450,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$382,500\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1,250\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$398,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$338,300\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>1,105\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Digital\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Enterprise: 78% | SMB: 22%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Enterprise: 82% | SMB: 18%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Hardware Products\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$275,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$192,500\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>850\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$245,000\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$171,500\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>780\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>450 units\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Servers: 65% | Workstations: 35%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Servers: 60% | Workstations: 40%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"styling-and-visual-enhancement\">Styling and Visual Enhancement\u003C/h2>\n\u003Ch3 id=\"css-integration-for-professional-tables\">CSS Integration for Professional Tables\u003C/h3>\n\u003Cp>Advanced styling techniques for merged cell tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Professional table styling for complex structures */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\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>, Helvetica, Arial, sans-serif;\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-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\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\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Header styling with gradient background */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Multi-level header differentiation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>) \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#89a9f5\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#9b7bc4\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(\u003Cspan class=\"hljs-number\">3\u003C/span>) \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#a4bdf7\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#b89dd4\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Row grouping and hierarchy */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[rowspan]\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\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#667eea\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: middle;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-child\u003C/span>(even) {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Numeric data alignment */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.numeric\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    \u003Cspan class=\"hljs-attribute\">font-variant-numeric\u003C/span>: tabular-nums;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Monaco, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, \u003Cspan class=\"hljs-string\">'Roboto Mono'\u003C/span>, monospace;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-positive\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    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-warning\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    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-negative\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    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive table design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.professional-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\">/* Stack complex headers on mobile */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.professional-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\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\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);\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\">width\u003C/span>: \u003Cspan class=\"hljs-number\">45%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print-friendly styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.professional-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n        -webkit-print-\u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: exact;\n        print-\u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: exact;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-formatting-patterns\">Advanced Formatting Patterns\u003C/h3>\n\u003Cp>Implementing sophisticated table formatting with HTML and CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Table Formatting Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Project Timeline with Merged Phases\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\">"professional-table project-timeline"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr>\n      <th rowspan="2">Project Phase</th>\n      <th colspan="4">Timeline (Weeks)</th>\n      <th rowspan="2">Resources</th>\n      <th rowspan="2">Deliverables</th>\n    </tr>\n    <tr>\n      <th>Start</th>\n      <th>Duration</th>\n      <th>End</th>\n      <th>Status</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan="3"><strong>Planning & Design</strong></td>\n      <td class="numeric">Week 1</td>\n      <td class="numeric">2</td>\n      <td class="numeric">Week 2</td>\n      <td><span class="status-positive">Complete</span></td>\n      <td>3 designers</td>\n      <td rowspan="3">\n        • Requirements document<br>\n        • System architecture<br>\n        • UI/UX mockups<br>\n        • Technical specifications\n      </td>\n    </tr>\n    <tr>\n      <td colspan="2"><em>Requirements Gathering</em></td>\n      <td class="numeric">Week 2</td>\n      <td><span class="status-positive">Complete</span></td>\n      <td>2 analysts</td>\n    </tr>\n    <tr>\n      <td colspan="2"><em>Architecture Design</em></td>\n      <td class="numeric">Week 3</td>\n      <td><span class="status-positive">Complete</span></td>\n      <td>2 architects</td>\n    </tr>\n    <tr>\n      <td rowspan="2"><strong>Development</strong></td>\n      <td class="numeric">Week 4</td>\n      <td class="numeric">8</td>\n      <td class="numeric">Week 11</td>\n      <td><span class="status-warning">In Progress</span></td>\n      <td>6 developers</td>\n      <td rowspan="2">\n        • Core functionality<br>\n        • API endpoints<br>\n        • Database implementation<br>\n        • Unit test coverage\n      </td>\n    </tr>\n    <tr>\n      <td colspan="2"><em>Frontend: 75% | Backend: 60%</em></td>\n      <td class="numeric">Week 11</td>\n      <td><span class="status-warning">In Progress</span></td>\n      <td>2 QA engineers</td>\n    </tr>\n    <tr>\n      <td><strong>Testing & Launch</strong></td>\n      <td class="numeric">Week 12</td>\n      <td class="numeric">3</td>\n      <td class="numeric">Week 14</td>\n      <td><span class="status-negative">Pending</span></td>\n      <td>4 engineers</td>\n      <td>\n        • Integration testing<br>\n        • Performance optimization<br>\n        • Production deployment<br>\n        • User acceptance testing\n      </td>\n    </tr>\n  </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Financial Data with Complex Grouping\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\">"professional-table financial-data"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr>\n      <th rowspan="3">Business Unit</th>\n      <th colspan="6">Financial Performance (in thousands)</th>\n      <th rowspan="3">YoY Change</th>\n    </tr>\n    <tr>\n      <th colspan="3">Q4 2024</th>\n      <th colspan="3">Q4 2023</th>\n    </tr>\n    <tr>\n      <th>Revenue</th>\n      <th>Costs</th>\n      <th>Profit</th>\n      <th>Revenue</th>\n      <th>Costs</th>\n      <th>Profit</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan="4"><strong>Technology Solutions</strong></td>\n      <td class="numeric">$2,450</td>\n      <td class="numeric">$1,680</td>\n      <td class="numeric">$770</td>\n      <td class="numeric">$2,120</td>\n      <td class="numeric">$1,590</td>\n      <td class="numeric">$530</td>\n      <td class="numeric">+45.3%</td>\n    </tr>\n    <tr>\n      <td colspan="3"><em>Software Development</em></td>\n      <td colspan="3"><em>Primary growth driver</em></td>\n      <td class="numeric">+52%</td>\n    </tr>\n    <tr>\n      <td colspan="3"><em>Cloud Services</em></td>\n      <td colspan="3"><em>Expanding market share</em></td>\n      <td class="numeric">+38%</td>\n    </tr>\n    <tr>\n      <td colspan="6"><strong>Key Metrics:</strong> Customer retention: 94% | New clients: 47</td>\n      <td><span class="status-positive">Strong</span></td>\n    </tr>\n    <tr>\n      <td rowspan="3"><strong>Consulting Services</strong></td>\n      <td class="numeric">$1,890</td>\n      <td class="numeric">$1,420</td>\n      <td class="numeric">$470</td>\n      <td class="numeric">$1,750</td>\n      <td class="numeric">$1,380</td>\n      <td class="numeric">$370</td>\n      <td class="numeric">+27.0%</td>\n    </tr>\n    <tr>\n      <td colspan="3"><em>Strategic Consulting</em></td>\n      <td colspan="3"><em>Premium service tier</em></td>\n      <td class="numeric">+31%</td>\n    </tr>\n    <tr>\n      <td colspan="6"><strong>Key Metrics:</strong> Project completion rate: 98% | Client satisfaction: 4.8/5</td>\n      <td><span class="status-positive">Excellent</span></td>\n    </tr>\n  </tbody>\n</table>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-table-design\">Responsive Table Design\u003C/h2>\n\u003Ch3 id=\"mobile-friendly-complex-tables\">Mobile-Friendly Complex Tables\u003C/h3>\n\u003Cp>Implementing responsive behavior for tables with merged cells:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Responsive table with data attributes for mobile labels -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-complex-table"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Product\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Performance Metrics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Sales\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Satisfaction\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Market Share\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Product"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Enterprise Software\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sales"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>>\u003C/span>$4.2M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Satisfaction"\u003C/span>>\u003C/span>4.6/5\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Market Share"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>>\u003C/span>23%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-positive"\u003C/span>>\u003C/span>Growing\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Product"\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Key Success Factors: Strong enterprise partnerships, robust feature set, excellent support\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Details"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-positive"\u003C/span>>\u003C/span>+15% YoY\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Product"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Mobile Applications\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sales"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>>\u003C/span>$2.8M\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Satisfaction"\u003C/span>>\u003C/span>4.2/5\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Market Share"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>>\u003C/span>18%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Status"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-warning"\u003C/span>>\u003C/span>Stable\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"adaptive-layout-strategies\">Adaptive Layout Strategies\u003C/h3>\n\u003Cp>CSS strategies for complex table responsiveness:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced responsive table strategies */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-complex-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\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop and tablet view */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">769px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile view - convert to card-like layout */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">9999px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\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\">16px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\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.1\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#eee\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">40%\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-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\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n        \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Handle merged cells in mobile view */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[colspan]\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n        \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n        \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.responsive-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[colspan]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:before\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">"Details: "\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Horizontal scrolling fallback for very complex tables */\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\">1rem\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-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-attribute\">overflow-x\u003C/span>: scroll;\n        -webkit-\u003Cspan class=\"hljs-attribute\">overflow\u003C/span>-scrolling: touch;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-and-semantic-structure\">Accessibility and Semantic Structure\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cp>Implementing accessible complex table structures:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible complex table with proper semantic markup -->\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\">"accessible-complex-table"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-caption"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-caption"\u003C/span>>\u003C/span>\n    Quarterly Performance Analysis by Business Division\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-summary"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n      This table presents quarterly performance data organized by business division, \n      showing revenue, costs, and profit figures for Q4 2024 compared to Q4 2023, \n      with year-over-year change percentages.\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"division-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Business Division"\u003C/span>>\u003C/span>\n        Business Division\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\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"6"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Financial Performance Data"\u003C/span>>\u003C/span>\n        Financial Performance (in thousands)\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\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"change-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Year over Year Change Percentage"\u003C/span>>\u003C/span>\n        YoY Change\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\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q4-2024-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Quarter 4 2024 Data"\u003C/span>>\u003C/span>\n        Q4 2024\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\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"q4-2023-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Quarter 4 2023 Data"\u003C/span>>\u003C/span>\n        Q4 2023\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\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2024-header"\u003C/span>>\u003C/span>Revenue\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2024-header"\u003C/span>>\u003C/span>Costs\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2024-header"\u003C/span>>\u003C/span>Profit\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2023-header"\u003C/span>>\u003C/span>Revenue\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2023-header"\u003C/span>>\u003C/span>Costs\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"performance-header q4-2023-header"\u003C/span>>\u003C/span>Profit\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"division-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Technology Solutions\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\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\">td\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2024-header"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2024 Revenue"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>2,450\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2024-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2024 Costs"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>1,680\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2024-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2024 Profit"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>770\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2023-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2023 Revenue"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>2,120\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2023-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2023 Costs"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>1,590\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division performance-header q4-2023-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Q4 2023 Profit"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>530\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> thousand dollars\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division change-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Year over Year Change"\u003C/span>>\u003C/span>\n        +45.3\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\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>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span> percent increase\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\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"6"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Technology Solutions Additional Details"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">em\u003C/span>>\u003C/span>Key growth drivers: Software Development (+52%) and Cloud Services (+38%)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">em\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\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">"tech-division change-header"\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-positive"\u003C/span> \n              \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \n              \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Strong performance indicator"\u003C/span>>\u003C/span>Strong Growth\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\n\u003Cspan class=\"hljs-comment\"><!-- Screen reader only styles -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\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 indicators for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-complex-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-complex-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\">#4285f4\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-complex-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\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\">.accessible-complex-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-table-generation-tools\">Advanced Table Generation Tools\u003C/h2>\n\u003Ch3 id=\"python-based-table-generator\">Python-Based Table Generator\u003C/h3>\n\u003Cp>Automated complex table generation with merging capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># advanced_table_generator.py - Complex Markdown table generation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> typing \u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-type\">List\u003C/span>, \u003Cspan class=\"hljs-type\">Dict\u003C/span>, \u003Cspan class=\"hljs-type\">Optional\u003C/span>, \u003Cspan class=\"hljs-type\">Tuple\u003C/span>, \u003Cspan class=\"hljs-type\">Union\u003C/span>\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> dataclasses \u003Cspan class=\"hljs-keyword\">import\u003C/span> dataclass\n\u003Cspan class=\"hljs-keyword\">from\u003C/span> enum \u003Cspan class=\"hljs-keyword\">import\u003C/span> Enum\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> html\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">CellAlignment\u003C/span>(\u003Cspan class=\"hljs-title class_ inherited__\">Enum\u003C/span>):\n    LEFT = \u003Cspan class=\"hljs-string\">"left"\u003C/span>\n    CENTER = \u003Cspan class=\"hljs-string\">"center"\u003C/span>\n    RIGHT = \u003Cspan class=\"hljs-string\">"right"\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">CellType\u003C/span>(\u003Cspan class=\"hljs-title class_ inherited__\">Enum\u003C/span>):\n    HEADER = \u003Cspan class=\"hljs-string\">"th"\u003C/span>\n    DATA = \u003Cspan class=\"hljs-string\">"td"\u003C/span>\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableCell\u003C/span>:\n    content: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    cell_type: CellType = CellType.DATA\n    colspan: \u003Cspan class=\"hljs-built_in\">int\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>\n    rowspan: \u003Cspan class=\"hljs-built_in\">int\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>\n    alignment: CellAlignment = CellAlignment.LEFT\n    css_classes: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__post_init__\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>):\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.css_classes \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n            self.css_classes = []\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.attributes \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n            self.attributes = {}\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableRow\u003C/span>:\n    cells: \u003Cspan class=\"hljs-type\">List\u003C/span>[TableCell]\n    css_classes: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__post_init__\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>):\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.css_classes \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n            self.css_classes = []\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.attributes \u003Cspan class=\"hljs-keyword\">is\u003C/span> \u003Cspan class=\"hljs-literal\">None\u003C/span>:\n            self.attributes = {}\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedTableBuilder\u003C/span>:\n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">__init__\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>):\n        self.headers: \u003Cspan class=\"hljs-type\">List\u003C/span>[TableRow] = []\n        self.body_rows: \u003Cspan class=\"hljs-type\">List\u003C/span>[TableRow] = []\n        self.footer_rows: \u003Cspan class=\"hljs-type\">List\u003C/span>[TableRow] = []\n        self.table_attributes: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-built_in\">str\u003C/span>] = {}\n        self.table_classes: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = []\n        self.caption: \u003Cspan class=\"hljs-type\">Optional\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">set_caption\u003C/span>(\u003Cspan class=\"hljs-params\">self, caption: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Set table caption"""\u003C/span>\n        self.caption = caption\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">add_table_class\u003C/span>(\u003Cspan class=\"hljs-params\">self, class_name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Add CSS class to table element"""\u003C/span>\n        self.table_classes.append(class_name)\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">set_table_attribute\u003C/span>(\u003Cspan class=\"hljs-params\">self, name: \u003Cspan class=\"hljs-built_in\">str\u003C/span>, value: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Set table attribute"""\u003C/span>\n        self.table_attributes[name] = value\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">add_header_row\u003C/span>(\u003Cspan class=\"hljs-params\">self, cells: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Union\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, TableCell]]\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Add header row to table"""\u003C/span>\n        processed_cells = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> cells:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(cell, \u003Cspan class=\"hljs-built_in\">str\u003C/span>):\n                processed_cells.append(TableCell(content=cell, cell_type=CellType.HEADER))\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                cell.cell_type = CellType.HEADER\n                processed_cells.append(cell)\n        \n        self.headers.append(TableRow(cells=processed_cells))\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">add_data_row\u003C/span>(\u003Cspan class=\"hljs-params\">self, cells: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Union\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, TableCell]]\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Add data row to table body"""\u003C/span>\n        processed_cells = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> cells:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(cell, \u003Cspan class=\"hljs-built_in\">str\u003C/span>):\n                processed_cells.append(TableCell(content=cell))\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                processed_cells.append(cell)\n                \n        self.body_rows.append(TableRow(cells=processed_cells))\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">add_footer_row\u003C/span>(\u003Cspan class=\"hljs-params\">self, cells: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Union\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, TableCell]]\u003C/span>) -> \u003Cspan class=\"hljs-string\">'AdvancedTableBuilder'\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Add footer row to table"""\u003C/span>\n        processed_cells = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> cells:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-built_in\">isinstance\u003C/span>(cell, \u003Cspan class=\"hljs-built_in\">str\u003C/span>):\n                processed_cells.append(TableCell(content=cell))\n            \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                processed_cells.append(cell)\n                \n        self.footer_rows.append(TableRow(cells=processed_cells))\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_html\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate HTML table with complex structure"""\u003C/span>\n        html_parts = []\n        \n        \u003Cspan class=\"hljs-comment\"># Table opening tag\u003C/span>\n        table_attrs = []\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.table_classes:\n            table_attrs.append(\u003Cspan class=\"hljs-string\">f'class="\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span>.join(self.table_classes)}\u003C/span>"'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> attr_name, attr_value \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.table_attributes.items():\n            table_attrs.append(\u003Cspan class=\"hljs-string\">f'\u003Cspan class=\"hljs-subst\">{attr_name}\u003C/span>="\u003Cspan class=\"hljs-subst\">{html.escape(attr_value)}\u003C/span>"'\u003C/span>)\n            \n        table_tag = \u003Cspan class=\"hljs-string\">f'<table\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span> + \u003Cspan class=\"hljs-string\">" "\u003C/span>.join(table_attrs) \u003Cspan class=\"hljs-keyword\">if\u003C/span> table_attrs \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span>}\u003C/span>>'\u003C/span>\n        html_parts.append(table_tag)\n        \n        \u003Cspan class=\"hljs-comment\"># Caption\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.caption:\n            html_parts.append(\u003Cspan class=\"hljs-string\">f"  <caption>\u003Cspan class=\"hljs-subst\">{html.escape(self.caption)}\u003C/span></caption>"\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.headers:\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  <thead>"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.headers:\n                html_parts.append(\u003Cspan class=\"hljs-string\">"    "\u003C/span> + self._generate_row_html(row))\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  </thead>"\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Body\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.body_rows:\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  <tbody>"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.body_rows:\n                html_parts.append(\u003Cspan class=\"hljs-string\">"    "\u003C/span> + self._generate_row_html(row))\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  </tbody>"\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Footer\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> self.footer_rows:\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  <tfoot>"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> self.footer_rows:\n                html_parts.append(\u003Cspan class=\"hljs-string\">"    "\u003C/span> + self._generate_row_html(row))\n            html_parts.append(\u003Cspan class=\"hljs-string\">"  </tfoot>"\u003C/span>)\n            \n        html_parts.append(\u003Cspan class=\"hljs-string\">"</table>"\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">"\\n"\u003C/span>.join(html_parts)\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">_generate_row_html\u003C/span>(\u003Cspan class=\"hljs-params\">self, row: TableRow\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate HTML for a single row"""\u003C/span>\n        row_attrs = []\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> row.css_classes:\n            row_attrs.append(\u003Cspan class=\"hljs-string\">f'class="\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span>.join(row.css_classes)}\u003C/span>"'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> attr_name, attr_value \u003Cspan class=\"hljs-keyword\">in\u003C/span> row.attributes.items():\n            row_attrs.append(\u003Cspan class=\"hljs-string\">f'\u003Cspan class=\"hljs-subst\">{attr_name}\u003C/span>="\u003Cspan class=\"hljs-subst\">{html.escape(attr_value)}\u003C/span>"'\u003C/span>)\n            \n        row_tag_open = \u003Cspan class=\"hljs-string\">f'<tr\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span> + \u003Cspan class=\"hljs-string\">" "\u003C/span>.join(row_attrs) \u003Cspan class=\"hljs-keyword\">if\u003C/span> row_attrs \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span>}\u003C/span>>'\u003C/span>\n        \n        cell_html = []\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> row.cells:\n            cell_html.append(\u003Cspan class=\"hljs-string\">"      "\u003C/span> + self._generate_cell_html(cell))\n            \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{row_tag_open}\u003C/span>\\n"\u003C/span> + \u003Cspan class=\"hljs-string\">"\\n"\u003C/span>.join(cell_html) + \u003Cspan class=\"hljs-string\">"\\n    </tr>"\u003C/span>\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">_generate_cell_html\u003C/span>(\u003Cspan class=\"hljs-params\">self, cell: TableCell\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate HTML for a single cell"""\u003C/span>\n        tag_name = cell.cell_type.value\n        \n        cell_attrs = []\n        \n        \u003Cspan class=\"hljs-comment\"># Add colspan and rowspan if greater than 1\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.colspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n            cell_attrs.append(\u003Cspan class=\"hljs-string\">f'colspan="\u003Cspan class=\"hljs-subst\">{cell.colspan}\u003C/span>"'\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.rowspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n            cell_attrs.append(\u003Cspan class=\"hljs-string\">f'rowspan="\u003Cspan class=\"hljs-subst\">{cell.rowspan}\u003C/span>"'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Add CSS classes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.css_classes:\n            cell_attrs.append(\u003Cspan class=\"hljs-string\">f'class="\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span>.join(cell.css_classes)}\u003C/span>"'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Add alignment\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.alignment != CellAlignment.LEFT:\n            style_parts = []\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.alignment == CellAlignment.CENTER:\n                style_parts.append(\u003Cspan class=\"hljs-string\">"text-align: center"\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">elif\u003C/span> cell.alignment == CellAlignment.RIGHT:\n                style_parts.append(\u003Cspan class=\"hljs-string\">"text-align: right"\u003C/span>)\n            \n            existing_style = cell.attributes.get(\u003Cspan class=\"hljs-string\">"style"\u003C/span>, \u003Cspan class=\"hljs-string\">""\u003C/span>)\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> existing_style:\n                style_parts.append(existing_style)\n                \n            cell_attrs.append(\u003Cspan class=\"hljs-string\">f'style="\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">"; "\u003C/span>.join(style_parts)}\u003C/span>"'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-comment\"># Add custom attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> attr_name, attr_value \u003Cspan class=\"hljs-keyword\">in\u003C/span> cell.attributes.items():\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> attr_name != \u003Cspan class=\"hljs-string\">"style"\u003C/span>:  \u003Cspan class=\"hljs-comment\"># Already handled above\u003C/span>\n                cell_attrs.append(\u003Cspan class=\"hljs-string\">f'\u003Cspan class=\"hljs-subst\">{attr_name}\u003C/span>="\u003Cspan class=\"hljs-subst\">{html.escape(attr_value)}\u003C/span>"'\u003C/span>)\n                \n        cell_tag_open = \u003Cspan class=\"hljs-string\">f'<\u003Cspan class=\"hljs-subst\">{tag_name}\u003C/span>\u003Cspan class=\"hljs-subst\">{\u003Cspan class=\"hljs-string\">" "\u003C/span> + \u003Cspan class=\"hljs-string\">" "\u003C/span>.join(cell_attrs) \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell_attrs \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span>}\u003C/span>>'\u003C/span>\n        cell_tag_close = \u003Cspan class=\"hljs-string\">f'</\u003Cspan class=\"hljs-subst\">{tag_name}\u003C/span>>'\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">f"\u003Cspan class=\"hljs-subst\">{cell_tag_open}\u003C/span>\u003Cspan class=\"hljs-subst\">{cell.content}\u003C/span>\u003Cspan class=\"hljs-subst\">{cell_tag_close}\u003C/span>"\u003C/span>\n        \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_markdown\u003C/span>(\u003Cspan class=\"hljs-params\">self\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate Markdown with embedded HTML for complex tables"""\u003C/span>\n        html_table = self.generate_html()\n        \n        markdown_parts = []\n        markdown_parts.append(\u003Cspan class=\"hljs-string\">"<!-- Complex table with merged cells -->"\u003C/span>)\n        markdown_parts.append(html_table)\n        markdown_parts.append(\u003Cspan class=\"hljs-string\">""\u003C/span>)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">"\\n"\u003C/span>.join(markdown_parts)\n\n\u003Cspan class=\"hljs-comment\"># Usage examples and advanced table generation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_financial_report_table\u003C/span>() -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n    \u003Cspan class=\"hljs-string\">"""Create a complex financial report table"""\u003C/span>\n    builder = AdvancedTableBuilder()\n    \n    \u003Cspan class=\"hljs-comment\"># Set table properties\u003C/span>\n    builder.set_caption(\u003Cspan class=\"hljs-string\">"Quarterly Financial Performance by Division"\u003C/span>)\n    builder.add_table_class(\u003Cspan class=\"hljs-string\">"professional-table"\u003C/span>)\n    builder.add_table_class(\u003Cspan class=\"hljs-string\">"financial-report"\u003C/span>)\n    builder.set_table_attribute(\u003Cspan class=\"hljs-string\">"role"\u003C/span>, \u003Cspan class=\"hljs-string\">"table"\u003C/span>)\n    builder.set_table_attribute(\u003Cspan class=\"hljs-string\">"aria-labelledby"\u003C/span>, \u003Cspan class=\"hljs-string\">"financial-caption"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-comment\"># Create complex header structure\u003C/span>\n    builder.add_header_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Division"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Financial Performance (in thousands)"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">6\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"YoY Change"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, cell_type=CellType.HEADER)\n    ])\n    \n    builder.add_header_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Q4 2024"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Q4 2023"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, cell_type=CellType.HEADER)\n    ])\n    \n    builder.add_header_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Revenue"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Costs"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Profit"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Revenue"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Costs"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Profit"\u003C/span>, cell_type=CellType.HEADER)\n    ])\n    \n    \u003Cspan class=\"hljs-comment\"># Add data rows with merged cells\u003C/span>\n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Technology Solutions</strong>"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"$2,450"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,680"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$770"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$2,120"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,590"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$530"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"+45.3%"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"positive-change"\u003C/span>])\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<em>Primary growth drivers: Cloud services and AI solutions</em>"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">6\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-positive">Strong Growth</span>'\u003C/span>)\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Consulting Services</strong>"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,890"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,420"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$470"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,750"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,380"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$370"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"+27.0%"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"positive-change"\u003C/span>])\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<em>Strategic consulting and implementation services expansion</em>"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">6\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-positive">Steady Growth</span>'\u003C/span>)\n    ])\n    \n    \u003Cspan class=\"hljs-comment\"># Add footer with totals\u003C/span>\n    builder.add_footer_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Total</strong>"\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"$4,340"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$3,100"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$1,240"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$3,870"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$2,970"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"$900"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"numeric"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"+37.8%"\u003C/span>, alignment=CellAlignment.RIGHT, css_classes=[\u003Cspan class=\"hljs-string\">"positive-change"\u003C/span>, \u003Cspan class=\"hljs-string\">"total"\u003C/span>])\n    ])\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> builder.generate_markdown()\n\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_project_timeline_table\u003C/span>() -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n    \u003Cspan class=\"hljs-string\">"""Create a project timeline with merged phases"""\u003C/span>\n    builder = AdvancedTableBuilder()\n    \n    builder.set_caption(\u003Cspan class=\"hljs-string\">"Project Development Timeline and Resource Allocation"\u003C/span>)\n    builder.add_table_class(\u003Cspan class=\"hljs-string\">"professional-table"\u003C/span>)\n    builder.add_table_class(\u003Cspan class=\"hljs-string\">"project-timeline"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-comment\"># Header structure\u003C/span>\n    builder.add_header_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Project Phase"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Timeline"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">4\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Resources"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Key Deliverables"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>, cell_type=CellType.HEADER)\n    ])\n    \n    builder.add_header_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Start"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Duration"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"End"\u003C/span>, cell_type=CellType.HEADER),\n        TableCell(\u003Cspan class=\"hljs-string\">"Status"\u003C/span>, cell_type=CellType.HEADER)\n    ])\n    \n    \u003Cspan class=\"hljs-comment\"># Planning phase with sub-phases\u003C/span>\n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Planning & Design</strong>"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">3\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 1"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"3 weeks"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"duration"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 3"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-positive">Complete</span>'\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• 3 designers<br>• 2 business analysts<br>• 1 project manager"\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• Requirements document<br>• System architecture<br>• UI/UX mockups"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">3\u003C/span>)\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Requirements analysis"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"sub-phase"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-positive">✓</span>'\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"<em>Stakeholder interviews completed</em>"\u003C/span>)\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"System design"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"sub-phase"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-positive">✓</span>'\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"<em>Architecture approved by tech committee</em>"\u003C/span>)\n    ])\n    \n    \u003Cspan class=\"hljs-comment\"># Development phase\u003C/span>\n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Development</strong>"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 4"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"8 weeks"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"duration"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 11"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-warning">In Progress</span>'\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• 6 developers<br>• 2 DevOps engineers<br>• 2 QA engineers"\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• Core functionality<br>• API implementation<br>• Database setup"\u003C/span>, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>)\n    ])\n    \n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"Current status: Frontend 75% | Backend 60%"\u003C/span>, colspan=\u003Cspan class=\"hljs-number\">4\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"progress-detail"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"<em>Daily standups and weekly reviews</em>"\u003C/span>)\n    ])\n    \n    \u003Cspan class=\"hljs-comment\"># Testing phase\u003C/span>\n    builder.add_data_row([\n        TableCell(\u003Cspan class=\"hljs-string\">"<strong>Testing & Launch</strong>"\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 12"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"3 weeks"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"duration"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">"Week 14"\u003C/span>, css_classes=[\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>]),\n        TableCell(\u003Cspan class=\"hljs-string\">'<span class="status-negative">Pending</span>'\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• 4 QA engineers<br>• 2 DevOps engineers"\u003C/span>),\n        TableCell(\u003Cspan class=\"hljs-string\">"• Integration testing<br>• Performance optimization<br>• Production deployment"\u003C/span>)\n    ])\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> builder.generate_markdown()\n\n\u003Cspan class=\"hljs-comment\"># Example usage\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> __name__ == \u003Cspan class=\"hljs-string\">"__main__"\u003C/span>:\n    \u003Cspan class=\"hljs-comment\"># Generate financial report table\u003C/span>\n    financial_table = create_financial_report_table()\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"# Financial Report Table"\u003C/span>)\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(financial_table)\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"\\n"\u003C/span> + \u003Cspan class=\"hljs-string\">"="\u003C/span>*\u003Cspan class=\"hljs-number\">80\u003C/span> + \u003Cspan class=\"hljs-string\">"\\n"\u003C/span>)\n    \n    \u003Cspan class=\"hljs-comment\"># Generate project timeline table\u003C/span>\n    timeline_table = create_project_timeline_table()\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"# Project Timeline Table"\u003C/span>)\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(timeline_table)\n    \n    \u003Cspan class=\"hljs-comment\"># Save to files\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">with\u003C/span> \u003Cspan class=\"hljs-built_in\">open\u003C/span>(\u003Cspan class=\"hljs-string\">"financial_report_table.md"\u003C/span>, \u003Cspan class=\"hljs-string\">"w"\u003C/span>) \u003Cspan class=\"hljs-keyword\">as\u003C/span> f:\n        f.write(\u003Cspan class=\"hljs-string\">"# Financial Performance Report\\n\\n"\u003C/span>)\n        f.write(financial_table)\n    \n    \u003Cspan class=\"hljs-keyword\">with\u003C/span> \u003Cspan class=\"hljs-built_in\">open\u003C/span>(\u003Cspan class=\"hljs-string\">"project_timeline_table.md"\u003C/span>, \u003Cspan class=\"hljs-string\">"w"\u003C/span>) \u003Cspan class=\"hljs-keyword\">as\u003C/span> f:\n        f.write(\u003Cspan class=\"hljs-string\">"# Project Development Timeline\\n\\n"\u003C/span>)\n        f.write(timeline_table)\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"\\nTables saved to financial_report_table.md and project_timeline_table.md"\u003C/span>)\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Advanced table formatting with cell merging integrates effectively with comprehensive Markdown workflows to create sophisticated document presentation systems. When building complex documentation that requires detailed data presentation, merged cell techniques work seamlessly with \u003Ca href=\"/blog/markdown-accessibility-screen-readers-complete-guide\">table accessibility and screen reader support\u003C/a> to ensure professional data visualization remains usable across diverse accessibility requirements and assistive technologies.\u003C/p>\n\u003Cp>For teams developing comprehensive documentation systems, complex table formatting complements \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive design and mobile optimization strategies\u003C/a> by providing adaptive table layouts that maintain data relationships and visual hierarchy across different screen sizes and viewing contexts while preserving essential information architecture.\u003C/p>\n\u003Cp>When implementing enterprise documentation platforms, advanced table capabilities integrate effectively with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content generation and template systems\u003C/a> to enable systematic creation of complex data presentations, financial reports, and project tracking documents that maintain consistent formatting standards and professional appearance across large-scale documentation projects.\u003C/p>\n\u003Ch2 id=\"best-practices-and-implementation-guidelines\">Best Practices and Implementation Guidelines\u003C/h2>\n\u003Ch3 id=\"performance-considerations\">Performance Considerations\u003C/h3>\n\u003Cp>Optimizing complex tables for rendering performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Performance Optimization Guidelines\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## HTML Structure Best Practices\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Minimize DOM Complexity**\u003C/span>: Limit nested structures and excessive spanning\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Use Semantic HTML**\u003C/span>: Proper thead, tbody, tfoot organization\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Optimize Cell Content**\u003C/span>: Avoid heavy content in individual cells\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Efficient CSS**\u003C/span>: Use CSS classes instead of inline styles\n\n\u003Cspan class=\"hljs-section\">## Mobile Performance\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Lazy Loading**\u003C/span>: Load complex tables only when needed\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Progressive Enhancement**\u003C/span>: Start with basic table, enhance for desktop\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Content Prioritization**\u003C/span>: Show most important data first on mobile\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Compression**\u003C/span>: Minimize HTML and CSS for faster loading\n\n\u003Cspan class=\"hljs-section\">## Browser Compatibility\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Test across major browsers for rendering consistency\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Provide fallbacks for older browser versions\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Use progressive enhancement for advanced features\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Validate HTML structure for standards compliance\n\u003C/code>\u003C/pre>\u003Ch3 id=\"content-strategy-for-complex-tables\">Content Strategy for Complex Tables\u003C/h3>\n\u003Cp>Guidelines for effective data presentation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Content Strategy Guidelines\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Data Hierarchy Principles\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Primary Data**\u003C/span>: Most important information in main cells\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Secondary Data**\u003C/span>: Supporting information in merged/spanning cells\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Meta Information**\u003C/span>: Context and explanations in footers or captions\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Visual Grouping**\u003C/span>: Related data grouped through spanning\n\n\u003Cspan class=\"hljs-section\">## Information Architecture\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Logical Flow**\u003C/span>: Information follows natural reading patterns\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Contextual Relationships**\u003C/span>: Related data visually connected\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Scannable Structure**\u003C/span>: Key information easily identifiable\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Progressive Detail**\u003C/span>: Summary to detailed information flow\n\n\u003Cspan class=\"hljs-section\">## Accessibility Integration\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**Screen Reader Support**\u003C/span>: Proper header associations and descriptions\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Keyboard Navigation**\u003C/span>: Logical tab order through complex structures\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**High Contrast Support**\u003C/span>: Visual distinction maintained in all modes\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Alternative Formats**\u003C/span>: Consider alternative presentations for complex data\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table formatting with cell merging and spanning capabilities transforms basic data presentation into sophisticated information architecture that serves professional documentation, business reporting, and complex data visualization requirements. By mastering HTML integration techniques, responsive design principles, and accessibility best practices, technical writers can create comprehensive table structures that maintain functionality and readability across diverse viewing contexts and user requirements.\u003C/p>\n\u003Cp>The key to successful complex table implementation lies in balancing visual sophistication with practical usability, ensuring that advanced formatting serves clear communication goals rather than creating unnecessary complexity. Whether you're building financial reports, project tracking systems, or comprehensive comparison tables, the techniques covered in this guide provide the foundation for creating professional, accessible, and maintainable table structures.\u003C/p>\n\u003Cp>Remember to prioritize content clarity over visual complexity, implement responsive design patterns that preserve data relationships on mobile devices, and maintain accessibility standards that ensure your sophisticated table presentations remain usable by all readers. With proper implementation of advanced table formatting techniques, your Markdown documentation can achieve the same level of professional data presentation found in traditional publishing while maintaining the flexibility and version control benefits that make Markdown an ideal choice for technical documentation and collaborative content development.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43],{"id":16,"text":17,"level":18},"why-master-advanced-table-formatting","Why Master Advanced Table Formatting?",2,{"id":20,"text":21,"level":18},"foundation-concepts-for-cell-merging","Foundation Concepts for Cell Merging",{"id":23,"text":24,"level":18},"advanced-cell-merging-techniques","Advanced Cell Merging Techniques",{"id":26,"text":27,"level":18},"styling-and-visual-enhancement","Styling and Visual Enhancement",{"id":29,"text":30,"level":18},"responsive-table-design","Responsive Table Design",{"id":32,"text":33,"level":18},"accessibility-and-semantic-structure","Accessibility and Semantic Structure",{"id":35,"text":36,"level":18},"advanced-table-generation-tools","Advanced Table Generation Tools",{"id":38,"text":39,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":41,"text":42,"level":18},"best-practices-and-implementation-guidelines","Best Practices and Implementation Guidelines",{"id":44,"text":45,"level":18},"conclusion","Conclusion",[],[48,56,64],{"slug":49,"title":50,"description":51,"excerpt":52,"date":53,"category":9,"author":10,"keywords":54,"readingMinutes":55},"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":57,"title":58,"description":59,"excerpt":60,"date":61,"category":9,"author":10,"keywords":62,"readingMinutes":63},"markdown-table-cell-merging-spanning-complete-guide","Markdown Table Cell Merging and Spanning: Complete Guide for Advanced Table Layouts and Complex Data Presentation","Master advanced Markdown table cell merging and spanning techniques for complex data presentation, multi-row headers, grouped content, and professional table layouts. Learn HTML integration, CSS styling, and cross-platform compatibility.","Advanced Markdown table cell merging and spanning techniques enable sophisticated data presentation that goes beyond basic tabular layouts to create complex, professional-grade tables with merged…","2025-11-02","markdown table cell merging, table cell spanning, markdown table colspan, markdown table rowspan, advanced markdown tables, html table markdown, table cell combining, complex markdown tables",17,{"slug":65,"title":66,"description":67,"excerpt":68,"date":69,"category":9,"author":10,"keywords":70,"readingMinutes":71},"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","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,1792184945607]