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

Question

我有一个包含很多行和列的表格。

现在我想像这样将 td "E8"分成两列:

什么是最好的解决方案？

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

另一种方式

在单元格内放置两个 div 并使用 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