Question

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

Answer 1

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

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

~~没有小提琴，因为我不会为你做;）请提供一个小提琴表，如果有问题，表格为5C x 8R~~

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

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

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

使用rowspan和colspan的复杂表

1 个答案: