如何在 HTML 中创建类似表格的矩阵答案

【问题标题】：How do i create matrix like table in HTML如何在 HTML 中创建类似表格的矩阵
【发布时间】：2014-02-23 05:50:39
【问题描述】：

我正在尝试创建一个包含多个列的表，但其中一些列将包含嵌套列。我试过了，但我无法让它工作。

如您所见，第 4 列有 3 个嵌套表（4.1、4.2、4.3），但是当我再创建一行并向其添加值时，它会变得一团糟。

这就是我的 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>

【问题讨论】：

标签： html html-table

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：