HTML表格如何制作：TABLE标签创建步骤详解
在网页开发中，表格是展示结构化数据的重要载体，比如商品清单、课程表、数据统计等场景都会用到HTML表格。HTML提供了专门的<table>标签及相关配套标签来构建表格，下面我们就一步步学习如何创建完整的HTML表格。
一、HTML表格的核心标签
要制作HTML表格，首先需要了解几个核心标签的作用：
- <table>：表格的最外层容器，所有表格内容都包裹在这个标签内部
- <tr>：定义表格的一行（table row）
- <th>：定义表格的表头单元格（table header），默认文字会加粗居中显示
- <td>：定义表格的标准单元格（table data），用来存放普通数据
- <thead>：可选标签，用来包裹表格的表头部分，语义化更好
- <tbody>：可选标签，用来包裹表格的主体数据部分，语义化更好
- <tfoot>：可选标签，用来包裹表格的页脚部分，通常放汇总数据
二、创建基础HTML表格的步骤
我们以一个简单的学生成绩表为例，演示完整的创建流程：
步骤1：搭建表格外层容器
首先在HTML文件中添加<table>标签，这是表格的基础框架，后续所有内容都放在这个标签内。
<table> <!-- 后续表格内容都写在这里 --> </table>
步骤2：添加表头行
如果需要表头，先添加<tr>标签定义表头行，然后在行内用<th>标签定义每个表头的列名。这里我们可以加上<thead>标签包裹表头部分，让结构更清晰。
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
</table>步骤3：添加表格主体数据
表头完成后，用<tbody>标签包裹表格的主体数据部分，每一行数据同样用<tr>定义，每个单元格用<td>定义，列数需要和表头的列数保持一致。
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>96</td>
<td>89</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>82</td>
<td>91</td>
</tr>
</tbody>
</table>步骤4：可选添加页脚部分
如果需要展示汇总数据，比如平均分，可以添加<tfoot>标签包裹页脚行，同样用<tr>和<td>定义内容。
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>96</td>
<td>89</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>82</td>
<td>91</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>89</td>
<td>88.67</td>
<td>91.67</td>
</tr>
</tfoot>
</table>三、表格常见属性说明
除了基础结构，<table>标签还有一些常用属性可以调整表格样式（注：部分属性在HTML5中更推荐用CSS实现，这里仅做基础说明）：
border：设置表格边框的宽度，比如border="1"会给表格添加1像素的边框cellpadding：设置单元格内容与单元格边框之间的内边距cellspacing：设置单元格与单元格之间的间距width：设置表格的宽度，可以是像素值或者百分比
如果需要合并单元格，可以使用<td>或<th>的colspan属性合并横向列，rowspan属性合并纵向行，比如<td colspan="2">合并两列</td>就表示该单元格占据两列的宽度。
四、完整示例展示
下面是一个带边框、包含表头表体页脚、使用语义化标签的完整学生成绩表代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>学生成绩表</title>
<style>
table {
border-collapse: collapse; /* 合并边框，避免双边框 */
width: 60%;
margin: 20px auto;
}
th, td {
border: 1px solid #333;
padding: 8px 12px;
text-align: center;
}
th {
background-color: #f0f0f0;
}
tfoot td {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>96</td>
<td>89</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>82</td>
<td>91</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>89</td>
<td>88.67</td>
<td>91.67</td>
</tr>
</tfoot>
</table>
</body>
</html>上面的代码通过CSS的border-collapse: collapse合并了表格边框，避免了默认边框带来的双边框问题，同时给表头添加了浅灰色背景，页脚文字加粗，整体表格结构清晰，样式美观。
五、注意事项
- 表格的每一行<tr>中的列数（<th>或<td>的数量）最好保持一致，否则可能出现布局错乱
- 虽然<thead>、<tbody>、<tfoot>是可选标签，但加上后语义化更好，也更便于后续用CSS或JavaScript操作表格
- HTML5中已经不推荐在<table>标签上直接使用border、cellpadding等属性，优先使用CSS来控制表格的样式
- 不要用表格来做网页布局，表格仅用于展示结构化数据，网页布局应该使用div、flex、grid等布局方案