HTML中主表标题内的表标题

Question

我怎样才能实现这种表：

在“计划”列中，有子列（Jan，Feb等）。

我在<th></th>

中尝试了<th></th>

但它没有用。

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

Answer 1

这是我的解决方案：

http://jsfiddle.net/TAJzY/6/

<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>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
    </tr>
     <tr>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
        <td>foo</td>
    </tr>
</tbody>
</table>

这个CSS会有所帮助：

table, th, td { border: 1px solid black; border-collapse: collapse; }
th { font-weight: bold; text-align: center; }
table { width: 100%; }

Answer 2

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

将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>