使用 rowspan 和 colspan 的复杂表答案

【问题标题】：Complicated table using rowspan and colspan使用 rowspan 和 colspan 的复杂表
【发布时间】：2013-05-23 03:15:55
【问题描述】：

我必须制作一张非常复杂的表格，类似于下图中的表格。 http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png

我试过这个标记，但效果不好。 http://jsfiddle.net/miskolc/W9nJU/3/

    <body>
        <table border="10" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="1" rowspan="1">1</td>
            <td colspan="2" rowspan="1">2</td>
            <td colspan="2" rowspan="1">3</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="4">4</td>
            <td colspan="3" rowspan="2">5</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">6</td>
            <td colspan="1" rowspan="4">7</td>
        </tr>
        <tr>
            <td rowspan="4" colspan="1">8</td>
            <td rowspan="1" colspan="1">9</td>
            <td rowspan="1" colspan="1">10</td>            
            <td rowspan="2" colspan="1">11</td>            
        </tr>
        <tr>
            <td rowspan="1" colspan="2">12</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="1">13</td>
            <td rowspan="1" colspan="3">14</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="2">15</td>
            <td rowspan="1" colspan="1">16</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="2">17</td>
        </tr> 
        </table>
    </body>

和 CSS

 td {
     width:50px;
     height:50px;
     padding:0px;
 }

我不明白为什么单元格 6 与单元格 5 保持在同一行，即使它们位于不同的 tr 标签内。我也不明白为什么单元格 1、2、3 没有正确的跨度大小。谁能告诉我如何解决这个问题？

【问题讨论】：

您展示的预览 JPG 是一个“5 列”宽的模板。我建议你首先从一行 5 个相等的 td 开始。然后开始从上到下制作其他行。

标签： html css html-table

【解决方案1】：

您的表格应该是每 8 行 5 列的表格（在合并许多单元格之前）。

~~您的所有行总共应有 5 列（或 colspan="2" 后跟 colspan="3" 示例）。这是前两个的情况，但从第三个到最后一个都是错误的。~~

~~没有小提琴，因为我不会为你做；）如果还有问题，请提供一个 5C x 8R 的桌子~~

编辑：好的，在这里解决了：http://jsfiddle.net/W9nJU/5/

主要问题出在第 2 行和第 3 行：虽然它们在显示时具有双倍高度并给人以占据 4 行的印象，但它们应该 - 不，必须 - 每行只有 1 行。
因此，左侧的 3 个单元格“1、4 和 8”分别垂直跨越。 1、2 和 5 个单元格（但单元格 4 的高度是也将跨越 2 行的单元格高度的两倍）。
修改：单元格“4”跨越 2 行（不是 4 行）； “5”和“6”没有垂直跨度和resp。跨越 2 和 3 列；单元格“7”跨越 3 行（不是 4 行）
单元格“8”跨越 5 行而不是 4 行
我认为在标记为“9”-“17”的单元格中还有另一个值减 1，但我再也找不到了。也许不会。

您不是在一张具有固定大小网格的纸或棋盘上绘图。 HTML 表格有点像拓扑，其中大小无关紧要，环、杯子、甜甜圈和土星环具有相同的特征：“它只是一个圆环”（如果土星环不是由一百万个组成的由块制成的戒指...我的比喻不太好）
在 HTML 表格算法从 HTML 代码构建单元格、行和列时（它甚至可以在缺少一些单元格的情况下这样做！），它不知道它们在图形浏览器或打印机上的大小.屏幕阅读器对此毫不在意。重要的是所需的细胞数量最少。然后 CSS 使用结果来设置样式并显示它。

【讨论】：

基于单行高度，我会说这个模板实际上是 10 行高。我错了吗？
为什么第三个需要更多的列？我认为我从第二行指定的单元格中得到 (2+1) 加 2。如何设置行数和列数？
@Michael 2 行将是双倍高度，是的。但是你只需要8个tr就可以实现这个
OP：是的，你是对的。我没有考虑到这一点...... Facepalm
而问题实际上是：如果它可以用 8 行制作，那么它不应该那样做：它必须是。我评论了第 5-8 行并从这里开始尝试......请现在用一个工作小提琴查看我的编辑。