大家看下这个不规范的table的html代码为什麽错行了

0 0

大家看下这个不规范的table的html代码为什麽错行了10

今天看到一份儿代码，发现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>

问题补充：<div class="quote_title">xiaolongfeixiang 写道</div><div class="quote_div"><span style="color: blue"><strong>错误的原因就是：第2个<tr>中所有的<td>都是rowspan=2，都是跨2行。加之第1个<tr>跨3行，所以第3个<tr>就没处放置了。 <br /> <br />给你2个改进的版本，自己体会一下table的拆分吧： <br /></strong></span> <br /> <br />版本1： <br /><pre name="code" class="html">
<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 >12</td>
</tr>
<tr>
    <td>这是第3行</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（这是第4行）</td>
</tr>
</table>
</pre> <br /> <br />版本2： <br /><pre name="code" class="html">
<table width="100%" border="1px">
<tr>
    <td rowspan="2">1</td>
    <td rowspan="2">2</td>
    <td colspan="3">3</td>
    <td colspan="2">4</td>
    <td colspan="2">5</td>
</tr>
<tr>
    <td rowspan="1">6</td>
    <td rowspan="1">7</td>
    <td rowspan="1">8</td>
    <td rowspan="1">9</td>
    <td rowspan="1">10</td>
    <td rowspan="1">11</td>
    <td rowspan="1">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>
</pre></div> <br />第二个方案也是我当时改的方法，至于第一种方法为什麽不对，还是没看明白。 <br /> <br />总共是9列。 <br />第一行共 9 列，前 2 列各占 3 行，后面 7 列各占一行。 <br />第二行共 7 列，所有列各占 2 行。 <br />第三行共 9 列，所有列各占 1 行。 <br /> <br />从数量上看是没问题的啊。

界面设计

2010年1月06日 22:26

hurui3550
8
0 0 0

2个答案按时间排序按投票排序

0 0

采纳的答案

错误的原因就是：第2个<tr>中所有的<td>都是rowspan=2，都是跨2行。加之第1个<tr>跨3行，所以第3个<tr>就没处放置了。

给你2个改进的版本，自己体会一下table的拆分吧：

版本1：

<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 >12</td>
</tr>
<tr>
    <td>这是第3行</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（这是第4行）</td>
</tr> 
</table>

版本2：

<table width="100%"  border="1px">
<tr>
    <td rowspan="2">1</td>
    <td rowspan="2">2</td>
    <td colspan="3">3</td>
    <td colspan="2">4</td>
    <td colspan="2">5</td>
</tr>
<tr>
    <td rowspan="1">6</td>
    <td rowspan="1">7</td>
    <td rowspan="1">8</td>
    <td rowspan="1">9</td>
    <td rowspan="1">10</td>
    <td rowspan="1">11</td>
    <td rowspan="1">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>

2010年1月07日 13:28