如何使用rowspan/colspan制作N×M表格：单元格含两行且第二行分两列

你需要的是每个视觉单元格分为上下两部分：上部分为整行内容（如图片），下部分拆分为左右两列（如编号和价格），以下是两种符合colspan/rowspan要求的实现方案，同时修正你代码中的语法问题：

方案一：单元格内嵌套表格（用colspan） #

在每个外层表格的<td>里嵌套一个小型表格，通过colspan让第一行内容跨两列，第二行分两列展示内容，结构清晰且易维护。

修改Artikal.php的get_html方法：

public function get_html()
{
    $html = "<td>";
    // 嵌套表格实现单元格内的两行结构
    $html .= "<table width='100%' border='0' cellpadding='2' cellspacing='0'>";
    
    // 第一行：图片，跨两列
    $html .= "<tr>";
    $html .= "<td colspan='2' align='center'>";
    // 处理图片路径
    if (isset($this->sifra) && isset($this->naziv) && isset($this->cena) && isset($this->kolicina)) {
        $imgSrc = $this->kolicina > 0 
            ? "images/" . str_replace(" ", "-", $this->naziv) . ".jpg" 
            : "images/none.png";
    } else {
        $imgSrc = "images/none.jpg";
    }
    $html .= "<img src='{$imgSrc}' width='100'>";
    $html .= "</td>";
    $html .= "</tr>";
    
    // 第二行：分两列展示编号和价格
    $html .= "<tr>";
    $sifra = isset($this->sifra) ? $this->sifra : "X";
    $html .= "<td align='left'><span class='sifra'>{$sifra}</span></td>";
    
    $cena = isset($this->cena) ? "{$this->cena} DIN" : "X";
    $html .= "<td align='right'><span class='cena'>{$cena}</span></td>";
    $html .= "</tr>";
    
    $html .= "</table>";
    $html .= "</td>";
    return $html;
}

index.php的代码无需修改，保持原有的6行9列循环即可，外层表格会自动生成对应结构。

方案二：外层表格用colspan构建（无嵌套） #

直接通过外层表格的colspan属性，将每个视觉单元格对应为两行：第一行的单元格跨2列放图片，第二行用两个单元格分别展示编号和价格。

修改index.php的代码：

if (isset($artikli)) {
    for ($i = 0; $i < 6; $i++) {
        // 视觉行第一行：放图片，每个单元格跨2列
        echo "<tr>";
        for ($j = 0; $j < 9; $j++) {
            $artikal = $artikli[$i * 9 + $j];
            echo "<td colspan='2' align='center' style='padding:2px;'>";
            // 处理图片路径
            if (isset($artikal->sifra) && isset($artikal->naziv) && isset($artikal->cena) && isset($artikal->kolicina)) {
                $imgSrc = $artikal->kolicina > 0 
                    ? "images/" . str_replace(" ", "-", $artikal->naziv) . ".jpg" 
                    : "images/none.png";
            } else {
                $imgSrc = "images/none.jpg";
            }
            echo "<img src='{$imgSrc}' width='100'>";
            echo "</td>";
        }
        echo "</tr>";
        
        // 视觉行第二行：分两列展示编号和价格
        echo "<tr>";
        for ($j = 0; $j < 9; $j++) {
            $artikal = $artikli[$i * 9 + $j];
            $sifra = isset($artikal->sifra) ? $artikal->sifra : "X";
            echo "<td align='left' style='padding:2px;'><span class='sifra'>{$sifra}</span></td>";
            
            $cena = isset($artikal->cena) ? "{$artikal->cena} DIN" : "X";
            echo "<td align='right' style='padding:2px;'><span class='cena'>{$cena}</span></td>";
        }
        echo "</tr>";
    }
}

这种方式无需修改Artikal.php，直接通过外层表格的结构实现需求，同样用到了colspan属性。

注意事项 #

你原代码中存在语法错误：str_replace(" ", "-", $this->naziv) . jpg\"缺少引号和连接符，正确写法应为str_replace(" ", "-", $this->naziv) . ".jpg\"，上述方案已修正该问题。

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