如何设置我的HTML表格布局

我需要一个HTML布局的帮助

我需要为每个表行显示3列

列#1中只有一些文本

列#2有一个内部表，根据列#3的内容有1行或2行

第3列有x行，行中的每个单词都有一个食品名称。首先列出健康项目，然后列出（如果有）不健康项目。 如果只有健康项目，第2列将有一行，其中有“健康”一词。 否则，它将显示为正常，第二行将显示为不正常（并且必须与第3列对齐）

所以它看起来像：

Column#2        Column#3
HEATHLY         Apple
                Pear

Column#2        Column#3
HEATHLY         Apple
                Pear
UNHEALTHY       Coffee crispt
                Chocolate milk

或者它可能看起来像：

Column#2        Column#3
HEATHLY         Apple
                Pear

Column#2        Column#3
HEATHLY         Apple
                Pear
UNHEALTHY       Coffee crispt
                Chocolate milk

第#2列和第#3列中的每一行都应该为每一行设置网格（上/下边框）

我该怎么做

注意：第2列中的行边框应与第3列中的行边框对齐

---

我希望我解释得足够清楚。

我不确定您的具体要求，因此：

<table cellspacing="0">
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td rowspan="4">Col 1 text goes here</td>
        <td rowspan="2">HEALTHY</td>
        <td>Apple</td>
    </tr>
    <tr>
        <td>Pear</td>
    </tr>
    <tr>
        <td rowspan="2">UNHEALTHY</td>
        <td>Toffee crisp</td>
    </tr>
    <tr>
        <td>Chocolate milk</td>
    </tr>
</table>

第1列
第2列
第3列
第1列文本在这里
健康的
苹果
梨
不健康
太妃糖酥
巧克力牛奶

和一些生成它的伪代码：

foreach c2 in col-2-items
{
    foreach c3 in c2.col-3-items
    {
        <tr>
            if c3 is first in c2.col-3-items
            {
                if c2 is first in col-2-items
                {
                    <td rowspan="all-items.count">Col 1 text goes here</td>
                }
                <td rowspan="c2.col-3-items.count">c2.text</td>
            }
            <td>c3.text</td>
        </tr>
    }
}

第2列项目中的每个c2的

{
c2.col-3-项目中的每个c3
{
如果c3位于c2.col-3-项中的第一位
{
如果c2位于第2列项目的第一位
{
第1列文本在这里
}
c2.文本
}
c3.1文本
}
}

使用css应用顶部和底部边框。还要注意表格上的cellspacing=“0”

<style>
table
{
    border-collapse: collapse;
}
td
{
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
</style>

桌子
{
边界塌陷：塌陷；
}
运输署
{
边框顶部：纯色1px黑色；
边框底部：实心1px黑色；
}

如果你发布了你已经拥有的内容，它会更快，因此人们可以编辑它。你是动态生成此内容的吗？或者它是一个静态页面？我的是服务器端生成的，出于隐私原因，我不能发布输出。另外，我的解决方案似乎并不理想，我不想改变一个更好的解决方案。你用的是什么语言？这些值在某种数组中吗？这些特定的数据看起来更适合嵌套列表，而不是表。行是最主要的内容之一borders@user1361315如果不嵌套表，边框将自行解决。@MrLister在我看来不是这样的：或者只是缺少行边框？@user1361315是的。看到了吗，它合并了flem的CSS。