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同时设置了不同的高度,哪个高取哪个(哪个值大取哪个)
表格的嵌套:
代码:
在这里插入图片描述
效果:
在这里插入图片描述

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

相关文章

Axure 教程 | 自制下拉列表框

Axure 教程 | 自制下拉列表框

​   Axure中系统自带的下拉列表框,列表项无法在前台界面被删...

Android编译命令m、mm、mmm区别及工程搭建示例

要使用m、mm、mmm命令对Android代码进行模块编译,需要先执行如下...

微信小程序访问odoo xmlrpc和jsonrpc 持续更新中。。。

odoo这个开源ERP,允许外界使用两种RPC(远程过程调用):xmlrp...

改善Java程序的N个建议(一)

改善Java程序的N个建议(一)

最近细读了秦小波老师的《编写高质量代码改善Jaav程序的151个建议》,要...

发表评论    

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