html 行列

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，在HTML中，我们可以使用表格标签来创建行列结构，表格由行（tr）、列（td）和表头（th）组成，下面我们将详细介绍如何在HTML中使用行列。

1、创建表格

要创建一个表格，我们需要使用<table>标签。<table>标签用于定义一个表格，其内部包含若干行（<tr>标签）和列（<td>或<th>标签）。

我们创建一个包含两行三列的表格：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

2、创建表头

表头是表格的第一行，通常用于描述每一列的内容，我们可以使用<th>标签来创建表头，与<td>标签不同，<th>标签默认会加粗显示，并且居中对齐。

我们为上面的表格添加表头：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

3、设置表格样式

我们可以使用CSS来设置表格的样式，例如边框、背景颜色、字体大小等，以下是一些常用的CSS属性：

border：设置表格边框的宽度、样式和颜色。

background-color：设置表格的背景颜色。

font-size：设置表格中文字的大小。

text-align：设置表格中文字的对齐方式。

width和height：设置表格的宽度和高度。

我们为上面的表格设置样式：

<style>
  table {
    border: 1px solid black;
    background-color: f2f2f2;
    font-size: 14px;
    width: 100%;
    height: auto;
  }
  th, td {
    text-align: left;
    padding: 8px;
  }
  th {
    background-color: 4CAF50;
    color: white;
  }
</style>

4、合并单元格

有时我们需要合并表格中的单元格，以实现特定的布局效果，我们可以使用colspan和rowspan属性来实现单元格的合并。colspan表示横向合并单元格的数量，rowspan表示纵向合并单元格的数量，注意，合并后的单元格只能保留一个内容。

我们将上面的表格中的第二行第一列和第二列合并：

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">年龄和性别</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td rowspan="2">25</td>
    <td rowspan="2">男</td>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

5、排序表格数据（仅适用于HTML5）

HTML5引入了一个新的属性sortable，用于实现表格数据的排序功能，要使表格数据可排序，只需将该属性添加到<th>标签上即可，我们还可以使用JavaScript监听排序事件，以便在用户点击表头时执行相应的操作，需要注意的是，此功能目前仅在部分浏览器中得到支持。