浙江网站改版设计公司,团购网站 设计方案,南开网站建设,织梦视频资讯网站源码html的表格标签
table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域.
table包含tr , tr包含td或者th.
表格标签有一些属性#xff0c;可以用于设置大小边…
html的表格标签
table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域.
table包含tr , tr包含td或者th.
表格标签有一些属性可以用于设置大小边框等但是一般使用CSS方式来设置这些属性都要放到 table标签中.
. align是表格相对于周围元素的对齐方式. aligncenter(不是内部元素的对齐方式)border表示动框。1表示有边框(数字越大,边框越粗)表示没边框.cellpadding:内容距离边框的距离默认1像素cellspacing:单元格之间的距离默认为2像素width / height:设置尺寸.
注意,这几个属性, vscode都提示不出来.
样例如下
姓名性别年龄张三男13李四男14王五女15
用html代码实现上述的表格
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1 width500 height300 cellspacing 0 cellpadding 80 aligncentertrtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd13/td/trtrtd李四/tdtd男/tdtd14/td/trtrtd王五/tdtd女/tdtd15/td/tr/table
/body
/html代码在浏览器运行效果 thead里面的内容居中并且加粗展示 对表头进行代码改进
通常情况下我们把表头相关的信息放在thead中表格内容相关的信息放在tbody中 运行效果
进行单元格合并
代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1 width500 height300 cellspacing 0 cellpadding 80 aligncentertheadtrth姓名/thth性别/thth年龄/th/tr/theadtbodytrtd张三/tdtd rowspan2男/tdtd13/td/trtrtd李四/td!-- td男/td --td14/td/trtrtd colspan2王五/女/td!-- td女/td --td15/td/tr/tbody/table
/body
/html最终运行效果
