企业官网建设流程全解析

dede响应式网站模板,wordpress主题教程黄聪,单页式网站,青岛金融网站建设3.7 HTML表格标签 表格由 table 标签来定义。每个表格均有若干行#xff08;由 tr 标签定义#xff09;#xff0c;每行被分割为若干单元格#xff08;由 td 标签定义#xff0c;即#xff1a;table data#xff1a;数据单元格的内容#xff0…3.7 HTML表格标签表格由table标签来定义。每个表格均有若干行由tr标签定义每行被分割为若干单元格由td标签定义即table data数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。简单的表格tabletrtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/tabletable标签的属性border这个属性定义了表格边框的宽度但它现在已不被推荐使用建议使用CSS来设置边框样式。cellpadding定义单元格内容和单元格边框之间的空间但现在也不推荐使用应使用CSS。cellspacing定义单元格之间的空间但现在也不推荐使用应使用CSS。width 和 height定义表格的宽度和高度但同样建议使用CSS。class 和 id用于应用CSS样式或进行JavaScript操作。td标签的属性colspan定义单元格应横跨多少列。rowspan定义单元格应横跨多少行。headers定义与单元格相关的表头单元格的id列表。3.7.2 cation标签表格标题cation标签用来给表格添加标题tableborder1width300pxheight150pxcaption表格标题/captiontrtd第一行第一列/tdtd第一行第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/table3.7.3 th标签表格表头th标签用来给表格添加表头tableborder1width300pxheight150pxcaption支出表/captiontrth支出/thth备注/th/trtrtd32/tdtd买苹果/td/trtrtd24/tdtd买饮料/td/tr/tableth表头的属性colspan定义单元格应横跨多少列。rowspan定义单元格应横跨多少行。scope定义表头单元格与数据单元格之间的关系例如“row”、“col”、“rowgroup” 或 “colgroup”。abbr定义单元格内容的缩写或简写。headers定义与单元格相关的表头单元格的id列表。3.7.4 跨行与跨列绘制表格的时候我们常常需要合并单元格而在 HTML 中提供了colspan合并列和rowspan合并行属性来帮助我们实现这一效果。tableborder1width300pxheight150pxh3单元跨两列/h3trth姓名/ththcolspan2电话/th/trtrtd张三/tdtd344 22 112/tdtd211 32 123/td/trtrtd李四/tdtd433 31 212/tdtd234 21 654/td/tr/tabletableborder1cellspacing0h3单元跨两行/h3trth姓名/thtd张三/td/trtrthrowspan2电话/thtd344 22 112/td/trtrtd234 21 654/td/tr/table3.7.5 thead、tbody、tfoot标签这些标签分别用于对表格的头部、主体和页脚进行分组。这些元素有助于更好地组织表格内容特别是当与CSS和JavaScript一起使用时。它们没有特定的属性但可以使用class和id进行样式或操作。3.7.6 挑战课程表的制作代码!doctypehtmlhtmllangenheadmetacharsetUTF-8/title课程表/title/headbodytableborder1width60%bgcolorpinkcellpadding2caption课程表/captiontraligncentertdcolspan2时间\日期/tdtd一/tdtd二/tdtd三/tdtd四/tdtd五/td/trtraligncentertdrowspan2上午/tdtd9:30-10:15/tdtd语文/tdtd数学/tdtd外语/tdtd音乐/tdtd体育/td/trtraligncentertd10:25-11:10/tdtd数学/tdtd数学/tdtd物理/tdtd化学/tdtd生物/td/trtrtdcolspan7nbsp;/td/trtraligncentertdrowspan2下午/tdtd14:30-15:15/tdtd体育/tdtd语文/tdtd历史/tdtd政治/tdtd化学/td/trtraligncentertd15:25-16:10/tdtd音乐/tdtd语文/tdtd数学/tdtd美术/tdtd语文/td/tr/table/body/html3.7.7 div标签和table标签比较同样的效果使用 div 布局能比表格更加灵活但是我们需要根据不同的场景使用不同的布局方式现在我们来看看两种布局的优缺点。3.7.7.1 table 元素布局优点理解比较简单。不同的浏览器看到的效果一般相同。缺点显示样式和数据绑定在一起。布局的时候灵活度不高。一个页面可能会有大量的 table 元素代码冗余度高。增加带宽。搜索引擎不喜欢这样的布局。3.7.7.2 div 元素布局优点符合 W3C 标准。搜索引擎更加友好。样式的调整更加方便内容和样式的分离使页面和样式的调整变得更加方便。节省代宽代码冗余度低。表现和结构分离在团队开发中更容易分工合作而减少相互关联性。