html创建表格的方法:首先使用“” 标签定义表格框架;然后使用一个或多个“”标签定义表格中的行,一个或多个“”标签定义单元格;最后在td标签对中填入表格数据(单元格内容)即可,数据可以是文本、图片等信息。

htmledit_views-b5506197d8.css"/>
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 | 标签定义)。 字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border属性指定有无边框,不写border属性或者赋值为0,创建的表格都将没有边框;赋值的大小决定了边框的粗细。
立即学习“前端免费学习笔记(深入)”;
th属性设置表头,如果不把表头特殊设置,那么显示出来的表头会和内容一样的格式。
下面通过代码示例来给大家一步步介绍:
1、下面写两个简单的没有边框的表格
第一个表格
第二个表格
效果:

2、写一个有边框的表格(border的赋值决定了边框的粗细)
给表格设置标题,用
。
假如表格中有空值,那么在这个单元格里插入一个空格占位符“ ",可以让单元格保持完整。
第三个表格
人员信息表
效果:

3、下面设置一个横向跨列和一个纵向跨行的表格
某一个单元格横跨两列,使用 colspan="2"来设置,数字代表跨的列
效果:

某一个单元格纵跨两行,使用 rowspan="2"来设置,数字代表跨的行
效果:

4、HTML的各项标签可以随意嵌套。
4.1在单元格里嵌套列表 效果:

飞书多维表格
表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版
下载
4.2在单元格里嵌套单元格
|
我要做的事
//-------------------------
//---------------------中间是一个完整的单元格
|
效果:

5、更改表格样式
5.1单元格样式之----单元格边距,保证内容与边框的距离 //----------使用cellpadding来设置单元格边距
|
我要做的事
//----------使用cellpadding来设置单元格边距
| 周一 |
做PPT |
| 开会 |
| 写报告 |
|
效果:

5.2单元格样式之----给表格添加背景颜色或图片(颜色用bgcolor;图片用background) 效果:

5.3给某一个单元格单独设置背景 效果:

5.4在表格中排列内容--让表格更好看(align)
| 电表名称 |
Ua(V) |
Ub(V) |
Uc(V) |
| 2018-6-19 00:00 |
232.2 |
239.0 |
231.8 |
| 2018-6-19 05:00 |
232.6 |
233.2 |
234.3 |
| 2018-6-19 10:00 |
232.6 |
232.2 |
234.6 |
效果:

上面这些功能,可以根据实际情况随意嵌套,如同搭积木一样,大家可以根据自己喜好利用这些功能写出炫酷的表格!
推荐教程:《html视频教程》
|