行スパンを含むHTMLテーブル

Question

HTMLで以下のようなテーブルレイアウトを作成するにはどうすればよいですか？

------------------------------- 
|  2  | 1 row | 
|  rows  |-------------| 
|---------------|  2  | 
| 1 row  | rows  | 
------------------------------- 

Answer 1

各セルの高さを列で設定できます。また、rowspan属性を使用します。

td { 
 
    width: 100px; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td rowspan="2" height="80">2 rows</td> 
 
    <td height="40">1 row</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2" height="80">2 rows</td> 
 
    </tr> 
 
    <tr> 
 
    <td height="40">1 row</td> 
 
    </tr> 
 
</table>