[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-table-cell-merging-spanning-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":37,"related":38},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>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 headers, grouped content sections, and hierarchical data structures. By mastering cell spanning strategies, HTML integration methods, and CSS styling approaches, content creators can build comprehensive data displays that maintain readability while presenting complex information in organized, visually appealing formats.\u003C/p>\n\u003Ch2 id=\"why-master-table-cell-merging-and-spanning\">Why Master Table Cell Merging and Spanning?\u003C/h2>\n\u003Cp>Professional table cell merging provides essential benefits for advanced data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Complex Data Structures\u003C/strong>: Display hierarchical data, grouped categories, and multi-dimensional information effectively\u003C/li>\n\u003Cli>\u003Cstrong>Professional Layouts\u003C/strong>: Create publication-quality tables with merged headers and organized content sections  \u003C/li>\n\u003Cli>\u003Cstrong>Information Hierarchy\u003C/strong>: Establish clear visual relationships between related data points and categories\u003C/li>\n\u003Cli>\u003Cstrong>Space Optimization\u003C/strong>: Reduce redundancy and improve table readability through strategic cell combinations\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Readability\u003C/strong>: Guide reader attention through logical grouping and visual structure\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-concepts\">Foundation Concepts\u003C/h2>\n\u003Ch3 id=\"understanding-cell-spanning-limitations\">Understanding Cell Spanning Limitations\u003C/h3>\n\u003Cp>Standard Markdown table syntax has inherent limitations for cell merging:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Standard Markdown Tables - No Native Cell Merging\u003C/span>\n\n| Product Category | Item Name | Price | Stock | Status |\n|-----------------|-----------|-------|-------|--------|\n| Electronics     | Laptop    | $999  | 50    | Active |\n| Electronics     | Mouse     | $25   | 200   | Active |\n| Furniture       | Desk      | $299  | 30    | Active |\n| Furniture       | Chair     | $149  | 75    | Active |\n\n\u003Cspan class=\"hljs-section\"># Problem: Repetitive category names create visual clutter\u003C/span>\n\u003Cspan class=\"hljs-section\"># Solution: Use HTML table integration for cell merging\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-integration-approach\">HTML Integration Approach\u003C/h3>\n\u003Cp>The most reliable method for cell merging in Markdown documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Basic Cell Spanning Example -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">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 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\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Product Details\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>Item Name\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Price\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>Electronics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Laptop\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>$999\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>Active\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>Mouse\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>Active\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>Furniture\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>Desk\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>$299\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>Active\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>Chair\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>$149\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>Active\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=\"comprehensive-cell-merging-implementation\">Comprehensive Cell Merging Implementation\u003C/h3>\n\u003Cp>Building sophisticated table structures with strategic cell spanning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># table_generator.py - Advanced table generation with cell merging\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\">Tuple\u003C/span>, \u003Cspan class=\"hljs-type\">Optional\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\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">SpanType\u003C/span>(\u003Cspan class=\"hljs-title class_ inherited__\">Enum\u003C/span>):\n    COLSPAN = \u003Cspan class=\"hljs-string\">"colspan"\u003C/span>\n    ROWSPAN = \u003Cspan class=\"hljs-string\">"rowspan"\u003C/span>\n    BOTH = \u003Cspan class=\"hljs-string\">"both"\u003C/span>\n\n\u003Cspan class=\"hljs-meta\">@dataclass\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">CellSpan\u003C/span>:\n    \u003Cspan class=\"hljs-string\">"""Represents cell spanning configuration"""\u003C/span>\n    \u003Cspan class=\"hljs-built_in\">type\u003C/span>: SpanType\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    \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    \u003Cspan class=\"hljs-string\">"""Represents a single table cell with content and styling"""\u003C/span>\n    content: \u003Cspan class=\"hljs-built_in\">str\u003C/span>\n    span: \u003Cspan class=\"hljs-type\">Optional\u003C/span>[CellSpan] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    css_class: \u003Cspan class=\"hljs-type\">Optional\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>] = \u003Cspan class=\"hljs-literal\">None\u003C/span>\n    is_header: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>\n    skip_render: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>  \u003Cspan class=\"hljs-comment\"># For cells consumed by spanning\u003C/span>\n\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedTableGenerator\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.table_styles = {\n            \u003Cspan class=\"hljs-string\">'professional'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'table'\u003C/span>: \u003Cspan class=\"hljs-string\">'border-collapse: collapse; width: 100%; font-family: Arial, sans-serif;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'th'\u003C/span>: \u003Cspan class=\"hljs-string\">'background-color: #f2f2f2; padding: 12px; text-align: left; border: 1px solid #ddd; font-weight: bold;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'td'\u003C/span>: \u003Cspan class=\"hljs-string\">'padding: 12px; border: 1px solid #ddd; vertical-align: top;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'merged_header'\u003C/span>: \u003Cspan class=\"hljs-string\">'background-color: #e8e8e8; text-align: center; font-weight: bold;'\u003C/span>\n            },\n            \u003Cspan class=\"hljs-string\">'minimal'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'table'\u003C/span>: \u003Cspan class=\"hljs-string\">'border-collapse: collapse; width: 100%;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'th'\u003C/span>: \u003Cspan class=\"hljs-string\">'padding: 8px; text-align: left; border-bottom: 2px solid #333;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'td'\u003C/span>: \u003Cspan class=\"hljs-string\">'padding: 8px; border-bottom: 1px solid #eee;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'merged_header'\u003C/span>: \u003Cspan class=\"hljs-string\">'text-align: center; font-weight: bold;'\u003C/span>\n            },\n            \u003Cspan class=\"hljs-string\">'modern'\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">'table'\u003C/span>: \u003Cspan class=\"hljs-string\">'border-collapse: collapse; width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'th'\u003C/span>: \u003Cspan class=\"hljs-string\">'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; text-align: left; border: none;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'td'\u003C/span>: \u003Cspan class=\"hljs-string\">'padding: 12px 15px; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s;'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'merged_header'\u003C/span>: \u003Cspan class=\"hljs-string\">'background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); color: white; text-align: center;'\u003C/span>\n            }\n        }\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_table_structure\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">List\u003C/span>[TableCell]], \n                             style: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">'professional'\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate HTML table with cell merging support"""\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> data \u003Cspan class=\"hljs-keyword\">or\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> data[\u003Cspan class=\"hljs-number\">0\u003C/span>]:\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">"<table><tr><td>No data provided</td></tr></table>"\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Process cell spanning and mark cells to skip\u003C/span>\n        processed_data = self.process_cell_spanning(data)\n        \n        \u003Cspan class=\"hljs-comment\"># Generate table HTML\u003C/span>\n        html_parts = []\n        table_style = self.table_styles.get(style, self.table_styles[\u003Cspan class=\"hljs-string\">'professional'\u003C/span>])\n        \n        html_parts.append(\u003Cspan class=\"hljs-string\">f'<table style="\u003Cspan class=\"hljs-subst\">{table_style[\u003Cspan class=\"hljs-string\">"table"\u003C/span>]}\u003C/span>">'\u003C/span>)\n        \n        \u003Cspan class=\"hljs-comment\"># Determine if first row contains headers\u003C/span>\n        has_headers = \u003Cspan class=\"hljs-built_in\">any\u003C/span>(cell.is_header \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> processed_data[\u003Cspan class=\"hljs-number\">0\u003C/span>] \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> cell.skip_render)\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> has_headers:\n            html_parts.append(\u003Cspan class=\"hljs-string\">'  <thead>'\u003C/span>)\n            html_parts.append(self.generate_row(processed_data[\u003Cspan class=\"hljs-number\">0\u003C/span>], table_style, is_header_row=\u003Cspan class=\"hljs-literal\">True\u003C/span>))\n            html_parts.append(\u003Cspan class=\"hljs-string\">'  </thead>'\u003C/span>)\n            html_parts.append(\u003Cspan class=\"hljs-string\">'  <tbody>'\u003C/span>)\n            body_start_idx = \u003Cspan class=\"hljs-number\">1\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n            html_parts.append(\u003Cspan class=\"hljs-string\">'  <tbody>'\u003C/span>)\n            body_start_idx = \u003Cspan class=\"hljs-number\">0\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Generate body rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> processed_data[body_start_idx:]:\n            html_parts.append(self.generate_row(row, table_style, is_header_row=\u003Cspan class=\"hljs-literal\">False\u003C/span>))\n        \n        html_parts.append(\u003Cspan class=\"hljs-string\">'  </tbody>'\u003C/span>)\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_\">process_cell_spanning\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">List\u003C/span>[TableCell]]\u003C/span>) -> \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">List\u003C/span>[TableCell]]:\n        \u003Cspan class=\"hljs-string\">"""Process cell spanning and mark cells that should be skipped"""\u003C/span>\n        processed = [row[:] \u003Cspan class=\"hljs-keyword\">for\u003C/span> row \u003Cspan class=\"hljs-keyword\">in\u003C/span> data]  \u003Cspan class=\"hljs-comment\"># Deep copy\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> row_idx, row \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(processed):\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> col_idx, cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">enumerate\u003C/span>(row):\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> cell.skip_render:\n                    \u003Cspan class=\"hljs-comment\"># Handle rowspan - mark cells below as skip_render\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span.rowspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                        \u003Cspan class=\"hljs-keyword\">for\u003C/span> span_row \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">range\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, cell.span.rowspan):\n                            target_row = row_idx + span_row\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> target_row < \u003Cspan class=\"hljs-built_in\">len\u003C/span>(processed) \u003Cspan class=\"hljs-keyword\">and\u003C/span> col_idx < \u003Cspan class=\"hljs-built_in\">len\u003C/span>(processed[target_row]):\n                                processed[target_row][col_idx].skip_render = \u003Cspan class=\"hljs-literal\">True\u003C/span>\n                    \n                    \u003Cspan class=\"hljs-comment\"># Handle colspan - mark cells to the right as skip_render\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span.colspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                        \u003Cspan class=\"hljs-keyword\">for\u003C/span> span_col \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">range\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, cell.span.colspan):\n                            target_col = col_idx + span_col\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> target_col < \u003Cspan class=\"hljs-built_in\">len\u003C/span>(row):\n                                processed[row_idx][target_col].skip_render = \u003Cspan class=\"hljs-literal\">True\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> processed\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">generate_row\u003C/span>(\u003Cspan class=\"hljs-params\">self, row: \u003Cspan class=\"hljs-type\">List\u003C/span>[TableCell], styles: \u003Cspan class=\"hljs-type\">Dict\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>, \u003Cspan class=\"hljs-built_in\">str\u003C/span>], \n                    is_header_row: \u003Cspan class=\"hljs-built_in\">bool\u003C/span> = \u003Cspan class=\"hljs-literal\">False\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Generate HTML for a single table row"""\u003C/span>\n        row_parts = [\u003Cspan class=\"hljs-string\">'    <tr>'\u003C/span>]\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> cell \u003Cspan class=\"hljs-keyword\">in\u003C/span> row:\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.skip_render:\n                \u003Cspan class=\"hljs-keyword\">continue\u003C/span>\n                \n            tag = \u003Cspan class=\"hljs-string\">'th'\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.is_header \u003Cspan class=\"hljs-keyword\">or\u003C/span> is_header_row) \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">'td'\u003C/span>\n            base_style = styles.get(\u003Cspan class=\"hljs-string\">'th'\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.is_header \u003Cspan class=\"hljs-keyword\">or\u003C/span> is_header_row) \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">'td'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)\n            \n            \u003Cspan class=\"hljs-comment\"># Apply special styling for merged cells\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span \u003Cspan class=\"hljs-keyword\">and\u003C/span> (cell.span.colspan > \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-keyword\">or\u003C/span> cell.span.rowspan > \u003Cspan class=\"hljs-number\">1\u003C/span>):\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'merged_header'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> styles:\n                    base_style = styles[\u003Cspan class=\"hljs-string\">'merged_header'\u003C/span>]\n            \n            \u003Cspan class=\"hljs-comment\"># Build cell attributes\u003C/span>\n            attributes = []\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span:\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span.colspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                    attributes.append(\u003Cspan class=\"hljs-string\">f'colspan="\u003Cspan class=\"hljs-subst\">{cell.span.colspan}\u003C/span>"'\u003C/span>)\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.span.rowspan > \u003Cspan class=\"hljs-number\">1\u003C/span>:\n                    attributes.append(\u003Cspan class=\"hljs-string\">f'rowspan="\u003Cspan class=\"hljs-subst\">{cell.span.rowspan}\u003C/span>"'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> base_style:\n                attributes.append(\u003Cspan class=\"hljs-string\">f'style="\u003Cspan class=\"hljs-subst\">{base_style}\u003C/span>"'\u003C/span>)\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> cell.css_class:\n                attributes.append(\u003Cspan class=\"hljs-string\">f'class="\u003Cspan class=\"hljs-subst\">{cell.css_class}\u003C/span>"'\u003C/span>)\n            \n            attrs_str = \u003Cspan class=\"hljs-string\">' '\u003C/span> + \u003Cspan class=\"hljs-string\">' '\u003C/span>.join(attributes) \u003Cspan class=\"hljs-keyword\">if\u003C/span> attributes \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">''\u003C/span>\n            \n            row_parts.append(\u003Cspan class=\"hljs-string\">f'      <\u003Cspan class=\"hljs-subst\">{tag}\u003C/span>\u003Cspan class=\"hljs-subst\">{attrs_str}\u003C/span>>\u003Cspan class=\"hljs-subst\">{cell.content}\u003C/span></\u003Cspan class=\"hljs-subst\">{tag}\u003C/span>>'\u003C/span>)\n        \n        row_parts.append(\u003Cspan class=\"hljs-string\">'    </tr>'\u003C/span>)\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>.join(row_parts)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_hierarchical_table\u003C/span>(\u003Cspan class=\"hljs-params\">self, data: \u003Cspan class=\"hljs-type\">Dict\u003C/span>, style: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">'professional'\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Create table with hierarchical headers using cell merging"""\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\"># Example structure for financial data\u003C/span>\n        table_data = [\n            \u003Cspan class=\"hljs-comment\"># Header row 1 - Main categories\u003C/span>\n            [\n                TableCell(\u003Cspan class=\"hljs-string\">""\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),  \u003Cspan class=\"hljs-comment\"># Empty top-left cell\u003C/span>\n                TableCell(\u003Cspan class=\"hljs-string\">"Q1 2024"\u003C/span>, span=CellSpan(SpanType.COLSPAN, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>), is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Q2 2024"\u003C/span>, span=CellSpan(SpanType.COLSPAN, colspan=\u003Cspan class=\"hljs-number\">3\u003C/span>), is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Total"\u003C/span>, span=CellSpan(SpanType.ROWSPAN, rowspan=\u003Cspan class=\"hljs-number\">2\u003C/span>), is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n            ],\n            \u003Cspan class=\"hljs-comment\"># Header row 2 - Sub categories  \u003C/span>\n            [\n                TableCell(\u003Cspan class=\"hljs-string\">"Product Category"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Jan"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Feb"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>), \n                TableCell(\u003Cspan class=\"hljs-string\">"Mar"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Apr"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"May"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                TableCell(\u003Cspan class=\"hljs-string\">"Jun"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>),\n                \u003Cspan class=\"hljs-comment\"># Total column is spanned from above\u003C/span>\n                TableCell(\u003Cspan class=\"hljs-string\">""\u003C/span>, skip_render=\u003Cspan class=\"hljs-literal\">True\u003C/span>)\n            ]\n        ]\n        \n        \u003Cspan class=\"hljs-comment\"># Add data rows from input\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> category, months_data \u003Cspan class=\"hljs-keyword\">in\u003C/span> data.items():\n            row = [TableCell(category)]\n            total = \u003Cspan class=\"hljs-number\">0\u003C/span>\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> month_value \u003Cspan class=\"hljs-keyword\">in\u003C/span> months_data.values():\n                row.append(TableCell(\u003Cspan class=\"hljs-string\">f"$\u003Cspan class=\"hljs-subst\">{month_value:,}\u003C/span>"\u003C/span>))\n                total += month_value\n            \n            row.append(TableCell(\u003Cspan class=\"hljs-string\">f"$\u003Cspan class=\"hljs-subst\">{total:,}\u003C/span>"\u003C/span>, css_class=\u003Cspan class=\"hljs-string\">"total-cell"\u003C/span>))\n            table_data.append(row)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.create_table_structure(table_data, style)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_comparison_table\u003C/span>(\u003Cspan class=\"hljs-params\">self, products: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-type\">Dict\u003C/span>], \n                               features: \u003Cspan class=\"hljs-type\">List\u003C/span>[\u003Cspan class=\"hljs-built_in\">str\u003C/span>], style: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">'modern'\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Create product comparison table with grouped features"""\u003C/span>\n        \n        table_data = []\n        \n        \u003Cspan class=\"hljs-comment\"># Header row\u003C/span>\n        header_row = [TableCell(\u003Cspan class=\"hljs-string\">"Features"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>)]\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> product \u003Cspan class=\"hljs-keyword\">in\u003C/span> products:\n            header_row.append(TableCell(product[\u003Cspan class=\"hljs-string\">'name'\u003C/span>], is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>))\n        table_data.append(header_row)\n        \n        \u003Cspan class=\"hljs-comment\"># Group features by category\u003C/span>\n        feature_groups = {\n            \u003Cspan class=\"hljs-string\">'Basic Features'\u003C/span>: features[:\u003Cspan class=\"hljs-built_in\">len\u003C/span>(features)//\u003Cspan class=\"hljs-number\">2\u003C/span>],\n            \u003Cspan class=\"hljs-string\">'Advanced Features'\u003C/span>: features[\u003Cspan class=\"hljs-built_in\">len\u003C/span>(features)//\u003Cspan class=\"hljs-number\">2\u003C/span>:]\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> group_name, group_features \u003Cspan class=\"hljs-keyword\">in\u003C/span> feature_groups.items():\n            \u003Cspan class=\"hljs-comment\"># Group header row\u003C/span>\n            group_row = [\n                TableCell(group_name, span=CellSpan(SpanType.COLSPAN, \n                         colspan=\u003Cspan class=\"hljs-built_in\">len\u003C/span>(products) + \u003Cspan class=\"hljs-number\">1\u003C/span>), css_class=\u003Cspan class=\"hljs-string\">"feature-group"\u003C/span>)\n            ]\n            \u003Cspan class=\"hljs-comment\"># Add skip cells for the colspan\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> _ \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">range\u003C/span>(\u003Cspan class=\"hljs-built_in\">len\u003C/span>(products)):\n                group_row.append(TableCell(\u003Cspan class=\"hljs-string\">""\u003C/span>, skip_render=\u003Cspan class=\"hljs-literal\">True\u003C/span>))\n            table_data.append(group_row)\n            \n            \u003Cspan class=\"hljs-comment\"># Feature rows\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> feature \u003Cspan class=\"hljs-keyword\">in\u003C/span> group_features:\n                feature_row = [TableCell(\u003Cspan class=\"hljs-string\">f"  \u003Cspan class=\"hljs-subst\">{feature}\u003C/span>"\u003C/span>)]  \u003Cspan class=\"hljs-comment\"># Indent feature names\u003C/span>\n                \n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> product \u003Cspan class=\"hljs-keyword\">in\u003C/span> products:\n                    has_feature = feature \u003Cspan class=\"hljs-keyword\">in\u003C/span> product.get(\u003Cspan class=\"hljs-string\">'features'\u003C/span>, [])\n                    feature_row.append(\n                        TableCell(\u003Cspan class=\"hljs-string\">"✓"\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> has_feature \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-string\">"✗"\u003C/span>, \n                                css_class=\u003Cspan class=\"hljs-string\">"feature-check"\u003C/span>)\n                    )\n                \n                table_data.append(feature_row)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.create_table_structure(table_data, style)\n    \n    \u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">create_schedule_table\u003C/span>(\u003Cspan class=\"hljs-params\">self, schedule_data: \u003Cspan class=\"hljs-type\">Dict\u003C/span>, style: \u003Cspan class=\"hljs-built_in\">str\u003C/span> = \u003Cspan class=\"hljs-string\">'professional'\u003C/span>\u003C/span>) -> \u003Cspan class=\"hljs-built_in\">str\u003C/span>:\n        \u003Cspan class=\"hljs-string\">"""Create a weekly schedule table with time slots and merged cells"""\u003C/span>\n        \n        days = [\u003Cspan class=\"hljs-string\">'Monday'\u003C/span>, \u003Cspan class=\"hljs-string\">'Tuesday'\u003C/span>, \u003Cspan class=\"hljs-string\">'Wednesday'\u003C/span>, \u003Cspan class=\"hljs-string\">'Thursday'\u003C/span>, \u003Cspan class=\"hljs-string\">'Friday'\u003C/span>]\n        time_slots = \u003Cspan class=\"hljs-built_in\">list\u003C/span>(schedule_data.keys())\n        \n        table_data = []\n        \n        \u003Cspan class=\"hljs-comment\"># Header row\u003C/span>\n        header_row = [TableCell(\u003Cspan class=\"hljs-string\">"Time"\u003C/span>, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>)]\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> day \u003Cspan class=\"hljs-keyword\">in\u003C/span> days:\n            header_row.append(TableCell(day, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>))\n        table_data.append(header_row)\n        \n        \u003Cspan class=\"hljs-comment\"># Time slot rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> time_slot \u003Cspan class=\"hljs-keyword\">in\u003C/span> time_slots:\n            row = [TableCell(time_slot, is_header=\u003Cspan class=\"hljs-literal\">True\u003C/span>)]\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> day \u003Cspan class=\"hljs-keyword\">in\u003C/span> days:\n                activity = schedule_data[time_slot].get(day, \u003Cspan class=\"hljs-string\">""\u003C/span>)\n                \n                \u003Cspan class=\"hljs-comment\"># Check if this activity spans multiple days\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> activity \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-string\">'span_days'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> schedule_data[time_slot]:\n                    span_info = schedule_data[time_slot][\u003Cspan class=\"hljs-string\">'span_days'\u003C/span>]\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> day == span_info.get(\u003Cspan class=\"hljs-string\">'start_day'\u003C/span>):\n                        \u003Cspan class=\"hljs-comment\"># This is the start of a span\u003C/span>\n                        span_count = span_info.get(\u003Cspan class=\"hljs-string\">'count'\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>)\n                        row.append(TableCell(activity, \n                                   span=CellSpan(SpanType.COLSPAN, colspan=span_count),\n                                   css_class=\u003Cspan class=\"hljs-string\">"scheduled-activity"\u003C/span>))\n                        \u003Cspan class=\"hljs-comment\"># Mark next cells as skip\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">for\u003C/span> _ \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-built_in\">range\u003C/span>(span_count - \u003Cspan class=\"hljs-number\">1\u003C/span>):\n                            row.append(TableCell(\u003Cspan class=\"hljs-string\">""\u003C/span>, skip_render=\u003Cspan class=\"hljs-literal\">True\u003C/span>))\n                    \u003Cspan class=\"hljs-keyword\">elif\u003C/span> day \u003Cspan class=\"hljs-keyword\">in\u003C/span> span_info.get(\u003Cspan class=\"hljs-string\">'spanned_days'\u003C/span>, []):\n                        \u003Cspan class=\"hljs-comment\"># This cell is part of a span, skip it\u003C/span>\n                        \u003Cspan class=\"hljs-keyword\">continue\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                        row.append(TableCell(activity, css_class=\u003Cspan class=\"hljs-string\">"scheduled-activity"\u003C/span>))\n                \u003Cspan class=\"hljs-keyword\">else\u003C/span>:\n                    row.append(TableCell(activity, css_class=\u003Cspan class=\"hljs-string\">"scheduled-activity"\u003C/span>))\n            \n            table_data.append(row)\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> self.create_table_structure(table_data, style)\n\n\u003Cspan class=\"hljs-comment\"># Example usage demonstrations\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">demonstrate_cell_merging\u003C/span>():\n    \u003Cspan class=\"hljs-string\">"""Demonstrate various cell merging techniques"""\u003C/span>\n    generator = AdvancedTableGenerator()\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"=== Financial Data with Hierarchical Headers ==="\u003C/span>)\n    financial_data = {\n        \u003Cspan class=\"hljs-string\">"Electronics"\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">"Jan"\u003C/span>: \u003Cspan class=\"hljs-number\">15000\u003C/span>, \u003Cspan class=\"hljs-string\">"Feb"\u003C/span>: \u003Cspan class=\"hljs-number\">18000\u003C/span>, \u003Cspan class=\"hljs-string\">"Mar"\u003C/span>: \u003Cspan class=\"hljs-number\">22000\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Apr"\u003C/span>: \u003Cspan class=\"hljs-number\">25000\u003C/span>, \u003Cspan class=\"hljs-string\">"May"\u003C/span>: \u003Cspan class=\"hljs-number\">28000\u003C/span>, \u003Cspan class=\"hljs-string\">"Jun"\u003C/span>: \u003Cspan class=\"hljs-number\">30000\u003C/span>\n        },\n        \u003Cspan class=\"hljs-string\">"Furniture"\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">"Jan"\u003C/span>: \u003Cspan class=\"hljs-number\">12000\u003C/span>, \u003Cspan class=\"hljs-string\">"Feb"\u003C/span>: \u003Cspan class=\"hljs-number\">14000\u003C/span>, \u003Cspan class=\"hljs-string\">"Mar"\u003C/span>: \u003Cspan class=\"hljs-number\">16000\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"Apr"\u003C/span>: \u003Cspan class=\"hljs-number\">18000\u003C/span>, \u003Cspan class=\"hljs-string\">"May"\u003C/span>: \u003Cspan class=\"hljs-number\">20000\u003C/span>, \u003Cspan class=\"hljs-string\">"Jun"\u003C/span>: \u003Cspan class=\"hljs-number\">22000\u003C/span>\n        },\n        \u003Cspan class=\"hljs-string\">"Books"\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">"Jan"\u003C/span>: \u003Cspan class=\"hljs-number\">8000\u003C/span>, \u003Cspan class=\"hljs-string\">"Feb"\u003C/span>: \u003Cspan class=\"hljs-number\">9000\u003C/span>, \u003Cspan class=\"hljs-string\">"Mar"\u003C/span>: \u003Cspan class=\"hljs-number\">11000\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Apr"\u003C/span>: \u003Cspan class=\"hljs-number\">12000\u003C/span>, \u003Cspan class=\"hljs-string\">"May"\u003C/span>: \u003Cspan class=\"hljs-number\">13000\u003C/span>, \u003Cspan class=\"hljs-string\">"Jun"\u003C/span>: \u003Cspan class=\"hljs-number\">15000\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(generator.create_hierarchical_table(financial_data, \u003Cspan class=\"hljs-string\">'professional'\u003C/span>))\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>()\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"=== Product Comparison Table ==="\u003C/span>)\n    products = [\n        {\u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Basic Plan"\u003C/span>, \u003Cspan class=\"hljs-string\">"features"\u003C/span>: [\u003Cspan class=\"hljs-string\">"Feature A"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature B"\u003C/span>]},\n        {\u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Pro Plan"\u003C/span>, \u003Cspan class=\"hljs-string\">"features"\u003C/span>: [\u003Cspan class=\"hljs-string\">"Feature A"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature B"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature C"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature D"\u003C/span>]},\n        {\u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Enterprise"\u003C/span>, \u003Cspan class=\"hljs-string\">"features"\u003C/span>: [\u003Cspan class=\"hljs-string\">"Feature A"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature B"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature C"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature D"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature E"\u003C/span>]}\n    ]\n    \n    all_features = [\u003Cspan class=\"hljs-string\">"Feature A"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature B"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature C"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature D"\u003C/span>, \u003Cspan class=\"hljs-string\">"Feature E"\u003C/span>]\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(generator.create_comparison_table(products, all_features, \u003Cspan class=\"hljs-string\">'modern'\u003C/span>))\n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>()\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(\u003Cspan class=\"hljs-string\">"=== Weekly Schedule with Spanning ==="\u003C/span>)\n    schedule = {\n        \u003Cspan class=\"hljs-string\">"9:00 AM"\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">"Monday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Team Meeting"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Tuesday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"Wednesday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Thursday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Code Review"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Friday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Planning"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"span_days"\u003C/span>: {\n                \u003Cspan class=\"hljs-string\">"start_day"\u003C/span>: \u003Cspan class=\"hljs-string\">"Tuesday"\u003C/span>,\n                \u003Cspan class=\"hljs-string\">"count"\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>,\n                \u003Cspan class=\"hljs-string\">"spanned_days"\u003C/span>: [\u003Cspan class=\"hljs-string\">"Wednesday"\u003C/span>]\n            }\n        },\n        \u003Cspan class=\"hljs-string\">"10:30 AM"\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">"Monday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Tuesday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Client Call"\u003C/span>, \n            \u003Cspan class=\"hljs-string\">"Wednesday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Thursday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>,\n            \u003Cspan class=\"hljs-string\">"Friday"\u003C/span>: \u003Cspan class=\"hljs-string\">"Development"\u003C/span>\n        }\n    }\n    \n    \u003Cspan class=\"hljs-built_in\">print\u003C/span>(generator.create_schedule_table(schedule, \u003Cspan class=\"hljs-string\">'minimal'\u003C/span>))\n\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> __name__ == \u003Cspan class=\"hljs-string\">"__main__"\u003C/span>:\n    demonstrate_cell_merging()\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-implementation-strategies\">Platform-Specific Implementation Strategies\u003C/h2>\n\u003Ch3 id=\"jekyll-and-github-pages\">Jekyll and GitHub Pages\u003C/h3>\n\u003Cp>Implementing cell merging in Jekyll-powered sites:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Jekyll Table Cell Merging Approaches\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Method 1: Direct HTML in Markdown\u003C/span>\n\nJekyll processes HTML directly, allowing full table control:\n\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\">"comparison-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 rowspan="2">Feature</th>\n      <th colspan="3">Plan Comparison</th>\n    </tr>\n    <tr>\n      <th>Basic</th>\n      <th>Pro</th>\n      <th>Enterprise</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan="3">Core Features</td>\n      <td>✓</td>\n      <td>✓</td>\n      <td>✓</td>\n    </tr>\n    <tr>\n      <td>Limited</td>\n      <td>✓</td>\n      <td>✓</td>\n    </tr>\n    <tr>\n      <td>✗</td>\n      <td>Basic</td>\n      <td>Advanced</td>\n    </tr>\n  </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n.comparison-table {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 20px 0;\n}\n\n.comparison-table th,\n.comparison-table td {\n  border: 1px solid #ddd;\n  padding: 12px;\n  text-align: center;\n}\n\n.comparison-table th {\n  background-color: #f2f2f2;\n  font-weight: bold;\n}\n\n.comparison-table tr:nth-child(even) {\n  background-color: #f9f9f9;\n}\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-static-site-generator\">Hugo Static Site Generator\u003C/h3>\n\u003Cp>Hugo table implementation with shortcodes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/shortcodes/merged-table.html -->\n<table class="merged-table {{ .Get "class" | default "default" }}">\n  <thead>\n    {{ range .Params.headers }}\n    <tr>\n      {{ range .cells }}\n      <th \n        {{ if .colspan }}colspan="{{ .colspan }}"{{ end }}\n        {{ if .rowspan }}rowspan="{{ .rowspan }}"{{ end }}\n        {{ if .class }}class="{{ .class }}"{{ end }}>\n        {{ .content }}\n      </th>\n      {{ end }}\n    </tr>\n    {{ end }}\n  </thead>\n  <tbody>\n    {{ range .Params.rows }}\n    <tr>\n      {{ range .cells }}\n      <td \n        {{ if .colspan }}colspan="{{ .colspan }}"{{ end }}\n        {{ if .rowspan }}rowspan="{{ .rowspan }}"{{ end }}\n        {{ if .class }}class="{{ .class }}"{{ end }}>\n        {{ .content }}\n      </td>\n      {{ end }}\n    </tr>\n    {{ end }}\n  </tbody>\n</table>\n\n<!-- Usage in Markdown -->\n{{< merged-table class="financial-report" >}}\n  headers:\n    - cells:\n      - content: ""\n      - content: "Q1 2024"\n        colspan: 3\n      - content: "Q2 2024"\n        colspan: 3\n    - cells:\n      - content: "Category"\n      - content: "Jan"\n      - content: "Feb"\n      - content: "Mar"\n      - content: "Apr"\n      - content: "May"\n      - content: "Jun"\n  rows:\n    - cells:\n      - content: "Electronics"\n      - content: "$15,000"\n      - content: "$18,000"\n      - content: "$22,000"\n      - content: "$25,000"\n      - content: "$28,000"\n      - content: "$30,000"\n{{< /merged-table >}}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"react-and-mdx-integration\">React and MDX Integration\u003C/h3>\n\u003Cp>Advanced table components for MDX documents:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// components/MergedTable.jsx - React component for cell merging\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span> \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> styled \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'styled-components'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">StyledTable\u003C/span> = styled.\u003Cspan class=\"hljs-property\">table\u003C/span>\u003Cspan class=\"hljs-string\">`\n  border-collapse: collapse;\n  width: 100%;\n  margin: 20px 0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">StyledTh\u003C/span> = styled.\u003Cspan class=\"hljs-property\">th\u003C/span>\u003Cspan class=\"hljs-string\">`\n  background: \u003Cspan class=\"hljs-subst\">${props => props.merged ? \n    \u003Cspan class=\"hljs-string\">'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'\u003C/span> : \n    \u003Cspan class=\"hljs-string\">'#f8f9fa'\u003C/span>}\u003C/span>;\n  color: \u003Cspan class=\"hljs-subst\">${props => props.merged ? \u003Cspan class=\"hljs-string\">'white'\u003C/span> : \u003Cspan class=\"hljs-string\">'#333'\u003C/span>}\u003C/span>;\n  padding: 15px 12px;\n  text-align: \u003Cspan class=\"hljs-subst\">${props => props.align || \u003Cspan class=\"hljs-string\">'left'\u003C/span>}\u003C/span>;\n  font-weight: 600;\n  border: 1px solid #dee2e6;\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">StyledTd\u003C/span> = styled.\u003Cspan class=\"hljs-property\">td\u003C/span>\u003Cspan class=\"hljs-string\">`\n  padding: 12px;\n  border: 1px solid #dee2e6;\n  text-align: \u003Cspan class=\"hljs-subst\">${props => props.align || \u003Cspan class=\"hljs-string\">'left'\u003C/span>}\u003C/span>;\n  vertical-align: top;\n  \n  &:hover {\n    background-color: #f8f9fa;\n  }\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">TableRow\u003C/span> = styled.\u003Cspan class=\"hljs-property\">tr\u003C/span>\u003Cspan class=\"hljs-string\">`\n  &:nth-child(even) {\n    background-color: rgba(0, 0, 0, 0.02);\n  }\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">MergedTable\u003C/span> = (\u003Cspan class=\"hljs-params\">{ \n  data, \n  headers, \n  className = \u003Cspan class=\"hljs-string\">''\u003C/span>, \n  style = \u003Cspan class=\"hljs-string\">'professional'\u003C/span> \n}\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">renderCell\u003C/span> = (\u003Cspan class=\"hljs-params\">cell, isHeader = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">CellComponent\u003C/span> = isHeader ? \u003Cspan class=\"hljs-title class_\">StyledTh\u003C/span> : \u003Cspan class=\"hljs-title class_\">StyledTd\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">CellComponent\u003C/span>\n        \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.id\u003C/span> || \u003Cspan class=\"hljs-attr\">Math.random\u003C/span>()}\n        \u003Cspan class=\"hljs-attr\">colSpan\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.colspan\u003C/span> || \u003Cspan class=\"hljs-attr\">1\u003C/span>}\n        \u003Cspan class=\"hljs-attr\">rowSpan\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.rowspan\u003C/span> || \u003Cspan class=\"hljs-attr\">1\u003C/span>}\n        \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.align}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">merged\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.merged}\u003C/span>\n        \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{cell.className}\u003C/span>\n      >\u003C/span>\n        {cell.content}\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">CellComponent\u003C/span>>\u003C/span>\u003C/span>\n    );\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">StyledTable\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">merged-table\u003C/span> ${\u003Cspan class=\"hljs-attr\">className\u003C/span>}`}>\u003C/span>\n      {headers && (\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n          {headers.map((headerRow, idx) => (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">TableRow\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{idx}\u003C/span>>\u003C/span>\n              {headerRow\n                .filter(cell => !cell.skip)\n                .map(cell => renderCell(cell, true))\n              }\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">TableRow\u003C/span>>\u003C/span>\n          ))}\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        {data.map((row, idx) => (\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">TableRow\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{idx}\u003C/span>>\u003C/span>\n            {row\n              .filter(cell => !cell.skip)\n              .map(cell => renderCell(cell, false))\n            }\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">TableRow\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\">StyledTable\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-comment\">// Usage in MDX\u003C/span>\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">ComparisonTableExample\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = [\n    [\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-string\">'empty'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Free Plan'\u003C/span>, \u003Cspan class=\"hljs-attr\">colspan\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-attr\">merged\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Paid Plans'\u003C/span>, \u003Cspan class=\"hljs-attr\">colspan\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-attr\">merged\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }\n    ],\n    [\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Feature'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Basic'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Plus'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Pro'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Enterprise'\u003C/span> }\n    ]\n  ];\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = [\n    [\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Users'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'feature-name'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'1'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'5'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'25'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Unlimited'\u003C/span> }\n    ],\n    [\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Storage'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'feature-name'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'1GB'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'10GB'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'100GB'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'1TB'\u003C/span> }\n    ],\n    [\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Support'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'feature-name'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Community'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Email'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'Priority'\u003C/span> },\n      { \u003Cspan class=\"hljs-attr\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'24/7 Phone'\u003C/span> }\n    ]\n  ];\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">MergedTable\u003C/span> \u003Cspan class=\"hljs-attr\">headers\u003C/span>=\u003Cspan class=\"hljs-string\">{headers}\u003C/span> \u003Cspan class=\"hljs-attr\">data\u003C/span>=\u003Cspan class=\"hljs-string\">{data}\u003C/span> />\u003C/span>\u003C/span>;\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-styling-and-responsive-design\">Advanced Styling and Responsive Design\u003C/h2>\n\u003Ch3 id=\"css-grid-integration-for-complex-layouts\">CSS Grid Integration for Complex Layouts\u003C/h3>\n\u003Cp>Combining CSS Grid with table cell merging for responsive designs:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Advanced table styling with CSS Grid fallback */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-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\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, Roboto, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Professional styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\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\">vertical-align\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Merged cell styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.merged-header\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\">#6366f1\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#8b5cf6\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">700\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.category-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\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\">#6366f1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.data-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, Monaco, \u003Cspan class=\"hljs-string\">'Cascadia Code'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.highlight-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fef3c7\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f59e0b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive behavior */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-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\">10px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Convert to card layout on mobile */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\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\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e5e9\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-cards\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\">top\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">110px\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: auto;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">page-break-inside\u003C/span>: avoid;\n    \u003Cspan class=\"hljs-attribute\">page-break-after\u003C/span>: auto;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-header-group;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.merged-header\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>: black \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Dark mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-color-scheme\u003C/span>: dark) {\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#f9fafb\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#f9fafb\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.category-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#374151\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-right-color\u003C/span>: \u003Cspan class=\"hljs-number\">#8b5cf6\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.advanced-merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.highlight-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#451a03\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-left-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f59e0b\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"interactive-table-features\">Interactive Table Features\u003C/h3>\n\u003Cp>Adding interactivity to merged tables with JavaScript:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// interactive-table.js - Enhanced table functionality\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveMergedTable\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, options = {}\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(tableSelector);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: options.\u003Cspan class=\"hljs-property\">sortable\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filterable\u003C/span>: options.\u003Cspan class=\"hljs-property\">filterable\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">expandable\u003C/span>: options.\u003Cspan class=\"hljs-property\">expandable\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">exportable\u003C/span>: options.\u003Cspan class=\"hljs-property\">exportable\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      ...options\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableFeatures\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">responsive\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">makeResponsive\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">sortable\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">filterable\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addFilteringCapability\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">addTableFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Add data labels for responsive behavior\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headers[index] && !cell.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>)) {\n          cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-label'\u003C/span>, headers[index]);\n        }\n      });\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Add hover effects for merged cells\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[colspan], [rowspan]'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n      cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'merged-cell'\u003C/span>);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Add click handlers for expandable sections\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">expandable\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> expandable = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-expandable]'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (expandable) {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleExpandableSection\u003C/span>(expandable);\n        }\n      });\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Add resize observer for responsive behavior\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">ResizeObserver\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> resizeObserver = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>();\n      });\n      resizeObserver.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">makeResponsive\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> mediaQuery = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchMedia\u003C/span>(\u003Cspan class=\"hljs-string\">'(max-width: 768px)'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleMediaChange\u003C/span> = (\u003Cspan class=\"hljs-params\">e\u003C/span>) => {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">matches\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-cards'\u003C/span>);\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-cards'\u003C/span>);\n      }\n    };\n    \n    \u003Cspan class=\"hljs-title function_\">handleMediaChange\u003C/span>(mediaQuery);\n    mediaQuery.\u003Cspan class=\"hljs-title function_\">addListener\u003C/span>(handleMediaChange);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">addSortingCapability\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th:not([colspan]):not([rowspan])'\u003C/span>);\n    \n    headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'no-sort'\u003C/span>)) {\n        header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n        header.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> += \u003Cspan class=\"hljs-string\">' <span class="sort-indicator">↕</span>'\u003C/span>;\n        \n        header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(index);\n        });\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">sortTable\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n    \n    \u003Cspan class=\"hljs-comment\">// Determine sort direction\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentDirection = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-sort-direction'\u003C/span>) || \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> newDirection = currentDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n    \n    rows.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> aVal = a.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> bVal = b.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \n      \u003Cspan class=\"hljs-comment\">// Try numeric comparison first\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> aNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aVal.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^0-9.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> bNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bVal.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^0-9.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n      \n      \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(aNum) && !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(bNum)) {\n        comparison = aNum - bNum;\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        comparison = aVal.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bVal);\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> newDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? comparison : -comparison;\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Reorder rows\u003C/span>\n    rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n    \n    \u003Cspan class=\"hljs-comment\">// Update sort indicators\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>(columnIndex, newDirection);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-sort-direction'\u003C/span>, newDirection);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">activeColumn, direction\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n    \n    headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = header.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index === activeColumn) {\n          indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'↑'\u003C/span> : \u003Cspan class=\"hljs-string\">'↓'\u003C/span>;\n          indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'↕'\u003C/span>;\n          indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0.3'\u003C/span>;\n        }\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">addFilteringCapability\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Create filter row\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> thead = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n    filterRow.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-row'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead tr:first-child th'\u003C/span>);\n    \n    headerCells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterCell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>) || header.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'rowspan'\u003C/span>)) {\n        \u003Cspan class=\"hljs-comment\">// Handle merged header cells\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>)) {\n          filterCell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>, header.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>));\n        }\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header.\u003Cspan class=\"hljs-title function_\">hasAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'rowspan'\u003C/span>)) {\n          filterCell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>; \u003Cspan class=\"hljs-comment\">// No filter for merged cells\u003C/span>\n        }\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Regular filter input\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> input = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        input.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        input.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">`Filter \u003Cspan class=\"hljs-subst\">${header.textContent.trim()}\u003C/span>...`\u003C/span>;\n        input.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-filter'\u003C/span>;\n        input.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> = index;\n        \n        input.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterTable\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        filterCell.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(input);\n      }\n      \n      filterRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filterCell);\n    });\n    \n    thead.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filterRow);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">filterTable\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex, filterValue\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterText = filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \n    rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellText = row.\u003Cspan class=\"hljs-property\">children\u003C/span>[columnIndex]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldShow = !filterText || cellText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterText);\n      \n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = shouldShow ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">toggleExpandableSection\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> section = element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-expandable'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-section="\u003Cspan class=\"hljs-subst\">${section}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExpanded = element.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n    \n    targetRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = isExpanded ? \u003Cspan class=\"hljs-string\">'none'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    });\n    \n    element.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, !isExpanded);\n    element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'expanded'\u003C/span>, !isExpanded);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Handle dynamic table adjustments on resize\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerWidth = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">offsetWidth\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableWidth > containerWidth) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'table-scroll'\u003C/span>);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'table-scroll'\u003C/span>);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">exportTable\u003C/span>(\u003Cspan class=\"hljs-params\">format = \u003Cspan class=\"hljs-string\">'csv'\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>();\n    \n    \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (format) {\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'csv'\u003C/span>:\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportToCSV\u003C/span>(data);\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'json'\u003C/span>:\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportToJSON\u003C/span>(data);\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'xlsx'\u003C/span>:\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportToExcel\u003C/span>(data);\n        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n      \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Unsupported export format:'\u003C/span>, format);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>))\n      .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>))\n      .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()));\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> { headers, rows };\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">exportToCSV\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> csv = data.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>) + \u003Cspan class=\"hljs-string\">'\\n'\u003C/span>;\n    csv += data.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>)).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([csv], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text/csv'\u003C/span> });\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> url = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n    link.\u003Cspan class=\"hljs-property\">href\u003C/span> = url;\n    link.\u003Cspan class=\"hljs-property\">download\u003C/span> = \u003Cspan class=\"hljs-string\">'table-export.csv'\u003C/span>;\n    link.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">revokeObjectURL\u003C/span>(url);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">exportToJSON\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> json = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>({\n      \u003Cspan class=\"hljs-attr\">headers\u003C/span>: data.\u003Cspan class=\"hljs-property\">headers\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">rows\u003C/span>: data.\u003Cspan class=\"hljs-property\">rows\u003C/span>\n    }, \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([json], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'application/json'\u003C/span> });\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> url = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'a'\u003C/span>);\n    link.\u003Cspan class=\"hljs-property\">href\u003C/span> = url;\n    link.\u003Cspan class=\"hljs-property\">download\u003C/span> = \u003Cspan class=\"hljs-string\">'table-export.json'\u003C/span>;\n    link.\u003Cspan class=\"hljs-title function_\">click\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">revokeObjectURL\u003C/span>(url);\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.advanced-merged-table'\u003C/span>);\n  \n  tables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveMergedTable\u003C/span>(table, {\n      \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filterable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">exportable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    });\n  });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-content-management-systems\">Integration with Content Management Systems\u003C/h2>\n\u003Cp>Table cell merging integrates seamlessly with modern content management workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation systems and CI/CD pipelines\u003C/a>, advanced table structures can be automatically generated from data sources while maintaining proper cell spanning and responsive design across all deployment environments.\u003C/p>\n\u003Cp>For comprehensive documentation systems, cell merging techniques work effectively with \u003Ca href=\"/blog/markdown-progressive-web-app-documentation-complete-guide\">Progressive Web App documentation platforms\u003C/a> to create offline-capable data displays that preserve complex table structures and interactive features while providing enhanced user experiences for data-heavy technical documentation.\u003C/p>\n\u003Cp>When building sophisticated content architectures, proper table design complements \u003Ca href=\"/blog/markdown-version-control-git-integration-complete-guide\">version control and Git integration workflows\u003C/a> by ensuring that complex data presentations maintain their structure and formatting through collaborative editing processes and automated content validation systems.\u003C/p>\n\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"cell-spanning-conflicts\">Cell Spanning Conflicts\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Overlapping cell spans causing layout breaks\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Problem: Conflicting spans -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">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>Header A\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>Header B\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span> \u003Cspan class=\"hljs-comment\"><!-- This conflicts -->\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>Header C\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span> \u003Cspan class=\"hljs-comment\"><!-- This also conflicts -->\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>Sub A1\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>Sub A2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Missing cells due to conflicts -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Solution: Proper cell accounting -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">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>Header A\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>Header B\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>Header C\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>Sub A1\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>Sub A2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Header B continues here (no cell needed) -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Sub C1\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>Sub C2\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\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-design-issues\">Responsive Design Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Merged cells breaking on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile-first approach for merged tables */\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\">.merged-table\u003C/span> \u003Cspan class=\"hljs-selector-attr\">[colspan]\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.merged-table\u003C/span> \u003Cspan class=\"hljs-selector-attr\">[rowspan]\u003C/span> {\n    \u003Cspan class=\"hljs-comment\">/* Reset spanning on mobile */\u003C/span>\n    colspan: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    rowspan: \u003Cspan class=\"hljs-number\">1\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Alternative: Hide complex merged structures */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.complex-merge\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.mobile-alternative\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table-cell;\n  }\n}\n\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\">.merged-table\u003C/span> \u003Cspan class=\"hljs-selector-class\">.mobile-alternative\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"platform-compatibility\">Platform Compatibility\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Different Markdown processors handling HTML tables inconsistently\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-python\">\u003Cspan class=\"hljs-comment\"># compatibility_checker.py - Validate table compatibility\u003C/span>\n\u003Cspan class=\"hljs-keyword\">def\u003C/span> \u003Cspan class=\"hljs-title function_\">validate_table_compatibility\u003C/span>(\u003Cspan class=\"hljs-params\">html_content, target_platforms\u003C/span>):\n    \u003Cspan class=\"hljs-string\">"""Check table compatibility across different platforms"""\u003C/span>\n    \n    platforms = {\n        \u003Cspan class=\"hljs-string\">'github'\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">'supports_html_tables'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_colspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_rowspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css_support'\u003C/span>: \u003Cspan class=\"hljs-string\">'limited'\u003C/span>\n        },\n        \u003Cspan class=\"hljs-string\">'gitlab'\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">'supports_html_tables'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_colspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_rowspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css_support'\u003C/span>: \u003Cspan class=\"hljs-string\">'limited'\u003C/span>\n        },\n        \u003Cspan class=\"hljs-string\">'jekyll'\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">'supports_html_tables'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_colspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_rowspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css_support'\u003C/span>: \u003Cspan class=\"hljs-string\">'full'\u003C/span>\n        },\n        \u003Cspan class=\"hljs-string\">'hugo'\u003C/span>: {\n            \u003Cspan class=\"hljs-string\">'supports_html_tables'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_colspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'supports_rowspan'\u003C/span>: \u003Cspan class=\"hljs-literal\">True\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'css_support'\u003C/span>: \u003Cspan class=\"hljs-string\">'full'\u003C/span>\n        }\n    }\n    \n    compatibility_report = {}\n    \n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> platform \u003Cspan class=\"hljs-keyword\">in\u003C/span> target_platforms:\n        platform_config = platforms.get(platform, {})\n        issues = []\n        \n        \u003Cspan class=\"hljs-comment\"># Check for unsupported features\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'colspan='\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> html_content \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> platform_config.get(\u003Cspan class=\"hljs-string\">'supports_colspan'\u003C/span>):\n            issues.append(\u003Cspan class=\"hljs-string\">'colspan not supported'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'rowspan='\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> html_content \u003Cspan class=\"hljs-keyword\">and\u003C/span> \u003Cspan class=\"hljs-keyword\">not\u003C/span> platform_config.get(\u003Cspan class=\"hljs-string\">'supports_rowspan'\u003C/span>):\n            issues.append(\u003Cspan class=\"hljs-string\">'rowspan not supported'\u003C/span>)\n            \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> \u003Cspan class=\"hljs-string\">'<style>'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> html_content \u003Cspan class=\"hljs-keyword\">and\u003C/span> platform_config.get(\u003Cspan class=\"hljs-string\">'css_support'\u003C/span>) == \u003Cspan class=\"hljs-string\">'limited'\u003C/span>:\n            issues.append(\u003Cspan class=\"hljs-string\">'inline CSS may not be supported'\u003C/span>)\n        \n        compatibility_report[platform] = {\n            \u003Cspan class=\"hljs-string\">'compatible'\u003C/span>: \u003Cspan class=\"hljs-built_in\">len\u003C/span>(issues) == \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'issues'\u003C/span>: issues\n        }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> compatibility_report\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table cell merging and spanning techniques transform simple tabular data into sophisticated, professional-grade presentations that effectively communicate complex information while maintaining accessibility and responsive design principles. By mastering HTML integration, platform-specific implementations, and advanced styling approaches, content creators can build comprehensive data displays that serve diverse audiences across multiple devices and platforms.\u003C/p>\n\u003Cp>The key to successful table cell merging lies in understanding the specific requirements of your target platforms, implementing proper responsive design strategies, and maintaining clean, semantic HTML structure that ensures accessibility and maintainability. Whether you're creating financial reports, product comparisons, or complex data visualizations, the techniques covered in this guide provide the foundation for building effective, professional table presentations.\u003C/p>\n\u003Cp>Remember to test your merged table implementations across all target platforms, implement fallback strategies for mobile devices, and maintain consistent styling that aligns with your overall design system. With careful attention to cell spanning logic, responsive behavior, and cross-platform compatibility, your advanced table layouts can effectively communicate complex data relationships while providing excellent user experiences across all viewing contexts.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-table-cell-merging-and-spanning","Why Master Table Cell Merging and Spanning?",2,{"id":20,"text":21,"level":18},"foundation-concepts","Foundation Concepts",{"id":23,"text":24,"level":18},"platform-specific-implementation-strategies","Platform-Specific Implementation Strategies",{"id":26,"text":27,"level":18},"advanced-styling-and-responsive-design","Advanced Styling and Responsive Design",{"id":29,"text":30,"level":18},"integration-with-content-management-systems","Integration with Content Management Systems",{"id":32,"text":33,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-table-cell-merging-and-advanced-formatting-complete-guide","Markdown Table Cell Merging and Advanced Formatting: Complete Guide to Complex Table Structures and Data Presentation","Master advanced Markdown table formatting including cell merging, spanning, complex layouts, and sophisticated data presentation techniques. Learn table styling, responsive design, and accessibility best practices.","Advanced Markdown table formatting with cell merging, spanning, and complex layout capabilities transforms basic data presentation into sophisticated information architecture that supports complex…","2025-12-08","markdown table cell merge, markdown table spanning, advanced markdown tables, markdown table formatting, table cell merging markdown, markdown complex tables, table layout markdown, responsive markdown tables",18,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-table-column-spanning-cell-merging-complete-guide","Markdown Table Column Spanning and Cell Merging: Complete Guide for Advanced Table Layouts","Master advanced Markdown table column spanning and cell merging techniques for creating complex layouts, hierarchical headers, and professional data presentations with enhanced visual structure.","Advanced Markdown table column spanning and cell merging techniques enable sophisticated table layouts that go beyond basic grid structures, allowing content creators to build hierarchical data…","2025-11-16","markdown table column span, markdown table cell merge, colspan markdown, table cell spanning, advanced markdown tables, table layout design, markdown table headers, complex table structures",19,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"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,1792184944228]