html - 使用 css 的表表示

Question

考虑这样的场景。

我有字符串数组的数组列表。

我想用下图表示它们。

目前我已经将其实现为表。但这不是动态的。接下来我必须循环两次，这似乎有些困难。

<table>
    <tr>
    <td>Pack1</td>
    <td>Ch1</td>
    </tr>
    <tr>
    <td></td>
    <td>ch2</td>
    </tr>
    <tr>
    <td>Pack2</td>
    <td>val1</td>
    </tr>
    <tr>
    <td></td>
    <td>val2</td>
    </tr>
</table>

请让我知道任何其他使用 css 样式的方法。

1. 遍历每个包
2. 再次遍历每个包以获取值。

Answer 1

这可能有点像烫手山芋，因为它并不完全清楚您到底想要什么，尽管我已经发布了一些似乎与您的目标相似的结构化表格格式。如果您知道如何使用 colspan 和 rowspan 那么您可以调整表格(例如，如果您希望在一列上显示多行)，但请考虑表格的用途和主要样式默认情况下。我添加了一些 CSS 和文本，以帮助您了解 (X)HTML 表格在您利用事物时如何工作。

就循环而言，我认为您可以将“包”的概念应用于 tbody 元素，这些元素就像表格的分区......它们是同一类型数据的一部分，但具有他们自己独立的组。

如果您需要帮助进行调整，请发表评论，这并不难。

<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;">

<thead style="background-color: #f77;">
<tr><td colspan="3">Table Header</td></tr>
</thead>

<tfoot style="background-color: #f77;">
<tr><td colspan="3">Table Footer</td></tr>
</tfoot>


<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>


<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>

</table>