複雑テーブルROWSPANとCOLSPAN次画像

<!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>

を表示する画像は、次のコードを書か何とかROWSPANとCOLSPANはないたcode.Iから生成されるべき所望の結果が含まれています一緒に作業し、他の出力が生成されます。画像は、次のリンクでのショーです： - https://drive.google.com/file/d/0B3C84zpiG_wXVEVKU3ZlRFVBd00/view?usp=sharing

出典

2016-05-26 Aalind Sharma

このように：https://jsfiddle.net/21wd6ae7/ –

私はrowspan & colspanを使用してその構造を作成して、コードの下updated fiddle

を確認してください。

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

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

出典

2016-05-26 13:14:26

最後の行は必要ですか？ –

どの行をスパンしますか？この1 Colspan 3
行3？ –

最後に[Fiddle]（https://jsfiddle.net/21wd6ae7/2/）をチェックしてください。 –

複雑テーブルROWSPANとCOLSPAN次画像

答えて

関連する問題