简单的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" 不应该使第一个单元格（按高度）变得更大吗？

我做错了什么？

- chiapa

---

我也被难住了！JSFiddle - MonkeyZeus

Answer 1

尝试使用此在线工具：http://html-tables.com/，如果您只是使用单元格合并，则可以看到3行在视觉上如何折叠为2行。我认为您需要嵌套表格才能实现该效果。

- Hans

---

我认为在这种情况下不应该使用表格。在语义上使用表格是否正确？ - pethel

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>

- user2273202

---

@ArthurFrankel 是的，我知道，但这部分满足了您的要求，请阅读我刚在答案中发布的原因，为什么它无法完成。 - user2273202

同意 - 这确实取决于HTML表格的真正用途。你的答案可能是正确的，我的答案也可能是正确的。如果不是这两者之一，那么转换为divs/css肯定更好。 - Arthur Frankel

是的，那将是最后的选择。 - user2273202

谢谢你的努力，它清晰地呈现了我所要求的。但是，我打算只使用表格，并询问是否有可能以这种方式实现。 - chiapa

是的，不用谢。我能理解你的问题，因为这是一道练习题。无论如何，这是一个好问题，我也想知道这个问题的解决方案，所以它成为了我的最爱。感谢你提出这样一个好问题。 - user2273202

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/divs可以更好地控制样式。

- Arthur Frankel

---

为什么有人在这里给我一个负面评价？另一个答案甚至都不起作用，而我提供了一个可能可以的解决方案——因为我们不知道完整的使用情况。显而易见的答案是使用div/CSS。 - Arthur Frankel