table表格总结

wuchangjian2021-11-03 23:46:01编程学习

表格1.0

表格的定义:“table”标签 定义HTML表格。简单的HTML表格由table元素以及一个或多个“tr”“td”元素组成表格结构;其中:“tr”元素定义表格行,“td”元素定义表格单元。也可用border,colspan,rowspan,align,bgcolor来美化表格。
一.表格的标签。

标签用处
table定义表格
thead定义表格的页眉
th表格表头
tr定义表格的行
td定义表格单元格
tbody定义表格主体
tfoot定义表格的页脚
border定义表格边框(取大于等于“0”的数值,默认值为0没有边框)
bgcolor表格的背景颜色
background背景图片
cellspacing间距:单元格和单元格之间的距离
cellpading边距:单元格内元素距离单元格的距离
align定义表格所处的位置(可取center,lift,right)
rowspan垂直方向上的跨行合并
colspan水平方向上的跨行合并

二、代码及效果。
表格无边框
代码:
在这里插入图片描述
效果:
在这里插入图片描述
有边框:

效果:
在这里插入图片描述

注释:“border”表示表框的宽度,取大于等于“0”的数值,默认值为0没有边框,取值越大宽度越大。“width”表示宽度,取值越大表格越宽。“height”表示表格高度,取值越大表格越高。
表格的对齐(例如表格居中“center”,还可取“lift”右对齐“right”左对齐,如果未设置默认值为居左)
代码:
在这里插入图片描述
效果:
在这里插入图片描述
表格的背景
代码:(例如背景颜色为红色(red)背景图片)
在这里插入图片描述
在这里插入图片描述

效果
在这里插入图片描述
在这里插入图片描述
表格的间距,边距
代码:
间距(cellspacing):单元格和单元格之间的距离

在这里插入图片描述
效果:
在这里插入图片描述
边距(cellpading):单元格内元素距离单元格的距离
代码:
在这里插入图片描述

效果:
在这里插入图片描述
补充:
如果table和tr同时设置不同高度,tr的优先级高
如果tr和td同时设置了不同的高度,哪个高取哪个(哪个值大取哪个)
表格的嵌套:
代码:
在这里插入图片描述
效果:
在这里插入图片描述

表格的合并:
代码:
在这里插入图片描述
效果:
在这里插入图片描述

相关文章

第五天学习

第五天学习

Java方法详解 何谓方法 #System.out.println(&...

thinkphp5 结合阿里云发送登录注册验证码短信

发送方法如下: public function sendSms()...

DOS命令打开一个软件,以及在python中的使用

以edge浏览器为例: 其路径为:  C:\Progra...

微博将上线个人主页展示公开评论功能,用户无法主动开启或关闭

微博将上线个人主页展示公开评论功能,用户无法主动开启或关闭

2022-08-22 15:22:49 为进一步加强言论攻击及网暴行为...

现场成交额超4500万元!2022湖南旅博会闭幕,超5万人次观展

现场成交额超4500万元!2022湖南旅博会闭幕,超5万人次观展

2022-08-27 16:10:10 8月27日下午,为期3天的20...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。