html创建表格的方法：首先使用“” 标签定义表格框架；然后使用一个或多个“”标签定义表格中的行，一个或多个“”标签定义单元格；最后在td标签对中填入表格数据（单元格内容）即可，数据可以是文本、图片等信息。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
表格由 标签来定义。
每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小决定了边框的粗细。
立即学习“前端免费学习笔记（深入）”；
th属性设置表头，如果不把表头特殊设置，那么显示出来的表头会和内容一样的格式。
下面通过代码示例来给大家一步步介绍：
1、下面写两个简单的没有边框的表格
第一个表格
| name | <!-------------------利用将这个值设置为表头--> | sex | <!-------------------利用将这个值设置为表头--> |
|---|---|---|---|
| 张三 | 女 |
第二个表格
| name | <!-------------------利用将这个值设置为表头--> | sex | <!-------------------利用将这个值设置为表头--> |
|---|---|---|---|
| 张三 | 女 |
效果：
2、写一个有边框的表格（border的赋值决定了边框的粗细）
给表格设置标题，用
假如表格中有空值，那么在这个单元格里插入一个空格占位符“ “，可以让单元格保持完整。
第三个表格
人员信息表
| name | sex |
|---|---|
| 张三 | 女 |
| unknown |
效果：
3、下面设置一个横向跨列和一个纵向跨行的表格
某一个单元格横跨两列，使用 colspan=”2″来设置，数字代表跨的列
| 姓名 | 成绩 | ||
|---|---|---|---|
| 张丹 | 98 | 56 | 87 |
效果：
某一个单元格纵跨两行，使用 rowspan=”2″来设置，数字代表跨的行
| 姓名 | 成绩 | ||
|---|---|---|---|
| 张丹 | 98 | 56 | 87 |
效果：
4、HTML的各项标签可以随意嵌套。
4.1在单元格里嵌套列表
| 房间里包含的水果 |
效果：
4.2在单元格里嵌套单元格
我要做的事 //-------------------------
|
效果：
5、更改表格样式
5.1单元格样式之—-单元格边距，保证内容与边框的距离
我要做的事
|
效果：
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视频教程》
以上就是html怎么创建表格的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1550443.html
微信扫一扫 
支付宝扫一扫 
