如何在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>