表有两行，一行只用于标题 - HTML

Question

我正在尝试在html中创建一个包含两行和多列的表。我希望第一行只有一个空格而不是每列两个空格。它将成为整个桌子的标题空间。

示例:(规格是标题）

[Specifications]
[Power         ][200 Lumens                       ]
[Lamp          ][4 Ultrabright LEDs, Maxbright LED]
[Burn Time     ][150 Hours                        ]

Answer 1

使用colspan="2"

<table border="1">
    <tr>
    <th colspan="2">Specifictaions</th>
    </tr>
    <tr>
        <td>Power</td>
        <td>200 Lumens</td>
    </tr>
    <tr>
        <td>Lamp</td>
        <td>4 Ultrabright LEDs, Maxbright LED</td>
    </tr>
    <tr>
        <td>Burn Time</td>
        <td>150 Hours</td>
    </tr>
</table>

小提琴：http://jsfiddle.net/tCvBn/

截图

Answer 2

我相信这就是你要找的！这是demo

<table width="100" border="1">
    <tr>
        <th colspan="2">Foo</th>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

Answer 3

如果表格中只有一个部分（ viz ：所有表格内容都是规格）我可能会使用caption元素标记该部分：

<table>
  <caption>Specifications</caption>
  <tr>
    <th scope="row">Power</th>
    <td>200 Lumens</td>
  </tr>
  <tr>
    <th scope="row">Lamp</th>
    <td>4 Ultrabright LEDs, Maxbright LED</td>
  </tr>
  <tr>
    <th scope="row">Burn Time</th>
    <td>150 Hours</td>
  </tr>
</table>

如果有多个部分，我会使用spanning（<th scope="col" colspan="2">...表格标题：

<table>
  <tr>
    <th scope="col" colspan="2">Specifications</th>
  </tr>
  <tr>
    <th scope="row">Power</th>
    <td>200 Lumens</td>
  </tr>
  <tr>
    <th scope="row">Lamp</th>
    <td>4 Ultrabright LEDs, Maxbright LED</td>
  </tr>
  <tr>
    <th scope="row">Burn Time</th>
    <td>150 Hours</td>
  </tr>
  <tr>
    <th scope="col" colspan="2">Some Other Section</th>
  </tr>
  <tr>
    <th scope="row">Foo</th>
    <td>Bar</td>
  </tr>
  <tr>
    <th scope="row">Baz</th>
    <td>Qux</td>
  </tr>
</table>

fiddle