HTML/CSS表格:将“子行”与列对齐

HTML/CSS表格是一种用于在网页上展示数据的标记语言和样式表。表格由行和列组成，可以将数据以表格的形式进行排列和展示。在表格中，可以使用HTML标签来定义表头、表体和表尾，以及行和列的内容。

子行与列对齐是指在表格中，子行与列的内容在视觉上对齐。为了实现子行与列的对齐，可以使用CSS样式来设置表格的布局和样式。

以下是一种实现子行与列对齐的方法：

使用HTML表格标签构建表格结构，包括表头（<thead>）、表体（<tbody>）和表尾（<tfoot>）。

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
    </tr>
    <tr>
      <td colspan="2">子行1</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
    </tr>
    <tr>
      <td colspan="2">子行2</td>
    </tr>
  </tbody>
</table>

使用CSS样式来设置表格的布局和样式，包括对齐方式和边框样式等。

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f5f5f5;
}

td[colspan] {
  text-align: center;
}

在上述代码中，使用了colspan属性来指定子行所占的列数，从而实现子行的合并。通过设置text-align: center;来使子行内容在列中居中对齐。

HTML/CSS表格的优势包括：