html - 如何设置我的 HTML 表格布局

Question

我需要有关 HTML 布局的帮助。

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

第 1 列只有一些文本

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

第 3 列有 x 行，行中的每个单词都有一个食品名称。首先列出健康的元素，然后列出(如果有)不健康的元素。 如果只有健康元素，第 2 列将有 1 行，其中包含“健康”一词。 否则，它将显示 HEALTHY，第二行将显示 UNHEALTHY(并且必须与第 3 列对齐)

所以它看起来像:

Column#2        Column#3
HEATHLY         Apple
                Pear

或者它可能看起来像:

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

第 2 列和第 3 列中的每一行都应该有网格(边框顶部/底部)。

我该怎么做？

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

我希望我已经解释清楚了。

Answer 1

我不确定你的具体要求是什么，所以这里是:

<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>

还有一些生成它的伪代码:

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>
    }
}

使用 CSS 应用顶部和底部边框。另请注意表格中的 cellspacing="0"。

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