（中职）Web前端设计基础 项目三-1电子课件.pptxVIP

（中职）Web前端设计基础 项目三-1电子课件正版可修改PPTYCFWEB前端设计基础网页中的表格项目三授课教师：姓名Contents5.项目小结3.项目实施1.项目描述2.知识准备6.技能训练4.项目拓展一 项目描述本项目学习要点表格的基本结构；编辑表格；完整的表格标签；CSS属性设置。二 知识准备表格基本结构；编辑表格；完整的表格标签。表格基本结构在HTML文档中，使用表格可以清晰地排列数据和布局，但不建议使用表格布局，在web2.0时代，表格定位已经过时了，现在使用的是“DIV+CSS”模式。表格一般由行、列和单元格组成，如图所示。单元格行列表格基本结构表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。在HTML5中，用于创建表格的标签如表所示。标签说明注意事项table用于标记一个表格对象的开始一个表格中，只允许出现一对table/table标签/table用于标记一个表格对象的结束tr用于标记表格一行的开始表格内有多少对tr/tr标签，就表示有多少行/tr用于标记表格一行的结束td用于标记表格某行中的一个单元格的开始td/td标签应写在tr/tr标签内，一对tr/tr标签内有多少对td/td标签，就表示有多少个单元格/td用于标记表格某行中的一个单元格的结束表格基本结构在Sublime中创建表格的快速输入方法是输入【table】后按Tab键可以生成一对table/table标签，但不能构成一个有行有列的表格，最基本的表格必须包含一对table/table标签、一对或几对tr/tr标签以及一对或几对td/td标签。例如在Sublime编辑器中输入【tabletr*2td*2】后按Tab键可以生成一个2行2列的表格代码，如图所示。表格的行高和列宽会根据表格内容发生变化，如果想控制表格的行高和列宽，需要在tr和td标签中用width和height来定义行高和列宽。表格基本结构例3-1创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。body table border=1 cellpadding=0 cellspacing=0 caption图书统计表/caption tr height=40px td width=50px序号/td td width=250px名称/td td width=200px出版社/td /tr tr height=40px td1/td tdWeb前端设计基础/td td北京理工大学出版社/td /tr tr height=40px td2/td tdPhotoshop CS5图像处理项目教程/td td北京理工大学出版社/td /tr tr height=40px td3/td td计算机应用基础/td td北京理工大学出版社/td /tr /table/bodyborder用来设置表格边框，默认情况下表格是没有边框的，加入边框是让读者更清楚地看到表格结构，如值为0则表格无边框，如值为1表格边框为1像素；cellpadding用来设置单元格内容与其边框之间的距离；cellspacing用来设置单元格之间的距离。height用来设置表格行的高度。width用来设置表格行宽。表格基本结构例3-1创建一个4行3列的表格，网页主体代码如下所示（示例文件3-1.html）。body table border=1 cellpadding=0 cellspacing=0 caption图书统计表/caption tr height=40px td width=50px序号/td td width=250px名称/td td width=200px出版社/td /tr tr height=40px td1/td tdWeb前端设计基础/td td北京理工大学出版社/td /tr tr height=40px td2/td tdPhotoshop CS5图像处理项目教程/td td北京理工大学出版社/td /tr tr height=40px td3/td td计算机应用基础/td td北京理工大学出版社/td /tr /table/body在chrome浏览器中预览表格基本结构表格一般都有一个标题，表格标题使用caption标签，表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题。为了清楚地表示表格中数据类别，需要使用表格的表头。表头th是td单元格的一种变体，它的本质还是一种单元格，一般位于第一行或列，用来表明这一行或列的内容类别。表头有一种默认样式，浏览器