在表格上放置标题

【问题标题】：Putting a heading on a table在表格上放置标题
【发布时间】：2014-06-14 07:26:12
【问题描述】：

这是我的代码：http://jsfiddle.net/spadez/mVX93/13/

我正在尝试在我的表格顶部放置一个一直延伸的标题。我认为是这样做的方法。

<table id="my-table">
    <tr>
        <th>Test</th>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

正确的做法是什么？

【问题讨论】：

Colspan all columns的可能重复

标签： html css

【解决方案1】：

试试：

<table id="my-table">
    <tr>
        <th colspan="4">Test</th>
    </tr>
    <tr>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

【讨论】：

那么thead 是干什么用的？
标签用于对 HTML 表格中的标题内容进行分组。
@KingKing - “thead 元素表示由其父表元素的列标签（标题）组成的行块。”
如上所述，有没有办法不使用 col-span，因为我试图避免说会有多少列，因为它们是动态的。
@j08691 thead 应该正是 OP 想要的。 <th>Test</th 是 OP 尝试过的。

【解决方案2】：

据我所知，

你可以使用这种方法

<table id="my-table">
    <tr>
       <th colspan="4">Test</th>
    </tr>
    <tr>
      <td><span class="lrg">10</span>1</td>
      <td><span class="lrg">7</span>1</td>
      <td><span class="lrg">3</span>1</td>
      <td><span class="lrg">1</span>1</td>
    </tr>
 </table>

col span 将允许您跨越四列

【讨论】：

有没有办法在不使用 col-span 的情况下做到这一点，因为我试图避免说会有多少列，因为它们是动态的。

【解决方案3】：

您真的要使用thead 和th 中的“标题”吗？

我从您的问题和 cmets 中看到，您希望表格顶部有一个“标题”，它与表格与表格一样宽，并且与列无关。

一个简单的caption 用 CSS 正确样式会不起作用吗？

演示：http://jsfiddle.net/mVX93/15/

【讨论】：

【解决方案4】：

你真的应该为此使用caption。

<table id="my-table">
    <caption>Heading</caption>
    <tbody>
        <tr>
            <td><span class="lrg">10</span>1</td>
            <td><span class="lrg">7</span>1</td>
            <td><span class="lrg">3</span>1</td>
            <td><span class="lrg">1</span>1</td>
        </tr>
    <tbody>
</table>

【讨论】：