HTML5表格单元格合并问题求助：无法实现第三列多行拆分

要实现你要的表格效果，核心是正确使用rowspan属性匹配跨行列的数量，同时限制图片高度避免布局混乱。以下是修改后的完整代码及关键说明：

修改后的代码 #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cartelera</title>
    <style>
        table {
            width: 75%;
            text-align: center;
            border: 6px solid blue;
            border-collapse: collapse;
            margin-inline: auto;
            font-family: Helvetica;
            font-size: 16px;
        }
        td, th {
            border: 4px solid green;
            background-color: lightpink;
            padding: 8px;
        }
        /* 限制图片高度，避免行高被过度拉伸 */
        table img {
            max-height: 150px;
            object-fit: cover;
        }
        /* 影厅标题样式统一提取到CSS，避免内联样式冗余 */
        .sala-title {
            color: blue;
            background-color: red;
        }
        .sala-title:nth-child(3) {
            background-color: orange;
        }
    </style>
</head>
<body>
    <table>
        <caption>Cartelera</caption>
        <!-- 第一行：影厅1、海报、第一条影评 -->
        <tr>
            <th class="sala-title" rowspan="2">Sala 1</th>
            <td rowspan="2">
                <a href="https://www.imdb.com/title/tt1454468/">
                    <img src="imagenes/films/gravity.jpg" alt="Gravity" />
                </a>
            </td>
            <td>crítica 1</td>
        </tr>
        <!-- 第二行：仅第二条影评，影厅和海报通过rowspan跨到这一行 -->
        <tr>
            <td>crítica 2</td>
        </tr>
        <!-- 第三行：影厅2、海报、第一条影评 -->
        <tr>
            <th class="sala-title" rowspan="2">Sala 2</th>
            <td rowspan="2">
                <a href="http://www.imdb.com/title/tt1981115/">
                    <img src="imagenes/films/thor.jpg" alt="Thor" />
                </a>
            </td>
            <td>crítica 1</td>
        </tr>
        <!-- 第四行：仅第二条影评 -->
        <tr>
            <td>crítica 2</td>
        </tr>
    </table>
</body>
</html>

关键修改点说明 #

• rowspan的正确使用：给影厅(<th>)和海报(<td>)设置rowspan="2"，表示这两个单元格会占据2行的高度，刚好对应第三列的两条影评。后续仅需在新的<tr>中添加第三列的<td>即可，无需重复写影厅和海报单元格。
• 图片高度控制：通过max-height限制图片最大高度，并用object-fit: cover保证图片比例不变，避免图片过大导致行高被异常拉伸。
• 样式优化：把内联样式提取到CSS中，减少冗余，同时让代码更易维护。

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