首先创建HTML表格需使用table标签,配合tr定义行、td/th定义单元格;th用于表头,默认加粗居中;通过colspan和rowspan实现单元格合并;建议用CSS添加边框与样式,如border-collapse和padding等属性,提升外观。

创建HTML表格主要使用 table 标签,配合 tr、td 和 th 等元素来组织行和单元格。下面介绍基本结构和常用方法,帮助你快速上手。
1. 基本表格结构
一个最简单的表格由 table 开始,内部用 tr 定义行,td 表示普通单元格:
<table><tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
2. 添加表头(th)
表头用于标识列的名称,使用 th 标签替代 td,文字默认加粗并居中显示:
<table><tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
3. 合并单元格
有时需要跨行或跨列显示内容,可以使用 colspan(横向合并)和 rowspan(纵向合并):
立即学习“前端免费学习笔记(深入)”;
- colspan="2" 表示该单元格占两列宽度
- rowspan="2" 表示该单元格占两行高度
例如合并第一行的两个单元格:
<tr><td colspan="2">全宽标题</td>
</tr>
4. 添加边框和样式(可选)
默认表格无边框,可通过CSS添加外观。简单方式是在 table 标签中加入 border 属性:
<table border="1">...表格内容...
</table>
更推荐使用CSS控制样式,比如:
<style>table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #000; padding: 8px; text-align: left; }
</style>
基本上就这些。掌握 table、tr、td、th 和合并属性后,就能创建清晰的网页表格。不复杂但容易忽略细节,建议多写几次加深理解。











