使用rowspan和colspan的复杂表 [英] Complicated table using rowspan and colspan
问题描述
我必须创建一个非常复杂的表格，类似于下面的图片。
http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png
I have to make a very complicated table similar to the one in the picture below. http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png
我试过这个标记，但是不能正常工作。
http://jsfiddle.net/miskolc/W9nJU/3/ p>
I tried this markup but it doesn't work well. 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没有正确的大小。
有人可以告诉我如何解决这个问题吗？
I don't understand why cell 6 remains on the same row as cell 5 even though they are inside different tr tags. I also don't understand why cells 1,2,3 don't have the correct spaning sizes. Can someone please tell me how to tackle this problem?
推荐答案
您的表格应该是每8行5列
Your table should be a 5 columns per 8 rows table (before merging many cells).
所有行应该共有5列（或 colspan =2 / code>后跟 colspan =3）。这是前两个的情况，但是从第三个到最后一个错误。
All your rows should have a total of 5 columns (or colspan="2" followed by colspan="3" by example). This is the case of the first 2 ones but then it's wrong from the third to the last one.
请为你提供一个小提琴，如果还有问题，表格为5C x 8R
strong>：OK解决了这里： http://jsfiddle.net/W9nJU/5/
- 主要的问题是第二行和第三行：当他们有一个双倍的高度显示时，使他们占据4行的印象，它们应该 - 它们不必每个只有1行。
因此，左边的3个单元格1,4和8 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然后使用结果的样式和显示它。
You're not drawing on a sheet of paper with a fixed-size grid or on a checkerboard. An HTML table is a bit like topology where size doesn't matter and a ring, a mug, a donut and Saturn ring have the same characteristics: "it's just a torus" (if the ring of Saturn wasn't made of a million rings made of blocks... my analogy isn't so good)
At the time the HTML table algorithm build the cells, rows and columns from HTML code (and it can even do so with a few cells lacking!), it has no idea of the size they will have on a graphical browser or on a printer. And a screen reader couldn't care less about that. What is important is the minimal number of cells needed. CSS then use the result to style and display it.
这篇关于使用rowspan和colspan的复杂表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png](\"http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png\"){kind=link}