HTML中主表头内的表头

Question

我怎样才能实现这种表：

在 Schedule 列中，有子列（Jan、Feb 等）。

我在<th></th> 中尝试了<th></th>

但它不起作用。

看我的小提琴：http://jsfiddle.net/TAJzY/1/

Answer 1

• 解决方案是colspan=""和rowspan=""：
  • 在“活动计划/里程碑”单元格中使用colspan="12"。
    • 并删除同一 <tr> 行中的 12 个空尾单元格。
  • 在“估计预算”单元格中使用rowspan="2"。
    • 并从下面的 <tr> 中删除单个空的初始 <th> 单元格。
• 不要忘记使用明确的<thead>、<tbody> 和可选的<tfoot> 部分。
  • 虽然您可以使用没有显式部分的 HTML 表格，但通过这种方式使用 CSS 设置 HTML 表格的样式要容易得多且有效，并且您可以使用 thead { position: sticky; } 等技术来实现 Excel 样式的“冻结”否则很难 - 或者只是乏味 - 以其他方式实现的行。

---

第 1 步：

首先，制作一个表格，没有任何单元格的拆分/合并，所以你有这样的东西（点击下面的“运行代码sn-p”按钮查看表格）：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; text-align: center; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }

<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th>Schedule/Milestone of Activities</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

第 2 步：

然后使用colspan="12" 使“活动计划/里程碑”单元格跨越所有剩余的 12 列（共 13 列） - 这也意味着删除相同 <tr> 中的空尾随 <th></th> 元素现在由<th colspan="12"> 单元格表示：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }

<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

第三步：

要使“估计预算”单元格跨越<thead> 中的这两行，添加rowspan="2" 并删除第二个<tr> 中的空初始<th></th>（因为空<th> 单元格的“槽”是现在由上一行的<th rowspan="2"> 获取）。

像这样：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae; }

/* Right-align budget numbers in the first column: */
table > tbody > tr > td:first-child { text-align: right; }

<table>
    <thead>
        <tr>
            <th rowspan="2">Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

Answer 2

您在计划th 上使用colspan 属性。它将使它跨越许多列。

将rowspan 用于预算th 将对行产生相同的效果。

Answer 3

试试这个（注意使用 colspan）：

<table border="1">
  <tr>
    <td>budget</td>
    <td colspan="3">header</td>
  </tr>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

如果您需要更复杂的表格布局，可以使用我的http://blocknote.net 编辑器。表格编辑器那里很方便。

Answer 4

<table>
<tr>
    <td>foo</td>
    <td colspan="3">Header</td>
  </tr>
  <tr>
    <td></td>
    <td>Content</td>
    ...
  </tr>
  <tr>
    <td>foo1</td>
    <td>foo2</td>
    ...
  </tr>
</table>