表与融合的行

Question

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

，即第二列中的融合行（一个实体）。基本上，四个非融合细胞中会有文本，融合细胞中会有一个图像。我怎样才能做到这一点？如果有一种方法可以避免使用表格，那就更好了。

Answer 1

您需要在第一行的第二个TD中使用rowspan =“4”属性。 e.g。

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