[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-table-column-spanning-cell-merging-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":40,"related":41},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>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 presentations, complex headers, and professional documentation tables that enhance information organization while maintaining cross-platform compatibility and accessibility standards.\u003C/p>\n\u003Ch2 id=\"why-master-column-spanning-and-cell-merging\">Why Master Column Spanning and Cell Merging?\u003C/h2>\n\u003Cp>Professional table column spanning provides essential benefits for advanced data presentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Hierarchical Structure\u003C/strong>: Create multi-level headers and grouped content sections for enhanced organization\u003C/li>\n\u003Cli>\u003Cstrong>Visual Clarity\u003C/strong>: Improve table readability by spanning related information across multiple columns\u003C/li>\n\u003Cli>\u003Cstrong>Space Efficiency\u003C/strong>: Optimize table layouts by merging cells that contain similar or redundant information  \u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Achieve publication-quality table designs that match complex documentation requirements\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Semantics\u003C/strong>: Communicate data relationships through structural table design patterns\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-column-spanning-techniques\">Foundation Column Spanning Techniques\u003C/h2>\n\u003Ch3 id=\"basic-html-integration-in-markdown\">Basic HTML Integration in Markdown\u003C/h3>\n\u003Cp>Standard Markdown doesn't support column spanning natively, but HTML integration provides powerful spanning capabilities:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Column Spanning Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Simple Header Spanning\u003C/span>\n| Product Category | Details | Details | Details |\n|:-----------------|:--------|:--------|:--------|\n| \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display:table-cell; text-align:center;"\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"hljs-strong\">**ELECTRONICS INVENTORY**\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span> |\n| Item Name | Price | Stock | Status |\n| Laptop | $1299 | 45 | In Stock |\n| Mouse | $29 | 156 | In Stock |\n| Keyboard | $79 | 89 | Low Stock |\n\n\u003Cspan class=\"hljs-section\">## Header Group Spanning\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr>\n      <th rowspan="2">Product</th>\n      <th colspan="3">Sales Data</th>\n      <th colspan="2">Inventory</th>\n    </tr>\n    <tr>\n      <th>Q1</th>\n      <th>Q2</th>\n      <th>Q3</th>\n      <th>Current</th>\n      <th>Reserved</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Laptop Pro</td>\n      <td>245</td>\n      <td>312</td>\n      <td>278</td>\n      <td>67</td>\n      <td>12</td>\n    </tr>\n    <tr>\n      <td>Wireless Mouse</td>\n      <td>456</td>\n      <td>523</td>\n      <td>478</td>\n      <td>234</td>\n      <td>45</td>\n    </tr>\n    <tr>\n      <td>Mechanical Keyboard</td>\n      <td>189</td>\n      <td>267</td>\n      <td>234</td>\n      <td>89</td>\n      <td>23</td>\n    </tr>\n  </tbody>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-section\">## Mixed Content Spanning\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <tr>\n      <th colspan="6" style="text-align:center; background-color:#f0f8ff;">\n        <strong>PROJECT MANAGEMENT DASHBOARD</strong>\n      </th>\n    </tr>\n    <tr>\n      <th rowspan="2">Team</th>\n      <th colspan="3">Current Sprint</th>\n      <th colspan="2">Next Sprint</th>\n    </tr>\n    <tr>\n      <th>Tasks</th>\n      <th>Complete</th>\n      <th>Progress</th>\n      <th>Planned</th>\n      <th>Priority</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><strong>Frontend</strong></td>\n      <td>12</td>\n      <td>8</td>\n      <td>67%</td>\n      <td>15</td>\n      <td>High</td>\n    </tr>\n    <tr>\n      <td><strong>Backend</strong></td>\n      <td>9</td>\n      <td>7</td>\n      <td>78%</td>\n      <td>11</td>\n      <td>Critical</td>\n    </tr>\n    <tr>\n      <td><strong>QA</strong></td>\n      <td>6</td>\n      <td>4</td>\n      <td>67%</td>\n      <td>8</td>\n      <td>Medium</td>\n    </tr>\n    <tr style="background-color:#f9f9f9;">\n      <td><strong>Total</strong></td>\n      <td colspan="2" style="text-align:center;"><strong>19/27 Complete</strong></td>\n      <td><strong>70%</strong></td>\n      <td colspan="2" style="text-align:center;"><strong>34 Planned</strong></td>\n    </tr>\n  </tbody>\n</table>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hybrid-markdown-html-approach\">Hybrid Markdown-HTML Approach\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Advanced Spanning with Markdown Integration\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Financial Report with Spanning Headers\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"financial-table"\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>Quarterly Financial Report - 2025\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003C/span>\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\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">Account</th>\n      <th colspan="4">Quarterly Results (in thousands)</th>\n      <th rowspan="2">YTD Total</th>\n      <th rowspan="2">Variance</th>\n    </tr>\n    <tr>\n      <th>Q1</th>\n      <th>Q2</th>\n      <th>Q3</th>\n      <th>Q4 (Est)</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr class="section-header">\n      <td colspan="7" style="background-color:#e8f4f8; font-weight:bold; text-align:center;">\n        REVENUE STREAMS\n      </td>\n    </tr>\n    <tr>\n      <td>**Product Sales**</td>\n      <td style="text-align:right;">$245</td>\n      <td style="text-align:right;">$267</td>\n      <td style="text-align:right;">$289</td>\n      <td style="text-align:right;">$312</td>\n      <td style="text-align:right;">**$1,113**</td>\n      <td style="text-align:right; color:green;">+12%</td>\n    </tr>\n    <tr>\n      <td>**Service Revenue**</td>\n      <td style="text-align:right;">$89</td>\n      <td style="text-align:right;">$94</td>\n      <td style="text-align:right;">$101</td>\n      <td style="text-align:right;">$108</td>\n      <td style="text-align:right;">**$392**</td>\n      <td style="text-align:right; color:green;">+21%</td>\n    </tr>\n    <tr>\n      <td>**Licensing Fees**</td>\n      <td style="text-align:right;">$34</td>\n      <td style="text-align:right;">$39</td>\n      <td style="text-align:right;">$42</td>\n      <td style="text-align:right;">$45</td>\n      <td style="text-align:right;">**$160**</td>\n      <td style="text-align:right; color:green;">+32%</td>\n    </tr>\n    <tr style="background-color:#f0f8e8; font-weight:bold;">\n      <td>**Total Revenue**</td>\n      <td style="text-align:right;">**$368**</td>\n      <td style="text-align:right;">**$400**</td>\n      <td style="text-align:right;">**$432**</td>\n      <td style="text-align:right;">**$465**</td>\n      <td style="text-align:right;">**$1,665**</td>\n      <td style="text-align:right; color:green;">**+15%**</td>\n    </tr>\n    <tr class="section-header">\n      <td colspan="7" style="background-color:#f8e8e8; font-weight:bold; text-align:center;">\n        OPERATING EXPENSES\n      </td>\n    </tr>\n    <tr>\n      <td>**Personnel Costs**</td>\n      <td style="text-align:right;">$156</td>\n      <td style="text-align:right;">$163</td>\n      <td style="text-align:right;">$171</td>\n      <td style="text-align:right;">$178</td>\n      <td style="text-align:right;">**$668**</td>\n      <td style="text-align:right; color:red;">+14%</td>\n    </tr>\n    <tr>\n      <td>**Infrastructure**</td>\n      <td style="text-align:right;">$45</td>\n      <td style="text-align:right;">$48</td>\n      <td style="text-align:right;">$52</td>\n      <td style="text-align:right;">$55</td>\n      <td style="text-align:right;">**$200**</td>\n      <td style="text-align:right; color:red;">+22%</td>\n    </tr>\n    <tr>\n      <td>**Marketing & Sales**</td>\n      <td style="text-align:right;">$67</td>\n      <td style="text-align:right;">$73</td>\n      <td style="text-align:right;">$79</td>\n      <td style="text-align:right;">$85</td>\n      <td style="text-align:right;">**$304**</td>\n      <td style="text-align:right; color:red;">+27%</td>\n    </tr>\n    <tr style="background-color:#f8f0f0; font-weight:bold;">\n      <td>**Total Expenses**</td>\n      <td style="text-align:right;">**$268**</td>\n      <td style="text-align:right;">**$284**</td>\n      <td style="text-align:right;">**$302**</td>\n      <td style="text-align:right;">**$318**</td>\n      <td style="text-align:right;">**$1,172**</td>\n      <td style="text-align:right; color:red;">**+19%**</td>\n    </tr>\n    <tr style="background-color:#e8f8e8; font-weight:bold; font-size:1.1em;">\n      <td>**NET INCOME**</td>\n      <td style="text-align:right;">**$100**</td>\n      <td style="text-align:right;">**$116**</td>\n      <td style="text-align:right;">**$130**</td>\n      <td style="text-align:right;">**$147**</td>\n      <td style="text-align:right; color:green;">**$493**</td>\n      <td style="text-align:right; color:green;">**+47%**</td>\n    </tr>\n  </tbody>\n</table>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-spanning-patterns\">Advanced Spanning Patterns\u003C/h2>\n\u003Ch3 id=\"complex-header-hierarchies\">Complex Header Hierarchies\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Complex organizational chart table -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"org-chart-table"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width:100%; border-collapse:collapse;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-size:1.2em; font-weight:bold; margin:10px 0;"\u003C/span>>\u003C/span>\n    ORGANIZATIONAL STRUCTURE - ENGINEERING DEPARTMENT\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\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> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#2c3e50; color:white;"\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\">"8"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:12px; font-size:1.1em;"\u003C/span>>\u003C/span>\n        ENGINEERING ORGANIZATION CHART\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#34495e; color:white;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:10px; vertical-align:middle;"\u003C/span>>\u003C/span>Level\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:10px;"\u003C/span>>\u003C/span>DEVELOPMENT\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> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:10px;"\u003C/span>>\u003C/span>OPERATIONS\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> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:10px;"\u003C/span>>\u003C/span>QUALITY\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#5d6d7e; color:white;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>Frontend\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>Backend\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>Mobile\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>DevOps\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>SRE\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>QA\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px;"\u003C/span>>\u003C/span>Security\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#85929e; color:white;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>React/Vue\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>Node/Python\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>iOS/Android\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>AWS/K8s\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>Monitoring\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>Testing\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:6px; font-size:0.9em;"\u003C/span>>\u003C/span>AppSec\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> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#ecf0f1;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight:bold; padding:10px;"\u003C/span>>\u003C/span>**Director**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"7"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:10px; font-weight:bold;"\u003C/span>>\u003C/span>\n        Sarah Chen - VP of Engineering\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight:bold; padding:10px; background-color:#f8f9fa;"\u003C/span>>\u003C/span>**Senior**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>Alex Kumar\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Sr. Frontend\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>Maria Lopez\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Sr. Backend\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>David Park\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Sr. Mobile\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>James Wilson\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Sr. DevOps\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>Lisa Zhang\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Sr. SRE\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>Emma Davis\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>QA Lead\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>Michael Brown\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">br\u003C/span>/>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>Security Lead\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">small\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight:bold; padding:10px; background-color:#f8f9fa;"\u003C/span>>\u003C/span>**Mid-Level**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>3 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>4 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>3 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\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\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"font-weight:bold; padding:10px; background-color:#f8f9fa;"\u003C/span>>\u003C/span>**Junior**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>3 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>1 Engineer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>1 Engineer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>1 Engineer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>2 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:8px; text-align:center;"\u003C/span>>\u003C/span>1 Engineer\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#d5dbdb; font-weight:bold;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:10px;"\u003C/span>>\u003C/span>**Total**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**6**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**8**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**4**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**4**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**4**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**6**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:8px;"\u003C/span>>\u003C/span>**4**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"background-color:#aed6f1; font-weight:bold;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"padding:10px;"\u003C/span>>\u003C/span>**Department Total**\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"7"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align:center; padding:10px; font-size:1.1em;"\u003C/span>>\u003C/span>\n        **36 Engineers** (excluding leadership)\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dynamic-content-spanning\">Dynamic Content Spanning\u003C/h3>\n\u003Cp>JavaScript-enhanced table spanning for interactive content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// dynamic-table-spanning.js - Interactive table with dynamic spanning\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DynamicTableSpanner\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableGrouping\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableGrouping\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableSorting\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFiltering\u003C/span>: options.\u003Cspan class=\"hljs-property\">enableFiltering\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">spanningRules\u003C/span>: options.\u003Cspan class=\"hljs-property\">spanningRules\u003C/span> || {},\n            \u003Cspan class=\"hljs-attr\">animationDuration\u003C/span>: options.\u003Cspan class=\"hljs-property\">animationDuration\u003C/span> || \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spanningState\u003C/span> = {};\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initialize\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initialize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyInitialSpanning\u003C/span>();\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> 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        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalData\u003C/span> = rows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">cells\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: row,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> ({\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">textContent\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">attributes\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cell.\u003Cspan class=\"hljs-property\">attributes\u003C/span>),\n                    \u003Cspan class=\"hljs-attr\">classList\u003C/span>: \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>)\n                })),\n                \u003Cspan class=\"hljs-attr\">metadata\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">index\u003C/span>: rows.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(row),\n                    \u003Cspan class=\"hljs-attr\">groupKey\u003C/span>: row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">groupKey\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">spannable\u003C/span>: row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">spannable\u003C/span> !== \u003Cspan class=\"hljs-string\">'false'\u003C/span>\n                }\n            };\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedData\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalData\u003C/span>];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Group toggle functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableGrouping\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\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'group-toggle'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleGroup\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">groupKey\u003C/span>);\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Dynamic spanning controls\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = \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-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.spanning-controls'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (controls) {\n            controls.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">name\u003C/span> === \u003Cspan class=\"hljs-string\">'spanningMode'\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySpanningMode\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Responsive spanning\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\">responsive\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_\">handleResponsiveSpanning\u003C/span>(entries[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">contentRect\u003C/span>.\u003Cspan class=\"hljs-property\">width\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_\">applyInitialSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Apply default spanning rules\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\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">groupHeaders\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyGroupHeaderSpanning\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\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">summaryRows\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySummaryRowSpanning\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\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">categoricalData\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyCategoricalSpanning\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyGroupHeaderSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\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> columnCount = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Find group boundaries\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groups = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">identifyGroups\u003C/span>();\n        \n        groups.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">group\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Create group header row\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n            headerRow.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'group-header'\u003C/span>, \u003Cspan class=\"hljs-string\">'spanning-row'\u003C/span>);\n            headerRow.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">groupKey\u003C/span> = group.\u003Cspan class=\"hljs-property\">key\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerCell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            headerCell.\u003Cspan class=\"hljs-property\">colSpan\u003C/span> = columnCount;\n            headerCell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                <div class="group-header-content">\n                    <button class="group-toggle" data-group-key="\u003Cspan class=\"hljs-subst\">${group.key}\u003C/span>">\n                        <span class="toggle-icon">▼</span>\n                    </button>\n                    <strong>\u003Cspan class=\"hljs-subst\">${group.title}\u003C/span></strong>\n                    <span class="group-count">(\u003Cspan class=\"hljs-subst\">${group.rows.length}\u003C/span> items)</span>\n                </div>\n            `\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'group-header-cell'\u003C/span>);\n            \n            headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerCell);\n            \n            \u003Cspan class=\"hljs-comment\">// Insert group header before first group row\u003C/span>\n            tbody.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(headerRow, group.\u003Cspan class=\"hljs-property\">rows\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">element\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Add group class to all rows in this group\u003C/span>\n            group.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\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\">element\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`group-\u003Cspan class=\"hljs-subst\">${group.key}\u003C/span>`\u003C/span>);\n                row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">groupKey\u003C/span> = group.\u003Cspan class=\"hljs-property\">key\u003C/span>;\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applySummaryRowSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> summaryRows = \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\">'tr[data-summary="true"]'\u003C/span>);\n        \n        summaryRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">cells\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> summaryConfig = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">summaryRows\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (summaryConfig.\u003Cspan class=\"hljs-property\">spanColumns\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Merge specified columns for summary display\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> spanStart = summaryConfig.\u003Cspan class=\"hljs-property\">spanColumns\u003C/span>.\u003Cspan class=\"hljs-property\">start\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> spanEnd = summaryConfig.\u003Cspan class=\"hljs-property\">spanColumns\u003C/span>.\u003Cspan class=\"hljs-property\">end\u003C/span> || cells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">2\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells[spanStart]) {\n                    cells[spanStart].\u003Cspan class=\"hljs-property\">colSpan\u003C/span> = spanEnd - spanStart + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                    cells[spanStart].\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'summary-span-cell'\u003C/span>);\n                    \n                    \u003Cspan class=\"hljs-comment\">// Hide spanned cells\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = spanStart + \u003Cspan class=\"hljs-number\">1\u003C/span>; i <= spanEnd; i++) {\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells[i]) {\n                            cells[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                        }\n                    }\n                }\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyCategoricalSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> categoricalColumn = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">categoricalData\u003C/span>.\u003Cspan class=\"hljs-property\">column\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:not(.group-header)'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentCategory = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> spanStart = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> spanCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[categoricalColumn]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>?.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellValue !== currentCategory) {\n                \u003Cspan class=\"hljs-comment\">// Finalize previous span\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (spanStart && spanCount > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyCellSpan\u003C/span>(spanStart, categoricalColumn, spanCount);\n                }\n                \n                \u003Cspan class=\"hljs-comment\">// Start new span\u003C/span>\n                currentCategory = cellValue;\n                spanStart = row;\n                spanCount = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellValue === currentCategory) {\n                spanCount++;\n                \u003Cspan class=\"hljs-comment\">// Hide duplicate category cells\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[categoricalColumn]) {\n                    row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[categoricalColumn].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">visibility\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n                    row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[categoricalColumn].\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Finalize last span\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (spanStart && spanCount > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyCellSpan\u003C/span>(spanStart, categoricalColumn, spanCount);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyCellSpan\u003C/span>(\u003Cspan class=\"hljs-params\">row, columnIndex, spanCount\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell) {\n            cell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> = spanCount;\n            cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'spanned-cell'\u003C/span>, \u003Cspan class=\"hljs-string\">'categorical-span'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">verticalAlign\u003C/span> = \u003Cspan class=\"hljs-string\">'middle'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-rowspan'\u003C/span>, spanCount);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">identifyGroups\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groups = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groupMap = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">processedData\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> groupKey = rowData.\u003Cspan class=\"hljs-property\">metadata\u003C/span>.\u003Cspan class=\"hljs-property\">groupKey\u003C/span> || \n                           \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateGroupKey\u003C/span>(rowData);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!groupMap.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(groupKey)) {\n                groupMap.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(groupKey, {\n                    \u003Cspan class=\"hljs-attr\">key\u003C/span>: groupKey,\n                    \u003Cspan class=\"hljs-attr\">title\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatGroupTitle\u003C/span>(groupKey),\n                    \u003Cspan class=\"hljs-attr\">rows\u003C/span>: []\n                });\n            }\n            \n            groupMap.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(groupKey).\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(rowData);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(groupMap.\u003Cspan class=\"hljs-title function_\">values\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateGroupKey\u003C/span>(\u003Cspan class=\"hljs-params\">rowData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Generate group key based on first column or custom logic\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groupColumn = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">spanningRules\u003C/span>.\u003Cspan class=\"hljs-property\">groupBy\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groupValue = rowData.\u003Cspan class=\"hljs-property\">data\u003C/span>[groupColumn]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span> || \u003Cspan class=\"hljs-string\">'default'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> groupValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatGroupTitle\u003C/span>(\u003Cspan class=\"hljs-params\">groupKey\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> groupKey.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'-'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">word\u003C/span> =>\u003C/span> word.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>() + word.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleGroup\u003C/span>(\u003Cspan class=\"hljs-params\">groupKey\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> groupRows = \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\">`tr[data-group-key="\u003Cspan class=\"hljs-subst\">${groupKey}\u003C/span>"]:not(.group-header)`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggleIcon = \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\">`[data-group-key="\u003Cspan class=\"hljs-subst\">${groupKey}\u003C/span>"] .toggle-icon`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isCollapsed = toggleIcon.\u003Cspan class=\"hljs-property\">textContent\u003C/span> === \u003Cspan class=\"hljs-string\">'▶'\u003C/span>;\n        \n        groupRows.\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\">if\u003C/span> (isCollapsed) {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            }\n        });\n        \n        toggleIcon.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = isCollapsed ? \u003Cspan class=\"hljs-string\">'▼'\u003C/span> : \u003Cspan class=\"hljs-string\">'▶'\u003C/span>;\n        toggleIcon.\u003Cspan class=\"hljs-property\">parentElement\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'collapsed'\u003C/span>, !isCollapsed);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applySpanningMode\u003C/span>(\u003Cspan class=\"hljs-params\">mode\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Reset previous spanning\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">resetSpanning\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (mode) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'compact'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyCompactSpanning\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'detailed'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyDetailedSpanning\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'summary'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySummarySpanning\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyInitialSpanning\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyCompactSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Aggressive cell merging for mobile/compact view\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:not(.group-header)'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Merge similar adjacent cells in key columns\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> mergeColumns = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">compactMode\u003C/span>?.\u003Cspan class=\"hljs-property\">mergeColumns\u003C/span> || [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \n        mergeColumns.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">columnIndex\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">mergeAdjacentCells\u003C/span>(rows, columnIndex);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">mergeAdjacentCells\u003C/span>(\u003Cspan class=\"hljs-params\">rows, columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentValue = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentCell = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> spanCount = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = cell?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>?.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellValue === currentValue && currentCell) {\n                \u003Cspan class=\"hljs-comment\">// Extend span\u003C/span>\n                spanCount++;\n                cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                currentCell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> = spanCount;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Start new span\u003C/span>\n                currentValue = cellValue;\n                currentCell = cell;\n                spanCount = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResponsiveSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">containerWidth\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> breakpoints = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">responsive\u003C/span>.\u003Cspan class=\"hljs-property\">breakpoints\u003C/span> || {\n            \u003Cspan class=\"hljs-attr\">mobile\u003C/span>: \u003Cspan class=\"hljs-number\">480\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">tablet\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">desktop\u003C/span>: \u003Cspan class=\"hljs-number\">1024\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (containerWidth <= breakpoints.\u003Cspan class=\"hljs-property\">mobile\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyMobileSpanning\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (containerWidth <= breakpoints.\u003Cspan class=\"hljs-property\">tablet\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyTabletSpanning\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyDesktopSpanning\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyMobileSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Collapse into card-like layout with heavy spanning\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-spanning'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySpanningMode\u003C/span>(\u003Cspan class=\"hljs-string\">'compact'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyTabletSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Moderate spanning for tablet view\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-spanning'\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\">'tablet-spanning'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySpanningMode\u003C/span>(\u003Cspan class=\"hljs-string\">'detailed'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyDesktopSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Full spanning capability for desktop\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-spanning'\u003C/span>, \u003Cspan class=\"hljs-string\">'tablet-spanning'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySpanningMode\u003C/span>(\u003Cspan class=\"hljs-string\">'default'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">resetSpanning\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove all applied spanning\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\">'[rowspan], [colspan]'\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-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'rowspan'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">visibility\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        });\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\">'.group-header'\u003C/span>).\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-title function_\">remove\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Reset classes\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\">'.spanned-cell, .group-header-cell'\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_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'spanned-cell'\u003C/span>, \u003Cspan class=\"hljs-string\">'group-header-cell'\u003C/span>, \u003Cspan class=\"hljs-string\">'categorical-span'\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportSpannedTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Export current table state with spanning preserved\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clone = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">cloneNode\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Clean up dynamic elements\u003C/span>\n        clone.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.group-toggle'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">toggle\u003C/span> =>\u003C/span> {\n            toggle.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">html\u003C/span>: clone.\u003Cspan class=\"hljs-property\">outerHTML\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">markdown\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">convertToMarkdown\u003C/span>(clone),\n            \u003Cspan class=\"hljs-attr\">data\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractStructuredData\u003C/span>(clone)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">convertToMarkdown\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Convert spanned HTML table back to extended Markdown\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>(tableElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownLines = [];\n        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">cells\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'group-header'\u003C/span>)) {\n                \u003Cspan class=\"hljs-comment\">// Handle group headers\u003C/span>\n                markdownLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`| \u003Cspan class=\"hljs-subst\">${cells[\u003Cspan class=\"hljs-number\">0\u003C/span>].textContent.trim()}\u003C/span> | \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-string\">'|'\u003C/span>.repeat(cells[\u003Cspan class=\"hljs-number\">0\u003C/span>].colSpan - \u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>`\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Handle regular rows with spanning notation\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellData = cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">let\u003C/span> content = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        content += \u003Cspan class=\"hljs-string\">` [rowspan:\u003Cspan class=\"hljs-subst\">${cell.rowSpan}\u003C/span>]`\u003C/span>;\n                    }\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">colSpan\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        content += \u003Cspan class=\"hljs-string\">` [colspan:\u003Cspan class=\"hljs-subst\">${cell.colSpan}\u003C/span>]`\u003C/span>;\n                    }\n                    \n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> content;\n                });\n                \n                markdownLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">`| \u003Cspan class=\"hljs-subst\">${cellData.join(\u003Cspan class=\"hljs-string\">' | '\u003C/span>)}\u003C/span> |`\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> markdownLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractStructuredData\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Extract data with spanning relationships preserved\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = {\n            \u003Cspan class=\"hljs-attr\">headers\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">rows\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">spanningInfo\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">rowSpans\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">colSpans\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">groupHeaders\u003C/span>: []\n            }\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Extract headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = tableElement.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'thead tr, tr:first-child'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headerRow) {\n            data.\u003Cspan class=\"hljs-property\">headers\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headerRow.\u003Cspan class=\"hljs-property\">cells\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">content\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                \u003Cspan class=\"hljs-attr\">colspan\u003C/span>: cell.\u003Cspan class=\"hljs-property\">colSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>: cell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>\n            }));\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Extract data rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> bodyRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tableElement.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr, tr:not(:first-child)'\u003C/span>));\n        bodyRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'group-header'\u003C/span>)) {\n                data.\u003Cspan class=\"hljs-property\">spanningInfo\u003C/span>.\u003Cspan class=\"hljs-property\">groupHeaders\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                    rowIndex,\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">colspan\u003C/span>: row.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">colSpan\u003C/span>\n                });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowData = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">cells\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, cellIndex\u003C/span>) =>\u003C/span> ({\n                    \u003Cspan class=\"hljs-attr\">content\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">html\u003C/span>: cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>: cell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">colspan\u003C/span>: cell.\u003Cspan class=\"hljs-property\">colSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">position\u003C/span>: { \u003Cspan class=\"hljs-attr\">row\u003C/span>: rowIndex, \u003Cspan class=\"hljs-attr\">cell\u003C/span>: cellIndex }\n                }));\n                \n                data.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(rowData);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> data;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced CSS for spanning tables\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> spanningTableStyles = \u003Cspan class=\"hljs-string\">`\n<style>\n/* Spanning table base styles */\n.spanning-table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 1rem 0;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}\n\n.spanning-table th,\n.spanning-table td {\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    text-align: left;\n    vertical-align: top;\n}\n\n/* Group header styling */\n.group-header-cell {\n    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n    font-weight: 600;\n    text-align: center;\n    border-bottom: 2px solid #6c757d;\n}\n\n.group-header-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n.group-toggle {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 3px;\n    transition: background-color 0.2s;\n}\n\n.group-toggle:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n}\n\n.toggle-icon {\n    display: inline-block;\n    transition: transform 0.2s;\n    font-size: 12px;\n}\n\n.group-toggle.collapsed .toggle-icon {\n    transform: rotate(-90deg);\n}\n\n.group-count {\n    font-size: 0.85em;\n    color: #6c757d;\n    font-weight: 400;\n}\n\n/* Spanned cell styling */\n.spanned-cell {\n    background-color: #f8f9fa;\n    position: relative;\n}\n\n.spanned-cell::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 3px;\n    background-color: #007bff;\n}\n\n.categorical-span {\n    background: linear-gradient(to bottom, #e3f2fd 0%, #f3e5f5 100%);\n    font-weight: 500;\n}\n\n/* Summary row spanning */\n.summary-span-cell {\n    background-color: #fff3cd;\n    border: 2px solid #ffc107;\n    font-weight: 600;\n    text-align: center;\n}\n\n/* Section headers */\n.section-header td {\n    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);\n    color: white;\n    font-weight: bold;\n    text-align: center;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    padding: 12px;\n}\n\n/* Responsive spanning */\n@media (max-width: 768px) {\n    .tablet-spanning .spanning-table th,\n    .tablet-spanning .spanning-table td {\n        padding: 6px 8px;\n        font-size: 0.9em;\n    }\n    \n    .tablet-spanning .group-header-content {\n        flex-direction: column;\n        gap: 5px;\n    }\n}\n\n@media (max-width: 480px) {\n    .mobile-spanning .spanning-table {\n        font-size: 0.8em;\n    }\n    \n    .mobile-spanning .spanning-table th,\n    .mobile-spanning .spanning-table td {\n        padding: 4px 6px;\n    }\n    \n    .mobile-spanning .group-header-cell {\n        padding: 8px 6px;\n    }\n    \n    .mobile-spanning .group-count {\n        display: none;\n    }\n}\n\n/* Print styles for spanning tables */\n@media print {\n    .spanning-table {\n        break-inside: avoid;\n    }\n    \n    .group-header {\n        break-after: avoid;\n    }\n    \n    .group-toggle {\n        display: none;\n    }\n    \n    .spanned-cell::after {\n        display: none;\n    }\n}\n\n/* Animation for dynamic changes */\n.spanning-transition {\n    transition: all 0.3s ease-in-out;\n}\n\n.spanning-table tr {\n    transition: opacity 0.3s, transform 0.3s;\n}\n\n.spanning-table tr[aria-hidden="true"] {\n    opacity: 0;\n    transform: scaleY(0);\n    height: 0;\n    overflow: hidden;\n}\n\n/* Accessibility enhancements */\n.spanning-table th[scope="rowgroup"] {\n    border-left: 4px solid #007bff;\n}\n\n.spanning-table td[aria-rowspan] {\n    border-left: 2px solid #28a745;\n}\n\n/* Focus styles for keyboard navigation */\n.group-toggle:focus {\n    outline: 2px solid #007bff;\n    outline-offset: 2px;\n}\n\n.spanning-table th:focus,\n.spanning-table td:focus {\n    background-color: #e7f3ff;\n    outline: 2px solid #007bff;\n}\n</style>\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Usage example\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Add styles to head\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertAdjacentHTML\u003C/span>(\u003Cspan class=\"hljs-string\">'beforeend'\u003C/span>, spanningTableStyles);\n    \n    \u003Cspan class=\"hljs-comment\">// Initialize spanning for all tables with spanning-table class\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> spanningTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.spanning-table'\u003C/span>);\n    \n    spanningTables.\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_\">DynamicTableSpanner\u003C/span>(table, {\n            \u003Cspan class=\"hljs-attr\">enableGrouping\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">spanningRules\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">groupHeaders\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">summaryRows\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">spanColumns\u003C/span>: { \u003Cspan class=\"hljs-attr\">start\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">end\u003C/span>: -\u003Cspan class=\"hljs-number\">2\u003C/span> }\n                },\n                \u003Cspan class=\"hljs-attr\">categoricalData\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">column\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n                }\n            },\n            \u003Cspan class=\"hljs-attr\">responsive\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">breakpoints\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">mobile\u003C/span>: \u003Cspan class=\"hljs-number\">480\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">tablet\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">desktop\u003C/span>: \u003Cspan class=\"hljs-number\">1024\u003C/span>\n                }\n            }\n        });\n    });\n});\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">DynamicTableSpanner\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"creative-spanning-applications\">Creative Spanning Applications\u003C/h2>\n\u003Ch3 id=\"dashboard-style-data-presentation\">Dashboard-Style Data Presentation\u003C/h3>\n\u003Cp>Complex dashboard layouts with integrated spanning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"dashboard-container"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>Project Management Dashboard\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"dashboard-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\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"dashboard-title"\u003C/span>>\u003C/span>\n          Q4 2025 PROJECT STATUS OVERVIEW\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"main-headers"\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>Project\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Progress Metrics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>Resource Allocation\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>Timeline\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sub-headers"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Tasks\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>Completion\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>Quality\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>Team Size\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>Budget Used\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>Start Date\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>Target End\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> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-category"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"category-header"\u003C/span>>\u003C/span>\n          🚀 \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>HIGH PRIORITY PROJECTS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-row high-priority"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>E-commerce Platform\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>45/60\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>75%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric quality-good"\u003C/span>>\u003C/span>A\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>8 devs\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>$185k/$250k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-09-01\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-12-15\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-row high-priority"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>Mobile App Redesign\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>23/35\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>66%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric quality-fair"\u003C/span>>\u003C/span>B+\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>5 devs\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>$95k/$140k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-10-01\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-12-30\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-row"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-label"\u003C/span>>\u003C/span>High Priority Summary\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-data"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>68/95 tasks (72%)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-grade"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>A-\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-budget"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>$280k/$390k used\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-timeline"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>2 projects on track\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"spacer-row"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-category"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"category-header"\u003C/span>>\u003C/span>\n          ⚡ \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>MEDIUM PRIORITY PROJECTS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-row medium-priority"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>API Documentation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>18/25\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>72%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric quality-good"\u003C/span>>\u003C/span>A-\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>3 devs\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>$45k/$60k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-10-15\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-11-30\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-row medium-priority"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"project-name"\u003C/span>>\u003C/span>Performance Optimization\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>12/20\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric"\u003C/span>>\u003C/span>60%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"metric quality-fair"\u003C/span>>\u003C/span>B\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>4 devs\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"resource"\u003C/span>>\u003C/span>$67k/$90k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2025-11-01\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"timeline"\u003C/span>>\u003C/span>2026-01-15\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-row"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-label"\u003C/span>>\u003C/span>Medium Priority Summary\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-data"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>30/45 tasks (67%)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-grade"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>B+\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-budget"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>$112k/$150k used\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-timeline"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>2 projects active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"spacer-row"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"grand-total"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-label"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>OVERALL STATUS\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-tasks"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>98/140 Total Tasks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-quality"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>70%\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-resources"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>20 Engineers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-budget"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>$392k/$540k\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"total-timeline"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Q4 2025 Target\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.dashboard-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.dashboard-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.dashboard-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">135deg\u003C/span>, \u003Cspan class=\"hljs-number\">#667eea\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#764ba2\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.2em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.main-headers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.main-headers\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sub-headers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sub-headers\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.category-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\">#28a745\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#20c997\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.project-row\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.project-name\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.metric\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.quality-good\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.quality-fair\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.resource\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.timeline\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.summary-row\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.summary-row\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\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.summary-label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacer-row\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.spacer-row\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grand-total\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\">#495057\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">#6c757d\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.05em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.grand-total\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">255\u003C/span>,\u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.total-label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#343a40\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive adjustments */\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\">.dashboard-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.85em\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.dashboard-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.dashboard-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.dashboard-title\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Table column spanning techniques integrate effectively with comprehensive content management platforms. When combined with \u003Ca href=\"/blog/markdown-table-data-validation-quality-assurance-guide\">table data validation systems\u003C/a>, spanning layouts ensure that complex hierarchical data maintains both structural integrity and visual clarity across different rendering environments and output formats.\u003C/p>\n\u003Cp>For advanced content organization, column spanning works seamlessly with \u003Ca href=\"/blog/markdown-table-responsive-design-complete-guide\">responsive table design patterns\u003C/a> to create adaptive layouts that maintain their hierarchical structure while adjusting to different screen sizes and device capabilities, ensuring consistent user experience across all platforms.\u003C/p>\n\u003Cp>When building comprehensive documentation systems, spanning techniques complement \u003Ca href=\"/blog/markdown-table-sorting-filtering-interactive-guide\">table sorting and filtering functionality\u003C/a> by preserving grouped header relationships and maintaining logical data organization even when users interact with dynamic table features, creating robust and user-friendly data exploration interfaces.\u003C/p>\n\u003Ch2 id=\"accessibility-and-semantic-considerations\">Accessibility and Semantic Considerations\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessibility-enhanced spanning table -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"accessible-spanning-table"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Project status with hierarchical headers"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Q4 2025 Project Management Status\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"caption-details"\u003C/span>>\u003C/span>\n      Showing progress metrics, resource allocation, and timeline information \n      organized by priority level with spanning headers for enhanced readability.\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"6"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"main-title"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-description"\u003C/span>>\u003C/span>\n        PROJECT OVERVIEW DASHBOARD\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">rowspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>Project Name\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Progress Metrics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>Resources\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Tasks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Completion %\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Quality Grade\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>Team Size\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>Budget 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\">thead\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"group-header"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"6"\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"rowgroup"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"high-priority-group"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"priority-header"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"priority-icon"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>🔴\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        High Priority Projects\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>(2 projects in this category)\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"high-priority-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>E-commerce Platform\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>45 of 60 tasks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>75 percent complete\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Grade A\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>8 developers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>$185,000 of $250,000 budget used\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    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"high-priority-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>Mobile App Redesign\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>23 of 35 tasks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>66 percent complete\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-group"\u003C/span>>\u003C/span>Grade B plus\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>5 developers\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"resource-group"\u003C/span>>\u003C/span>$95,000 of $140,000 budget used\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    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"summary-row"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"high-priority-group"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>High Priority Summary\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Combined tasks and completion for high priority"\u003C/span>>\u003C/span>\n        68 of 95 total tasks completed, 72 percent average\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Average quality grade"\u003C/span>>\u003C/span>A minus\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Combined resource utilization"\u003C/span>>\u003C/span>\n        $280,000 of $390,000 total budget used across 13 developers\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-description"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  This table displays project management data organized by priority levels. \n  Header rows span multiple columns to group related information. \n  Use arrow keys to navigate between cells and read column relationships.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">caption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.1em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.caption-details\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: normal;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ccc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[scope=\u003Cspan class=\"hljs-string\">"colgroup"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[scope=\u003Cspan class=\"hljs-string\">"rowgroup"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e8f4fd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[scope=\u003Cspan class=\"hljs-string\">"row"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f9f9f9\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#0066cc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e6f3ff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.priority-icon\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.summary-row\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f5f5f5\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Enhanced keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-spanning-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-comment\">// Enhanced keyboard navigation for spanning tables\u003C/span>\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">enhanceTableAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.accessible-spanning-table'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Make cells focusable\u003C/span>\n    cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n        cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, index === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'0'\u003C/span> : \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Handle keyboard navigation\u003C/span>\n    table.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = cells[currentIndex];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> newIndex = currentIndex;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                newIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, cells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                newIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-comment\">// Find cell in next row, same column position\u003C/span>\n                newIndex = \u003Cspan class=\"hljs-title function_\">findCellInDirection\u003C/span>(currentIndex, \u003Cspan class=\"hljs-string\">'down'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-comment\">// Find cell in previous row, same column position\u003C/span>\n                newIndex = \u003Cspan class=\"hljs-title function_\">findCellInDirection\u003C/span>(currentIndex, \u003Cspan class=\"hljs-string\">'up'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                newIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                newIndex = cells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (newIndex !== currentIndex) {\n            cells[currentIndex].\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n            cells[newIndex].\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n            cells[newIndex].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            currentIndex = newIndex;\n            \n            \u003Cspan class=\"hljs-comment\">// Announce spanning information for screen readers\u003C/span>\n            \u003Cspan class=\"hljs-title function_\">announceSpanningInfo\u003C/span>(cells[newIndex]);\n        }\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">findCellInDirection\u003C/span>(\u003Cspan class=\"hljs-params\">index, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = cells[index];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRow = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRowIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-property\">rows\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentRow);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(currentRow.\u003Cspan class=\"hljs-property\">cells\u003C/span>).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetRowIndex = direction === \u003Cspan class=\"hljs-string\">'down'\u003C/span> ? currentRowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span> : currentRowIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetRow = table.\u003Cspan class=\"hljs-property\">rows\u003C/span>[targetRowIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!targetRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span> index;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = targetRow.\u003Cspan class=\"hljs-property\">cells\u003C/span>[\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentCellIndex, targetRow.\u003Cspan class=\"hljs-property\">cells\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>)];\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> targetCell ? \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(targetCell) : index;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">announceSpanningInfo\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> colspan = cell.\u003Cspan class=\"hljs-property\">colSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowspan = cell.\u003Cspan class=\"hljs-property\">rowSpan\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> announcement = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (colspan > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            announcement += \u003Cspan class=\"hljs-string\">`Spans \u003Cspan class=\"hljs-subst\">${colspan}\u003C/span> columns. `\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowspan > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            announcement += \u003Cspan class=\"hljs-string\">`Spans \u003Cspan class=\"hljs-subst\">${rowspan}\u003C/span> rows. `\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scope = cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (scope === \u003Cspan class=\"hljs-string\">'colgroup'\u003C/span>) {\n            announcement += \u003Cspan class=\"hljs-string\">'Column group header. '\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (scope === \u003Cspan class=\"hljs-string\">'rowgroup'\u003C/span>) {\n            announcement += \u003Cspan class=\"hljs-string\">'Row group header. '\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (announcement) {\n            \u003Cspan class=\"hljs-comment\">// Create temporary announcement for screen readers\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> announcer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            announcer.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n            announcer.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            announcer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n            announcer.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = announcement;\n            \n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(announcer);\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(announcer), \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize when DOM is loaded\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>, enhanceTableAccessibility);\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-spanning-issues\">Troubleshooting Common Spanning Issues\u003C/h2>\n\u003Ch3 id=\"cross-platform-compatibility-problems\">Cross-Platform Compatibility Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Column spanning renders inconsistently across different Markdown processors\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Platform-Safe Spanning Approaches\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Method 1: Minimal HTML Integration\u003C/span>\n| Project | Status | Details |\n|:--------|:-------|:--------|\n| \u003Cspan class=\"hljs-strong\">**DEVELOPMENT PROJECTS**\u003C/span> |||\n| Web App | Complete | All features delivered |\n| Mobile | In Progress | 75% complete |\n\n\u003Cspan class=\"hljs-section\">## Method 2: Graceful Degradation\u003C/span>\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\u003C/span>\n  \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\u003C/span>\n\u003Cspan class=\"hljs-code\">    <th colspan="3" style="text-align:center;">PROJECT STATUS</th>\n  </tr>\n  <tr>\n    <td>**Fallback for Markdown-only processors**</td>\n    <td>Status information here</td>\n    <td>Additional details</td>\n  </tr>\n</table>\n\u003C/span>\n\u003Cspan class=\"hljs-emphasis\">*Note: If spanning doesn't appear, this table still provides readable information.*\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"complex-spanning-calculation-errors\">Complex Spanning Calculation Errors\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Overlapping spans or misaligned table structure\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Systematic spanning validation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"span-validated"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- Use comments to track span calculations -->\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!--\n  Column layout:\n  1. Project (1 col)\n  2-4. Progress (3 cols: tasks, completion, quality) \n  5-6. Resources (2 cols: team, budget)\n  Total: 6 columns\n  -->\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>Project\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>     \u003Cspan class=\"hljs-comment\"><!-- Col 1, Rows 1-2 -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">colspan\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>Progress\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>    \u003Cspan class=\"hljs-comment\"><!-- Cols 2-4, Row 1 -->\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>Resources\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>   \u003Cspan class=\"hljs-comment\"><!-- Cols 5-6, Row 1 -->\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-comment\"><!-- Row 2: Project cell continues from rowspan -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Tasks\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>        \u003Cspan class=\"hljs-comment\"><!-- Col 2, Row 2 -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Complete\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>     \u003Cspan class=\"hljs-comment\"><!-- Col 3, Row 2 -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Quality\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>      \u003Cspan class=\"hljs-comment\"><!-- Col 4, Row 2 -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Team\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>         \u003Cspan class=\"hljs-comment\"><!-- Col 5, Row 2 -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Budget\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>       \u003Cspan class=\"hljs-comment\"><!-- Col 6, Row 2 -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- Validation: 1 + 3 + 2 = 6 columns ✓ -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-issues-with-large-spanning-tables\">Performance Issues with Large Spanning Tables\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Slow rendering or memory issues with complex spanning layouts\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Performance optimization for spanning tables */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-spanning-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed; \u003Cspan class=\"hljs-comment\">/* Faster layout calculation */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style; \u003Cspan class=\"hljs-comment\">/* Contain layout recalculations */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-comment\">/* Lazy render off-screen content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.spanning-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout;\n    \u003Cspan class=\"hljs-attribute\">will-change\u003C/span>: scroll-position;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Use CSS transforms instead of DOM manipulation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.collapsible-span\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scaleY\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">transform-origin\u003C/span>: top;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.collapsible-span\u003C/span>\u003Cspan class=\"hljs-selector-class\">.collapsed\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scaleY\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table column spanning and cell merging techniques transform basic data grids into sophisticated, hierarchical presentations that communicate complex information relationships while maintaining accessibility and cross-platform compatibility. By mastering HTML integration, responsive design patterns, and semantic markup approaches, content creators can build professional-grade table layouts that enhance both visual appeal and functional usability.\u003C/p>\n\u003Cp>The key to successful column spanning implementation lies in understanding the balance between visual complexity and structural clarity, ensuring that enhanced layouts improve rather than complicate data comprehension. Whether you're creating financial reports, project dashboards, or technical documentation, the techniques covered in this guide provide the foundation for building scalable, accessible, and maintainable table structures that serve diverse user needs and technical requirements.\u003C/p>\n\u003Cp>Remember to validate your spanning implementations across target platforms, implement proper accessibility features for assistive technologies, and consider the mobile user experience when designing complex hierarchical layouts. With careful attention to these considerations, your spanning tables can achieve professional publication quality while maintaining the simplicity and portability that makes Markdown such an effective content creation tool.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-master-column-spanning-and-cell-merging","Why Master Column Spanning and Cell Merging?",2,{"id":20,"text":21,"level":18},"foundation-column-spanning-techniques","Foundation Column Spanning Techniques",{"id":23,"text":24,"level":18},"advanced-spanning-patterns","Advanced Spanning Patterns",{"id":26,"text":27,"level":18},"creative-spanning-applications","Creative Spanning Applications",{"id":29,"text":30,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":32,"text":33,"level":18},"accessibility-and-semantic-considerations","Accessibility and Semantic Considerations",{"id":35,"text":36,"level":18},"troubleshooting-common-spanning-issues","Troubleshooting Common Spanning Issues",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-table-cell-merging-spanning-complete-guide","Markdown Table Cell Merging and Spanning: Complete Guide for Advanced Table Layouts and Complex Data Presentation","Master advanced Markdown table cell merging and spanning techniques for complex data presentation, multi-row headers, grouped content, and professional table layouts. Learn HTML integration, CSS styling, and cross-platform compatibility.","Advanced Markdown table cell merging and spanning techniques enable sophisticated data presentation that goes beyond basic tabular layouts to create complex, professional-grade tables with merged…","2025-11-02","markdown table cell merging, table cell spanning, markdown table colspan, markdown table rowspan, advanced markdown tables, html table markdown, table cell combining, complex markdown tables",17,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-table-cell-merging-and-advanced-formatting","Markdown Table Cell Merging and Advanced Formatting: Complete Guide for Professional Data Presentation","Master advanced table formatting in Markdown including cell merging, column spanning, row grouping, and complex table layouts. Learn platform-specific features and professional table design techniques.","Advanced Markdown table formatting capabilities extend far beyond basic grid layouts, offering sophisticated cell merging, column spanning, and professional formatting options that transform…","2025-12-13","markdown table merging, markdown table formatting, advanced markdown tables, cell spanning markdown, table design markdown, markdown table styling, professional markdown tables",13,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"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,1792184944785]