HTML拆分表格单元格而不是使用colspan

Question

我有一个包含大量行和列的表。

现在我想分开td＆＃34; E8＆＃34;在这两列中：

什么是最佳解决方案？

Answer 1

单向：

您可以在同一行的所有其他单元格上使用rowspan="2"

示例：

<table border="1" width="100%">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

这是一个EXAMPLE

另一种方式

在单元格内放置两个divs并使用css来设置样式

HTML：

<table border="1" width="100%">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>
            <div class="top">Top</div>
            <div class="bottom">bottom</div>
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS：

.top{
    background-color: #eee;
    border-bottom: 1px solid #000;
}
.bottom{
    background-color: #ccc;
}

您可以看到EXAMPLE HERE

Answer 2

在该单元格中放置两行

<table>
 <tr>
  <td id = "E1">
    <table>
      <tr><td></td></tr>
      <tr><td></td></tr>
     </table>
   </td>
  </tr>
<table>