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