简单的html表设计问题

Question

我正在尝试解决一个问题：这是一个HTML练习，我必须用这个设计编写表格的HTML代码：

但我似乎无法直接说明，这是我的代码：

    <table border>
        <tr>
            <td rowspan="2" colspan="2"> Batatas </td>
            <td rowspan="3" colspan="2"> Couves </td>
            <td> Alhos </td>
            <td> Cebolas </td>
        </tr>
        <tr> 
            <td rowspan="2" colspan="2"> Alface </td>
        </tr>
        <tr> 
            <td colspan="2"> Nabos </td>
        </tr>

    </table>

这是结果：

第一个“td”标签中的rowspan =“2”不应该使第一个单元格更大（高度）吗？

我做错了什么？

Answer 1

在此处试用此在线工具：http://html-tables.com/

如果您只使用单元格合并，您将看到3行如何在视觉上折叠为2行。

我认为您需要嵌套表来实现这种效果。

Answer 2

实际上你遇到的问题不是因为你的代码是因为html表渲染的一般规则，这是因为表格单元格的合并而产生的

要解决<table>代码的这一缺点，我建议您使用<div>代码作为更好的方法。
试试这个....

  <table border>
        <tr>
            <td rowspan="2" colspan="1"> Batatas </td>
            <td rowspan="3" colspan="1"> Couves </td>
            <td rowspan="1" colspan="1"> Alhos </td>
            <td rowspan="1" colspan="1"> Cebolas </td>
        </tr>

        <tr> 
            <td rowspan="1" colspan="2"> Alface </td>
        </tr>

        <tr rowspan="1" colspan="2"> 
            <td> Nabos </td>
        </tr>

    </table>

---

更新

正如我所注意到的，使用<table>标记无法做到这一点，您可以使用div方法。这些div代码可以生成您的布局。

我刚刚完成了您的问题，我刚刚使用<div>标记解决了您的问题，看看

<div style=" background-color: powderblue;border:1px solid black; width:410px; height:310px">
<div style="float:left;">
    <div style="border:1px solid black; width:100px; float:none; height:200px">Batatas
    </div>
    <div style="border:1px solid black; width:100px; float:none; height:99px">Nabos
    </div>
</div>
<div>   
    <div style="border:1px solid black;width:100px; float:left; height:301px">Couves
    </div>
    <div style="border:1px solid black;width:100px; float:left; height:100px">Alhos
    </div>
    <div style="border:1px solid black;width:100px; float:left; height:100px">Cebolas
    </div>
    <div style="border:1px solid black;width:202px; float:left; height:199px">Alface
    </div>
</div>
</div>

Answer 3

好问题。我得到的最接近（没有对嵌套表格感到疯狂）就是这样：

  <table border>
    <tr>
        <td colspan="2"> Batatas </td>
        <td rowspan="3" colspan="2"> Couves </td>
        <td> Alhos </td>
        <td> Cebolas </td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td rowspan="2" colspan="2"> Alface </td>
    </tr>
    <tr>
        <td colspan="2"> Nabos </td>
    </tr>

</table>

如果这对你不起作用（并且你不想进入复杂的嵌套html表），那么我常见的看法是从html表转向使用CSS。显然，使用CSS / div，您可以获得更多控制权。