求含Colspan与Rowspan的HTML表格表示构建算法及浏览器渲染规则

嘿，我正好对浏览器处理复杂表格的逻辑门儿清，给你一套能直接落地的解析算法，完全贴合浏览器的渲染规则，适配你用HTMLCleaner+Saxon的Java/XQuery环境：

核心思路：模拟浏览器的网格填充逻辑 #

浏览器处理表格（哪怕是rowspan/colspan写错的情况）本质是用网格占位的思路，我拆成几个可落地的步骤：

1. 先搭好初始网格架子 #

• 先遍历所有<tr>行，统计表格的最大列数：把每行里所有<td>/<th>的colspan加起来，取最大值；同时数清楚总行数。
• 建一个二维结构（比如Java里的二维数组，或者XQuery里的map），初始全是空的，用来标记哪些网格位置已经被单元格占了。

2. 逐行逐单元格填网格 #

• 遍历每一行，维护一个当前列指针，从0开始：
  • 对每个单元格：
    • 先找到当前行里第一个没被占用的网格位置（从当前列指针往后找，直到找到空位置）。
    • 拿到单元格的rowspan（默认是1，没写的话就按1算）和colspan（同理默认1）。
    • 把这个单元格的内容绑定到从(当前行, 当前列)开始，横跨colspan列、纵跨rowspan行的所有网格位置。
    • 把这些位置标记成“已占用”。
    • 更新当前列指针为当前列 + colspan，处理下一个单元格。

3. 处理错误场景的兼容逻辑 #

浏览器遇到rowspan/colspan写错的情况，会自动“补锅”，咱也得跟上：

• 如果单元格的rowspan超出了表格现有总行数，浏览器会自动在表格末尾加空行来容纳，咱的算法也要这么做。
• 如果colspan超出了当前行的可用列数，自动把表格的总列数扩大。
• 如果同一个网格位置被多个单元格抢着占，浏览器会留先出现的那个，后面的直接忽略。

4. XQuery核心实现片段参考 #

给你一段简化的XQuery逻辑，你可以直接整合到你的Saxon代码里：

declare function local:fill-grid($rows as element()*, $grid as map(), $current-row as xs:integer) as map() {
  if (empty($rows)) then $grid
  else
    let $row := head($rows)
    let $cells := $row/(td|th)
    let $initial-col := 0
    let $updated-grid := local:fill-row($cells, $grid, $current-row, $initial-col)
    return local:fill-grid(tail($rows), $updated-grid, $current-row + 1)
};

declare function local:fill-row($cells as element()*, $grid as map(), $row as xs:integer, $col as xs:integer) as map() {
  if (empty($cells)) then $grid
  else
    let $cell := head($cells)
    -- 处理默认值，没写rowspan/colspan就按1算
    let $rowspan := xs:integer($cell/@rowspan, 1)
    let $colspan := xs:integer($cell/@colspan, 1)
    -- 找到当前行第一个未被占用的列
    let $target-col := local:find-empty-col($grid, $row, $col)
    -- 标记所有被这个单元格占用的网格位置
    let $marked-grid := local:mark-occupied($grid, $row, $target-col, $rowspan, $colspan, $cell)
    return local:fill-row(tail($cells), $marked-grid, $row, $target-col + $colspan)
};

（注：local:find-empty-col和local:mark-occupied是辅助函数，你可以自己实现——前者就是从指定列开始找第一个未被标记的位置，后者就是把对应范围的网格都标记为已占用，并关联单元格内容）

5. 用示例表格验证 #

拿你提到的示例表格测试：

<table border=1> 
  <tr><td rowspan="3">1</td><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td><td>6</td></tr>

按照算法处理后，网格结构和浏览器渲染的完全一致：

• 第0行：[单元格1, 单元格2]
• 第1行：[单元格1（跨过来的）, 单元格3]
• 第2行：[单元格1（跨过来的）, 单元格4]
• 第3行：[单元格5, 单元格6]

内容的提问来源于stack exchange，提问作者cdarwin