How can you merge rows and columns in HTML tables?

We are building a pricing page with a table comparing three plans. The 'Enterprise' plan has a special promotional banner row that needs to span across all three columns. How would you implement this, and what changes do you need to make to the other cell elements in that specific row?

Imagine you've added rowspan='3' to a table cell to group some user data, but now the layout of the subsequent two rows is completely shifted and broken. Walk me through how you would debug this and correct the cell count in those following rows.

We are building a dynamic report generator in React where users can group rows by category. When a category is grouped, we want to merge the category name cell vertically. How would you dynamically calculate the rowspan value based on the incoming API data, and how do you handle the conditional rendering of the subsequent cells in those rows?

A screen reader user reports that our complex financial table with merged headers is completely unintelligible. How would you refactor a table using colspan and rowspan to ensure it remains accessible, specifically regarding the use of the scope, id, or headers attributes?

We need to implement a virtualized data grid that supports merged cells (both row and column spans). Since virtualization unmounts off-screen rows, how would you calculate and maintain the layout integrity of merged cells that span across the virtualization boundary?

Our design team wants a highly responsive dashboard. They designed a complex desktop table with nested rowspans and colspans, but on mobile, it needs to collapse into a card-like layout. How would you handle this transition? Would you stick with native tables, or pivot to CSS Grid/Flexbox, and what are the accessibility trade-offs of your choice?

We are migrating a legacy enterprise reporting tool with thousands of complex, deeply nested tables (using heavy row/col spans) to a modern design system. How would you define the architectural strategy for our core Table component to support these legacy layouts while ensuring performance, accessibility, and ease of maintenance for product teams?

When designing a headless table library for an enterprise-wide UI kit, how would you model the state and API to allow developers to easily define arbitrary cell-merging logic without tightly coupling the layout logic to the rendering layer?