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

Question

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

我试过这个：

<table border="1" width="100%">
<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 的内容，但它不会给我我想要的结果。 也许有一个引导程序？

Answer 1

您可以为不同的行设置不同的标题。 W3 网站上有一个很好的例子。如果您对标记有效性有疑问，可以使用 W3 验证器网页 检查您的 HTML。

Answer 2

我在涉及一些树枝循环等的复杂情况下遇到了同样的问题......并且需要比其他答案提供的更好的解决方案。

这很有魅力：

<!-- Some BootStrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Table --->
<table class="table table-bordered">
  <col/>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

详细说明了其工作原理，请参见此处，

<col/>

的文档请参见此处。

Answer 3

如果你想要一个标题有一些标题，你可以使用 colspan 属性，例如如果你想要一个标题有 2 个标题，你可以使用 colspan="2" 作为第一个标题 我希望我明白你的意思。

也适用于表，不是这个问题，您可以使用 bootstrap 中的 class="table" 。