如何在HTML中創建類似於表格的矩陣

Question

我正在嘗試創建一個表，該表將具有幾列，但某些列將具有嵌套列。 我曾嘗試過，但無法使其正常工作。

如您所見，第4列有3個嵌套表（4.1、4.2、4.3），但是當我再創建一行並向其中添加值時，它就會混亂。

http://jsfiddle.net/G9w5d/

這是我的HTML外觀：

<table border="1">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>

            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th><table border="1"><thead><tr><th>Col 4.1</th><th>Col 4.2</th><th>Col 4.3</th></tr></thead></table></th>
                <th><table border="1"><thead><tr><th>Col 5.1</th><th>Col 5.2</th><th>Col 5.3</th></tr></thead></table></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Val 1
                </td>
                <td>
                    Val 2
                </td>
                <td>
                    Val 3
                </td>
                <td>
                    <table border="1"><tbody><tr><td>This is Val 4.1</td><td>This is Val 4.2</td><td>This is Val 4.3</td></tr></tbody></table>
                </td>

            </tr>
        </tbody>
    </table>

Answer 1

聽起來您想要標題跨越多個列。

您可以使用[colspan]和[rowspan]屬性允許單元格跨越其正常范圍。

 <table border="1"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th colspan="3">Col 4</th> </tr> <tr> <th></th> <th></th> <th></th> <th>Col 4.1</th> <th>Col 4.2</th> <th>Col 4.3</th> </tr> </thead> <tbody> <tr> <td> Val 1 </td> <td> Val 2 </td> <td> Val 3 </td> <td>This is Val 4.1</td> <td>This is Val 4.2</td> <td>This is Val 4.3</td> </tr> </tbody> </table> 

Answer 2

下表在第三列中有兩個嵌套列。 這是通過使第三列中的頂部行單元格跨越其下方的兩個單元格來實現的。 第一行單元格的寬度為40％。 它下面的列均為20％。

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="400">
<tr>
    <td height="19" width="20%">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
    <td colspan="2" width="40%" height="19">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
</tr>
<tr>
    <td height="16" width="20%">&nbsp;</td>
    <td height="16" width="20%">&nbsp;</td>
    <td height="16" width="20%">&nbsp;</td>
    <td height="16" width="20%">&nbsp;</td>
    <td height="16" width="20%">&nbsp;</td>
</tr>
<tr>
    <td height="19" width="20%">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
    <td height="19" width="20%">&nbsp;</td>
</tr>
</table>