使用HTML标签创建表格,需用<table>定义表格,<tr>定义行,<th>定义表头,<td>定义单元格,可添加border等属性设置样式,通过colspan和rowspan合并单元格,推荐使用CSS美化表格。

在HTM(或HTML)文件中创建表格,主要通过使用 table 相关标签来实现。表格由行、列和单元格组成,可以清晰地展示结构化数据。下面介绍如何用基础HTML代码将内容变为表格形式。
1. 使用基本表格标签
要创建一个简单的表格,需要使用以下HTML标签:
- <table>:定义整个表格的开始和结束
- <tr>:定义表格中的一行(table row)
- <td>:定义单元格内容(table data)
- <th>:定义表头单元格,通常加粗并居中显示
示例代码:
<table border="1"><tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
这段代码会生成一个带边框的三列两行数据表格,第一行为表头。
2. 添加表格样式和属性
为了让表格更美观或适应网页布局,可以添加一些常用属性:
- border:设置边框宽度,如 border="1"
- cellpadding:控制单元格内容与边框的距离
- cellspacing:设置单元格之间的间距
- width 和 align:设置表格宽度和对齐方式
示例:
3. 合并单元格
有时需要跨行或跨列显示内容,可用以下属性:
- colspan="n":横向合并n个单元格
- rowspan="n":纵向合并n个单元格
例如,标题跨三列:
<tr><th colspan="3">员工信息表</th>
</tr>
4. 使用CSS提升外观
现代网页推荐使用CSS来美化表格,而不是依赖HTML属性。
可以在 <head> 中加入样式:
<style>table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
这样可以让表格看起来更专业、整洁。
基本上就这些。只要掌握 table、tr、td 和 th 这几个标签,再配合简单样式,就能在HTM文件中轻松创建实用的表格。不复杂但容易忽略细节,比如闭合标签和属性书写规范。


















