0

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

示例：（规格是标题）

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

3 回答 3

3

利用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/

截屏

于 2013-01-11T00:56:37.867 回答
2

我相信这就是你要找的！这是一个演示

<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>
于 2013-01-11T00:55:12.410 回答
1

如果表格只有一个部分（即：所有表格内容都是规范），我可能会使用一个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>

如果有多个部分，我会使用跨越（<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>

小提琴

于 2013-01-11T02:33:00.727 回答