Question

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
td, th{
    height: 20px;
    width: 80px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2"></td>    
  </tr>
  <tr>    
    <td></td>
  </tr>
  <tr>    
    <td rowspan="2" colspan="3"></td>
  </tr>
</table>
 
</body>
</html>

＆＃13;

图像包含应该从代码生成的所需结果。我编写了以下代码，但不知何故，rowspan和colspan不能一起工作，还会生成其他一些输出。图像显示在以下链接中： - https://drive.google.com/file/d/0B3C84zpiG_wXVEVKU3ZlRFVBd00/view?usp=sharing

Answer 1

我使用rowspan & colspan创建了该结构，请检查updated fiddle

<强> OR

代码如下：

td{
   padding:10px;
   text-align:center;
   background:#CCC;
}

<table border="1" cellpadding="0" cellspacing="0" width="100%">
    	<tr>
        	<td>
    	        Colspan 1
            </td>
        	<td>
    	        Colspan 1
            </td>
        	<td>
    	        Colspan 1
            </td>
        </tr>
    	<tr>
        	<td>
    	        Colspan 1
            </td>
        	<td colspan="2">
    	        Colspan 2
            </td>
        </tr>
    	<tr>
        	<td rowspan="2">
            	Rowspan 2
            </td>
        	<td colspan="2">
            	Colspan 2
            </td>
        </tr>
    	<tr>
        	<td colspan="2" rowspan="2">	        
            	Colspan 1 <br> Rowspan 2
            </td>
        </tr>
    	<tr>
        	<td>	        
            	Colspan 1
            </td>
        </tr>
    	<tr>
        	<td colspan="3" rowspan="3">
            	Colspan 3 <br> Rowspan 3
            </td>
        </tr>			
    </table>

复杂表rowspan和colspan显示以下图像

1 个答案: