html - 简单的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，您拥有更多的控制权。