《xg网页设计1-2.ppt》由会员分享，可在线阅读，更多相关《xg网页设计1-2.ppt（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML基础（基础（2）表格的创建及布局应用表格的创建及布局应用表格表格表格由表格由 标签来定义。每个表格均有标签来定义。每个表格均有若干行（由若干行（由 标签定义），每行被分割为标签定义），每行被分割为若干单元格。若干单元格。字母字母 td 指表格数据（指表格数据（table data），即数），即数据单元格的内容。数据单元格可以包含文本、据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等图片、列表、段落、表单、水平线、表格等等。等。创建表格的语法创建表格的语法 row 1,cell 1 row 1,cell 2 第二行第第二行第1格格 第二行第第二行第2格格 表
2、格的表头 表格的表头使用 标签进行定义 Heading Another Heading 练习练习用用HTML语句描述如下表格：语句描述如下表格：语文语文数学数学张三8090李四3040空格占位符在大多数浏览器中，没有内容的表格单元显在大多数浏览器中，没有内容的表格单元显示得不太好。示得不太好。部分边框显示不出来。部分边框显示不出来。为了避免这种情况，在空单元格中添加一个为了避免这种情况，在空单元格中添加一个空格占位符（空格占位符（ ），就可以将边框显示），就可以将边框显示出来。出来。 语文 数学 张三 8090 李四30 40 添加表格标题成绩单成绩单 单元格的合并单元格的
3、合并横跨两行的单元格横跨两行的单元格 rowspan=“”姓名姓名 Bill Gates 联系电话联系电话 555-12345 555-23456 横跨两列的单元格：Colspan=“2”table border=1 姓名姓名 联系电话联系电话 Bill Gates 555 12345 555 23456横向合并横向合并 a1 a2 a3a4b1b2 b3b4c1c2 c3c4纵向合并纵向合并 a1 a2b2a3a4b1 b3b4 c1c2 c3c4 a1 a2 a3 b2 b3 a4 b1b4用ALIGN属性设置对齐方式设计者可以自己设定表格的大小。设计者可以自己设定表格的大小。只需在只需在
4、标记中设定标记中设定height和和width属性即属性即可。可。表格增大后，文字总是会在表格的左边，要使其居表格增大后，文字总是会在表格的左边，要使其居中对齐，可以在中对齐，可以在中加上中加上align=“center”如果要整个表格的内容都居中，要在每个如果要整个表格的内容都居中，要在每个内设内设置置align属性属性在单元格内嵌套其它元素段落段落列表列表表格表格嵌入列表这个单元包含一个列表：这个单元包含一个列表：苹果苹果 香蕉香蕉 菠萝菠萝 这个单元包含一个表格：这个单元包含一个表格：A B C D CELLPADDING属性-单元格边距可以用来设定表格单元格中的内容距离格线的距离。可以
5、用来设定表格单元格中的内容距离格线的距离。First Row Second RowCELLSPACING单元格间距用来设定相邻单元格边线之间的距离用来设定相邻单元格边线之间的距离 First Row Second RowBGCOLOR属性-设置表格背景色该属性可以为整个表格，整行，或是某该属性可以为整个表格，整行，或是某个单元格设置背景色。个单元格设置背景色。在在,或或内使用。内使用。练习一利用,等标记,align等属性实现以下表格。练习二、MonthSavings January$100 February$80 Sum$180 配合CSS代码设置表格样式 thead color:green
6、tbody color:blue;height:50px tfoot color:red 表格布局示例表格布局示例在DREAMWEAVER的设计状态利用利用FIREFOX组件显示页面布局信息组件显示页面布局信息“标示表格标示表格”、“显示表格深度显示表格深度”显示单元格布局显示单元格布局“显示表格深度显示表格深度”查看并编辑页面的HTML动态标示元素动态标示元素对应的对应的html代码代码 INSERT WEBSITE NAMENOWRAP属性td元素的nowrap属性表示禁止单元格中的文字自动换行。但使用时要注意的是，td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用，如果设置了td宽度，则nowrap属性不起作用。图片布局图片布局空白格子空白格子 导航的布局导航的布局 ABOUT USWEB标准的优点（结构和表现分离）开发高效和维护简单便于改版与未来兼容跨平台的可用性一次建立，随处使用服务器成本降低 存储容量要求大大降低加快网页解析速度更加良好的用户体验单独思考内容及统一性