Web前端开发基础创新实践教程课件：制作股票信息表.pptxVIP

Createastockinformationtable制作股票信息表前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1.制作股票信息表

web前端技术基础1.1HTML5新增语义化标签table标签表格相关标签

web前端技术基础1.2figure标签组表格table标签是由行组成，每行又由单元格组成。每行tr标签都包含标题行单元格th或数据单元格td。!--表格标签示例--tableborder=1trth日期/thth薪水/thth开销/th/trtrtd一月/tdtd￥5000/tdtd￥3000/td/trtrtd二月/tdtd￥6500/tdtd￥4500/td/trtrtd积蓄/tdtdcolspan=2align=center￥4000/td/tr/table

web前端技术基础1.3表格相关标签HTML表格也可以包括col、colgroup、caption、thead、tfoot以及tbody元素。caption定义表格标题，colgroup定义一个列的组合，col定义一列。thead定义表头区，tbody定义表格主体，tfoot定义表的脚部。tableborder=1width=100% !--表标题-- caption收入明细/caption !--规定每列的组合样式-- colgroup colwidth=40%style=background-color:#e6e6e6; colwidth=60%style=background-color:gold; /colgroup !--表头部分-- thead tr th日期/thth收入/th /tr /thead !--主体部分-- tbody tr td一月/tdtd￥5000/td /tr tr td二月/tdtd￥6000/td /tr tr td总计/tdtd￥11000/td /tr /tbody !--表脚部分-- tfoot tr tdcolspan=2说明：已扣除个人所得税/td /tr /tfoot/table

web前端技术基础3.任务实践任务介绍：日常生活中表格是常见的内容，如财务数据、时刻表等。本任务利用table及其相关的标签，完成股票信息表的制作。页面内容包括表头和具体的内容行。不同行内容样式不同，利用CSS样式，将各行设置为合适的外观样式。任务要求：本任务制作股票信息表，表的上方有一行内容包含：自选股、最近访问、基金超市。表格内容包括表头信息是股票名称、最新价、涨跌幅，第二行到第五行是具体的股票信息，股票名称样式一致，价格与涨跌幅内容具有不同样式，

web前端技术基础经验小贴士表格标签除了应用于实际的表格外，有时也可用了布局简单的结构，比如导航结构。各种标签在不同浏览器渲染下会存在一定的默认内外边距差异，为清楚此差异，通常可以用通配符匹配所有元素，并设置内外边距为零来解决。表格自带的默认属性已经逐渐被HTML5所弃用，通常用CSS来设置样式，表格默认也有内外边距，也可以通过设置padding和margin为0来消除默认边距。123

谢谢观看CreateastockinformationtableFundamentalsofWebFrontendTechnology前端开发技术基础