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>
代码解释
<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;
}
样式解释
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>
