如何在 HTML 表格中实现跨行合并（rowspan）以优雅展示分组数据-html教程-PHP中文网

如何在 HTML 表格中实现跨行合并（rowspan）以优雅展示分组数据

本文详解如何通过 PHP 预处理 + HTML rowspan 属性，将同名“Name Product”的多条记录合并显示——仅首行显示产品名称，其余行留空，使表格结构更清晰、专业。

本文详解如何通过 php 预处理 + html `rowspan` 属性，将同名“name product”的多条记录合并显示——仅首行显示产品名称，其余行留空，使表格结构更清晰、专业。

在构建动态数据表格时，直接逐行输出（echo）虽简单，但难以实现语义化布局——尤其是当需要按“Name Product”分组、对重复值做视觉合并（如仅首行显示产品名，后续同组行留空）时，必须先分析数据结构，再生成 HTML。核心在于：分离数据处理与模板渲染，避免边读取边输出导致无法回溯和计算 rowspan。

✅ 正确思路：两阶段处理

第一阶段（数据聚合）：遍历查询结果，按 Name Product 分组，并统计每组出现次数（即需 rowspan 的行数）；

第二阶段（模板渲染）：遍历分组数据，对每组首行输出完整

 并设置 rowspan，其余行对应列输出空  或跳过。? 关键代码实现（精简可运行版）
<?php // 1️⃣ 数据预处理：按 Name Product 分组并记录每组行数
$groups = [];
$nomor_urut = 1;

while ($row = mysqli_fetch_assoc($result)) {
    $productName = $row["Name Product"];
    $type = $row["Type"];
    $noU = $row["NoU"];
    $kodeUnits = explode(',', $row["Kodeunit"] ?? '');

    if (!isset($groups[$productName])) {
        $groups[$productName] = [
            'rows' => [],
            'rowspan' => 0
        ];
    }
    $groups[$productName]['rows'][] = [
        'type' => $type,
        'noU' => $noU,
        'kodeUnits' => $kodeUnits
    ];
    $groups[$productName]['rowspan']++;
}

// 2️⃣ 渲染表格：逐组输出，控制 rowspan 和空单元格
echo '
';
echo '';

$globalIndex = 1; // 全局序号（1,2,3...）
foreach ($groups as $productName => $group) {
    $rows = $group['rows'];
    $rowspan = $group['rowspan'];

    for ($i = 0; $i ';
        // No 列：每行独立编号
        echo '';

        // Name Product 列：仅首行显示，带 rowspan
        if ($i === 0) {
            echo '';
        }

        // Type & Num of Units 列：每行独立
        echo '';
        echo '';

        // Button 列：传递当前 Type 和 KodeUnits 数组（安全 JSON 编码）
        $btnData = json_encode([
            'product' => $productName,
            'type' => $rows[$i]['type'],
            'units' => $rows[$i]['kodeUnits']
        ]);
        echo '';

        echo '';
    }
}
echo '
No
    Name Product
    Type
    Num of Units
    Button Click

' . $globalIndex++ . ' ' . htmlspecialchars($productName) . ' ' . htmlspecialchars($rows[$i]['type']) . ' ' . htmlspecialchars($rows[$i]['noU']) . ' Pcs 
';
?>⚠️ 注意事项与最佳实践


安全输出：始终使用 htmlspecialchars() 转义动态内容，防止 XSS；

JSON 编码规范：向 onclick 传递复杂数据时，用 json_encode() 并确保整个字符串被单引号包裹（如示例），避免引号冲突；

SQL 字段一致性：确认数据库字段名（如 Nama Produk vs Name Product）与 PHP 中 $row["Name Product"] 严格匹配（含空格/大小写）；

空数据兜底：$row["Kodeunit"] ?? '' 防止 explode() 报错；

性能提示：大数据量时，建议在 SQL 层用 GROUP_CONCAT + SUBSTRING_INDEX 辅助解析，而非 PHP 处理。

✅ 最终效果
表格中相同 Name Product（如 ADA、DUZK）的多行记录，将自动合并为逻辑组：

✅ 第一行显示产品名 + rowspan="3"（对应3种 Type）；

✅ 后续两行该列为空，保持对齐；

✅ 每行仍独立展示 Type、数量及操作按钮。
这种结构既符合语义化 HTML 标准，又大幅提升可读性与专业度——是报表类页面的推荐实践。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载