建设部资质升级网站,网页设计与网站建设完全学习手册,网站建设服务商排名,成立一个做网站的公司000、前言
表格在实际开发中的应用还是比较多的#xff0c;表格可以更加清晰地排列数据
001、基本结构
#xff08;1#xff09;构成
表格#xff1a;table行#xff1a;tr#xff08;table row#xff0c;表格行#xff09;#xff0c;由多少组t…000、前言
表格在实际开发中的应用还是比较多的表格可以更加清晰地排列数据
001、基本结构
1构成
表格table行trtable row表格行由多少组tr标签就有多少行单元格/table data cell表格单元格
2代码
!DOCTYPE html
htmlheadmeat charsetutf-8/title网页标题/title/headbodyh1网页标题1/h1tabletrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/tableh1网页标题2/h1/body
/html3使用CSS进行优化CSS以后学习这里只是单纯让表格更加直观因为默认情况下表格是没有边框的
3使用CSS进行优化CSS以后学习这里只是单纯让表格更加直观因为默认情况下表格是没有边框的!DOCTYPE html
htmlheadmeat charsetutf-8/title网页标题/title!--这里使用了CSS为表格加上边框--style typetext/csstable,tr,td{border:1px solid silver;}/style/headbodyh1网页标题1/h1tablecaption表格标题1/captiontrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/tableh1网页标题2/h1tablecaption表格标题2/captiontrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table/body
/html002、完整结构
除了上面的基本架构还有一些其他表格会用到的标签
1表标题
一般来说一个表格只有一个表头默认情况下caption标签位于表格的第一行
2表头单元格
单元格其实有两种 表头单元格table header cell表头单元格表行单元格 两者都是单元格但是不可以进行互换使用 表头单元格会用“粗体”、“居中”来显示th里的内容但是td不会两者的语义不一样调试不一样
!DOCTYPE html
htmlheadmeat charsetutf-8/title网页标题/title!--这里使用了CSS为表格加上边框--style typetext/csstable,tr,td{border:1px solid silver;}/style/headbodyh1网页标题1/h1tablecaption表格标题1/captiontrth表头单元格01/thth表头单元格02/th/trtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/tableh1网页标题2/h1tablecaption表格标题2/captiontrth表头单元格01/thth表头单元格02/th/trtrtd单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/td/tr/table/body
/html003、语义化后完整的表格语法上述的东西可以直接整合为下面这个code
为了更好语义化HTML还引入了、、三个标签使得逻辑更加清晰调试更加方便并且方便分块来控制表格的CSS样式
!DOCTYPE html
htmlheadmeat charsetutf-8/title表格语义化完整语法/title!--这里使用了CSS为表格加上边框--style typetext/csstable,tr,td{border:1px solid silver;}/style/headbodytablecaption表格标题/caption!--表头部分--theadtrth表头单元格/thth表头单元格/thth表头单元格/th/tr/thead!--表身部分--tbodytrtd表行单元格/tdtd表行单元格/tdtd表行单元格/td/trtrtd表行单元格/tdtd表行单元格/tdtd表行单元格/td/trtrtd表行单元格/tdtd表行单元格/tdtd表行单元格/td/tr/tbody!--表脚部分--tfoottrtd标准单元格/tdtd标准单元格/tdtd标准单元格/td/tr/tfoot/table/body
/html004、合并属性即合并行[rowspan]/合并列[colspan]
1概念
这个类似word的表格合并rowspan可以将单元格合并
2具体语法
td rowspan“行数”td
3具体代码
!DOCTYPE html
htmlheadmeat charsetutf-8/title表格语义化完整语法/title!--这里使用了CSS为表格加上边框--style typetext/csstable,tr,td{border:1px solid silver;}/style/headbodytablecaption表格标题/caption!--表头部分--theadtrth表头单元格/thth表头单元格/thth表头单元格/th/tr/thead!--表身部分--tbodytrtd rowspan2表行单元格/tdtd表行单元格/tdtd表行单元格/td/trtrtd表行单元格/tdtd表行单元格/td/trtrtd colspan2表行单元格/tdtd表行单元格/td/tr/tbody!--表脚部分--tfoottrtd标准单元格/tdtd标准单元格/tdtd标准单元格/td/tr/tfoot/table/body
/html
