HTML5表格

HTML5表格是一种用于在网页上显示数据的常用元素，它提供了一种简单而灵活的方式来组织和呈现数据，使用户能够轻松地浏览和理解信息，下面将详细介绍HTML5表格的基本结构和用法。

## 1. 创建表格

要创建一个HTML5表格，可以使用<table>标签作为容器，并在其中使用<tr>（行）和<td>（单元格）标签来定义表格的行和列，以下是一个简单的示例：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

在上面的示例中，我们首先使用<table>标签创建了一个表格容器，我们使用<tr>标签定义了三行，每行使用<th>标签表示表头单元格，使用<td>标签表示普通单元格。

## 2. 表头和表尾

在HTML5表格中，可以使用<thead>和<tbody>标签来定义表头和表尾，这样可以提高表格的可读性，并允许对表头和表尾进行样式化，以下是一个示例：

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们使用<thead>标签包围了表头部分，使用<tbody>标签包围了表身部分，这样可以使浏览器更好地解析表格结构，并提供更好的可访问性。

## 3. 合并单元格

在HTML5表格中，可以使用colspan和rowspan属性来合并单元格，这样可以创建更复杂的表格布局，以下是一个示例：

<table border="1">
  <tr>
    <th colspan="2">标题1</th>
    <th rowspan="2">标题2</th>
  </tr>
  <tr>
    <td colspan="2">内容1</td>
  </tr>
  <tr>
    <td colspan="2">内容2</td>
    <td rowspan="2">内容3</td>
  </tr>
  <tr>
    <td colspan="2">内容4</td>
  </tr>
</table>

在上面的示例中，我们使用colspan="2"属性将第一行的两列单元格合并为一个单元格，使用rowspan="2"属性将第二行的两行单元格合并为一个单元格，这样可以实现更复杂的表格布局。

## 4. 排序和分页功能

HTML5表格还支持排序和分页功能，可以通过JavaScript来实现，通过添加一些事件监听器和处理函数，可以让用户在点击表头时对表格进行排序，或者在点击分页按钮时切换到不同的页面，这些功能可以提供更好的用户体验，使用户能够更方便地浏览和搜索数据。