我必须制作一个非常复杂的表格,类似于下图中的表格。 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号细胞的大小不正确。 有人可以告诉我如何解决这个问题吗?
答案 0 :(得分:1)
你的表应该是每8行表5列(在合并许多单元格之前)。
您的所有行应该总共有5列(或 colspan="2"
后跟colspan="3"
示例)。这是前两个的情况,但从第三个到最后一个是错的。
没有小提琴,因为我不会为你做;)请提供一个小提琴表,如果有问题,表格为5C x 8R
编辑:好的在这里解决了:http://jsfiddle.net/W9nJU/5/
您没有在固定尺寸的网格或棋盘上画一张纸。 HTML表有点像拓扑,其大小无关紧要,戒指,马克杯,甜甜圈和土星环具有相同的特征:“它只是一个圆环”(如果土星环不是由百万环组成的)由块组成的戒指......我的比喻并不那么好)
当HTML表格算法从HTML代码构建单元格,行和列时(甚至可以在缺少几个单元格的情况下这样做),它不知道它们在图形浏览器或打印机上的大小。 。屏幕阅读器对此并不在乎。重要的是所需的细胞数量最少。然后CSS使用结果来设置样式并显示它。