如何在html表格的父标题下创建子标题？

在HTML中，您可以使用<table>元素来创建表格，并使用<thead>、<tbody>和<tfoot>元素来分别定义表格的头部、主体和底部。要在表格的父标题下创建子标题，您可以在<thead>内部使用多个<tr>（行）元素，每个<tr>元素包含一个或多个<th>（表头）元素。

以下是一个简单的示例，展示了如何在HTML表格中创建父标题和子标题：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>带有子标题的HTML表格</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <!-- 父标题 -->
      <th rowspan="2">产品</th>
      <th colspan="2">价格</th>
    </tr>
    <tr>
      <!-- 子标题 -->
      <th>原价</th>
      <th>折扣价</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>$1.00</td>
      <td>$0.75</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>$0.50</td>
      <td>$0.40</td>
    </tr>
  </tbody>
</table>

</body>
</html>

在这个例子中，rowspan="2"属性用于让“产品”这个父标题跨两行显示，而colspan="2"属性用于让“价格”这个父标题跨两列显示。接着，在第二行中，我们定义了两个子标题：“原价”和“折扣价”。

这种方法允许您创建复杂的表头结构，以适应不同的数据展示需求。

参考链接：