HTML5 提供了丰富的标签和属性，使得创建和美化表格变得更加简单和灵活。本文将详细介绍如何使用 HTML5 创建一个基本的表格，并介绍一些常用的表格属性和标签。

基本表格结构

一个基本的 HTML5 表格由以下几个主要部分组成：

<table>：定义表格。

<tr>：定义表格行。

<th>：定义表头单元格。

<td>：定义标准单元格。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 表格示例</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>
    <h1>HTML5 表格示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>设计师</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>25</td>
                <td>教师</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.

代码解释

<table> 标签：定义整个表格。

<thead> 标签：定义表格的头部，通常包含表头单元格。

<tbody> 标签：定义表格的主体，包含标准单元格。

<tr> 标签：定义表格行。

<th> 标签：定义表头单元格，通常用于显示列标题。

<td> 标签：定义标准单元格，用于显示数据。

表格样式

为了使表格更美观，可以使用 CSS 来添加样式。在上面的示例中，我们使用了以下 CSS 样式：

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

样式解释

width: 100%;：设置表格宽度为 100%。

border-collapse: collapse;：合并表格边框，使其看起来更整洁。

border: 1px solid black;：为表头和单元格添加黑色边框。

padding: 8px;：为表头和单元格添加内边距。

text-align: left;：将文本左对齐。

background-color: #f2f2f2;：为表头单元格设置背景颜色。

高级表格功能

合并单元格

可以使用 colspan 和 rowspan 属性来合并单元格。

示例代码

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td colspan="2">李四和王五</td>
            <td>设计师和教师</td>
        </tr>
    </tbody>
</table>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.