具有融合行的表答案

【问题标题】：Table with fused rows具有融合行的表
【发布时间】：2014-01-03 02:06:24
【问题描述】：

我在html中需要以下类型的表格

即，在第二列（一个实体）中具有融合的行。基本上，四个未融合的单元格中有文本，融合的单元格中有一个图像。我怎样才能做到这一点？如果有办法避免使用表格，那就更好了。

【问题讨论】：

【解决方案1】：

您需要在第一行的第二个 TD 中使用 rowspan="4" 属性。例如

   <table>
       <tr>
         <td></td>
         <td rowspan="4"></td>
       </tr>
       <tr>
         <td></td>
       </tr>
       <tr>
         <td></td>
       </tr>
       <tr>
         <td></td>
       </tr>
   </table>

这指定第一行中的第二个单元格跨越 4 行。请注意，在第 2 到第 4 行中，无需指定第二列，因为已在第一行中指定。

但是：如果您只是将它用于布局，那么我会完全避免使用表格并使用一些 div 和 CSS 来实现相同的结果。

    <div class="outer">
        <div class="left">
             <div></div>
             <div></div>
             <div></div>
             <div></div>
        </div>
        <div class="right">
           <!-- image here -->
        </div>
        <br style="clear:both;"/>
    </div>

还有 CSS：

    .left{
       float:left;

     }
    .right{
       float:left
     }

您可以在this answer 中找到有关此布局的一些好的建议。

或者使用 Bootstrap：

<div class="row">
  <div class="col-md-6">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
  </div>
  <div class="col-md-6">Your Image Here</div>
</div>

【讨论】：

我认为应该是rowspan。我的意思是rowspan 有效，colspan 在我的情况下无效。其次，我能比使用表格做得更好吗？
感谢@Ranveer ...这绝对正确。我脑子里有些东西歪了。
啊！好点子！ float 完全应该工作。问题是我的网页是响应式的（我使用的是 bootstrap 3.0）。不会搞砸吗？
啊 Bootstrap ..这有很大的不同。 Bootstrap 拥有制作此布局并使其流畅所需的所有东西。
您可以嵌套这些网格。只需将它包装在另一行中，它应该可以工作。如果您已经熟悉在引导程序中执行此操作，请尝试一下。