0

我必须制作一个非常复杂的表格，类似于下图中的表格。 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 没有正确的跨度大小。有人可以告诉我如何解决这个问题吗？

4

1 回答 1

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 使用结果来设置样式并显示它。

于 2013-05-22T13:54:42.147 回答