HTML5关于表格的代码及应用

1. 前言

HTML5作为最新的HTML标准，引入了许多新的特性和功能，其中包括了对表格的新的标记和属性。表格是网页设计中常见的元素，用于展示和组织数据。本文将介绍HTML5关于表格的代码以及一些常见的应用场景。

2. 表格基础标记

在HTML5中，使用<table>元素来创建表格。表格由多个行(<tr>)组成，每行由多个单元格(<td>)组成。

下面是一个简单的表格示例：

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

上面的代码会生成一个2行2列的表格，每个单元格中的内容分别是单元格1、单元格2、单元格3、单元格4。

3. 表格头和表格体

在一个表格中，通常会有表格头和表格体两个部分。表格头用<thead>元素表示，表格体用<tbody>元素表示。

表格头用于显示表格的标题或表头，而表格体用于显示表格的内容。

下面是一个包含表格头和表格体的表格示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

上面的代码会生成一个包含表头和表格体的表格，表头包含了姓名和年龄两列，表格体包含了两行数据。

4. 表格的合并单元格

在HTML5中，可以使用rowspan和colspan属性来合并单元格，实现跨行或跨列显示。

rowspan属性用于指定一个单元格跨越的行数，colspan属性用于指定一个单元格跨越的列数。

下面是一个合并单元格的表格示例：

<table>
  <tr>
    <td rowspan="2">跨行单元格</td>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td colspan="2">跨列单元格</td>
  </tr>
</table>

上面的代码会生成一个包含合并单元格的表格，第一个单元格跨越2行，第三个单元格跨越2列。

5. 表格的样式和格式化

HTML5支持使用CSS来对表格进行样式和格式化。

可以通过给表格元素或单元格元素添加class或id属性，然后使用CSS选择器来对其应用样式。

下面是一个使用CSS对表格进行样式和格式化的示例：

<style>
  .table-style {
    border-collapse: collapse;
    width: 100%;
  }
  .table-style th, .table-style td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  .table-style th {
    background-color: #f2f2f2;
  }
</style>

<table class="table-style">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
  </tr>
</table>

上面的代码会生成一个具有边框、带有背景颜色的表格。

6. 应用场景

表格作为网页设计中常见的元素，可以在很多场景中