0

0

html怎么创建表格

青灯夜游

青灯夜游

发布时间:2021-07-01 12:04:35

|

16719人浏览过

|

来源于php中文网

原创

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

html怎么创建表格

htmledit_views-b5506197d8.css"/>

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

表格由

标签来定义。

每个表格均有若干行(由

标签定义),每行被分割为若干单元格(由
标签定义)。

字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

border属性指定有无边框,不写border属性或者赋值为0,创建的表格都将没有边框;赋值的大小决定了边框的粗细。

立即学习前端免费学习笔记(深入)”;

th属性设置表头,如果不把表头特殊设置,那么显示出来的表头会和内容一样的格式。

下面通过代码示例来给大家一步步介绍:

1、下面写两个简单的没有边框的表格

第一个表格
name sex
张三
第二个表格
name sex
张三

效果:

1.jpg

2、写一个有边框的表格(border的赋值决定了边框的粗细)

给表格设置标题,用


假如表格中有空值,那么在这个单元格里插入一个空格占位符“ ",可以让单元格保持完整。

第三个表格
人员信息表
name sex
张三
unknown

效果:

3、下面设置一个横向跨列和一个纵向跨行的表格

某一个单元格横跨两列,使用 colspan="2"来设置,数字代表跨的列

姓名 成绩
张丹 98 56 87

效果:

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

姓名 成绩
张丹 98 56 87

效果:

2.jpg

4、HTML的各项标签可以随意嵌套。

4.1在单元格里嵌套列表

房间里包含的水果
  • 香蕉
  • 葡萄
  • 番茄
  • 效果:

    3.png

    飞书多维表格
    飞书多维表格

    表格形态的AI工作流搭建工具,支持批量化的AI创作与分析任务,接入DeepSeek R1满血版

    下载

    4.2在单元格里嵌套单元格

    我要做的事

    //-------------------------
    周一 做PPT
    开会
    写报告
    //---------------------中间是一个完整的单元格

    效果:

    4.png

    5、更改表格样式

    5.1单元格样式之----单元格边距,保证内容与边框的距离

      //----------使用cellpadding来设置单元格边距
    

    我要做的事

    //----------使用cellpadding来设置单元格边距
    周一 做PPT
    开会
    写报告

    效果:

    5.png

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

    我要做的事

    周一 做PPT
    开会
    写报告

    效果:


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

    我要做的事

    周一 做PPT
    开会
    写报告

    效果:

    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速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    C++ 高级模板编程与元编程
    C++ 高级模板编程与元编程

    本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

    10

    2026.01.23

    php远程文件教程合集
    php远程文件教程合集

    本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

    29

    2026.01.22

    PHP后端开发相关内容汇总
    PHP后端开发相关内容汇总

    本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

    21

    2026.01.22

    php会话教程合集
    php会话教程合集

    本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

    21

    2026.01.22

    宝塔PHP8.4相关教程汇总
    宝塔PHP8.4相关教程汇总

    本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

    13

    2026.01.22

    PHP特殊符号教程合集
    PHP特殊符号教程合集

    本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.22

    PHP探针相关教程合集
    PHP探针相关教程合集

    本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

    8

    2026.01.22

    菜鸟裹裹入口以及教程汇总
    菜鸟裹裹入口以及教程汇总

    本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

    55

    2026.01.22

    Golang 性能分析与pprof调优实战
    Golang 性能分析与pprof调优实战

    本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

    9

    2026.01.22

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 2.9万人学习

    CSS教程
    CSS教程

    共754课时 | 22.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号