Html如何制作具有多个标题的表格？

Posted 2023-03-05

【中文标题】Html如何制作具有多个标题的表格？

【英文标题】：Html how to make a table with multiple headers?

【发布时间】：2016-04-20 04:10:56

【问题描述】：

我想做一张桌子。我知道如何在 html 中制作简单的表格。我想要一些标题。几种类型的标题，类似于照片。我不知道它的数量，我会在我的程序中计算它。我应该使用什么，我应该阅读什么？

我试过了：

<table border="1" >
<tr>
    <th>AAA1</th>
    <th>AAA2</th> 
</tr>
<tr>
    <th>KKK1</th>
    <th>KKK2</th>
    <th>KKK3</th>
    <th>KKK3</th>
</tr>

<tr>
    <th>PPP1</th>
    <th>PPP2</th>
    <th>PPP3</th>
    <th>PPP4</th>
    <th>PPP5</th>
</tr>
</table>

但我知道它太简单了，不会给我类似图片的东西。我读到了 colspan，但它不会给我想要的结果。 也许有一个引导程序？

【问题讨论】：

我应该使用什么，关于我应该阅读什么？ 学习 javascript，因为您显然是在描述根据未知需求动态更改表结构的需求。跨度>

我更喜欢避免使用 JavaScript，因为我从未使用过它。我将在我的数据库中定义每个组的数量。也许与css有关。但是什么？也许我可以尝试在另一张桌子上显示一张桌子？

CSS 非常有限，仅使用 HTML 和 CSS AFAIK 就无法接近您的需求。从根本上说，我假设您需要使用变量、一些表达式和一种方法来操作浏览器中呈现的内容。 CSS 缺少可用于利用此类复杂任务的动态函数的变量和表达式。 CSS 和 HTML 不是语言。

除了问题中的简单表格标记和您提到的内容之外，您还应该了解thead、tbody、tfoot、col 标签、scope 属性： scope="row" =col =rowgroup 和 =colgroup，headers 属性等。这些都包含在@cthrall 在他的回答中提到的Tables Tutorial 中，并链接到 one页面。如今，HTML 表格及其 CSS 非常灵活，可以创建非常复杂的内容。

【参考方案1】：

您可以为不同的行设置不同的标题。有一个good example on the W3 site。如果您对标记有效性有疑问，可以使用the W3 validator web page 检查您的 HTML。

【讨论】：

我看到了这个页面，我写道：“colspan”对我不起作用。看图片，第三行：“L1，L2，L3...”。这组（Cw，Ps，L）中的每一个都有单独的数据颜色和自己的行。如果我知道例如“Ps”组将是“Cw”的一半，我会使用 colspan。但我不知道。 Cw 可以是 10，但 L 例如 17

【参考方案2】：

如果您想为标头设置一些标头，则可以使用 colspan 属性，例如，如果您想为标头设置 2 个标头，则可以将 colspan="2" 用于第一个标头 我希望我能理解你的意思。

也适用于表格，而不是这个问题，您可以使用引导程序中的 class="table"。

【讨论】：

Bootstrap 本身与表标记无关。它只是在表格顶部添加了一种样式，可能还有一些实用程序。 “从引导程序中使用 .table 类”与 OP 的真正答案相去甚远。