HTML如何使用表创建一组框？

Question

＆＃13;

＆＃13;

<table style="width:100%; height:50%; border: 1px solid black;border-collapse: collapse;padding: 5px; text-align: center;" rules="all">
  <tr>
    <td colspan="4" rowspan="2">1</td>
    <td colspan="2" rowspan="2">2</td>


  </tr>
<tr>
    <td colspan="2" rowspan="2">3</td>
    <td colspan="4" rowspan="2">4</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我想创建一个包含2个矩形和2个正方形的表格，其中高度（行跨度）始终为2，第一个和最后一个矩形的宽度为4.

我希望我的桌子看起来像：

我完全陷入困境！我当前的表格绘制了4列正方形？！有人可以向我解释一下吗？我觉得这样的菜鸟！

提前谢谢！如果您有任何疑问，或者我需要解释任何问题，请告诉我！ ：）

Answer 1

<table style="width:500px; height:250px; border: 1px solid black;border-collapse: collapse;padding: 5px; text-align: center;" rules="all">
  <tr>
    <td colspan="2" >1</td>
    <td colspan="1" style="width: 33%;height:50%" >2</td>


  </tr>
<tr>
    <td colspan="1" style="width: 33%">3</td>
    <td colspan="2" >4</td>
</tr>
</table>

Answer 2

现在，表格用于编码，通常用于表格：表示具有一致列或行到组数据的信息。

如果它仅用于布局，请考虑使用带有css的容器：

＆＃13;

＆＃13;

div {
  border: 1px solid gray;
  float: left;
  height: 2em; /*2 em = 2x font-size*/
}
div.big {
  width: 66%;
}
div.small {
  width: 33%
}
/* make flip to next line if sums to 100% so leave 1%*/

＆＃13;

<div class="big">a</div>
<div class="small">b</div>

<div class="small">c</div>
<div class="big">d</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是你需要的吗？

正如您在下面的代码中看到的那样，我使用了div而不是表格。表格不是为布局创建的，这就是为什么我没有使用表格而且更喜欢使用div。

http://cssdeck.com/labs/full/vyrs7f0l

＆＃13;

＆＃13;

* { box-sizing: border-box; }
p { margin: 0; padding: 0; padding: 10px; }

#container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  padding: 20px;
}

#container .box {
  display: inline-block;;
  /* position: relative; */
  border: 1px solid black;
  height: 50%;
  margin: 2px 0;
}

#container .box1 {
  width: 66%;  
}

#container .box2 {
  width: 33%;
}

#container .box3 {
  width: 33%;
}

#container .box4 {
  width: 66%;
}

＆＃13;

<div id="container">
   
  <div class="box box1">
    <p>Box 1</p>
  </div>
  
  <div class="box box2">
     <p>Box 2</p>
  </div>
  
  <div class="box box3">
     <p>Box 3</p>
  </div>
  
  <div class="box box4">
     <p>Box 4</p>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;