今天看到一份儿代码,发现table错行了,代码如下,虽然行的合并没必要这么合并,但是这样合并我也没看出错误来,愚钝
请教大家指点一下,为什么第三行贴附在第二行末尾去了。谢谢!
<table width="100%" border="1px">
<tr>
<td rowspan="3">1</td>
<td rowspan="3">2</td>
<td colspan="3">3</td>
<td colspan="2">4</td>
<td colspan="2">5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td rowspan="2">7</td>
<td rowspan="2">8</td>
<td rowspan="2">9</td>
<td rowspan="2">10</td>
<td rowspan="2">11</td>
<td rowspan="2">12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
[color=blue][b]错误的原因就是:第2个
中所有的都是rowspan=2,都是跨2行。加之第1个跨3行,所以第3个就没处放置了。给你2个改进的版本,自己体会一下table的拆分吧:
[/b][/color]
版本1:
[code="html"]
1 | 2 | 3 | 4 | 5 | ||||
6 | 7 | 8 | 9 | 10 | 11 | 12 | ||
这是第3行 | ||||||||
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9(这是第4行) |
[/code]
版本2:
[code="html"]
1 | 2 | 3 | 4 | 5 | ||||
6 | 7 | 8 | 9 | 10 | 11 | 12 | ||
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
[/code]
你自己算一下colspan和rowspan的总数都不匹配嘛