第6章表格与表单.ppt

第6章 表格与表单 表格与表单 6.1 表格控制 6.1 表格控制 6.1.1 表格的创建 6.1.2 表格的属性控制 1．表格属性 成功插入表格后，当选中整个表格时，“属性”面板即刻显示当前表格的各种属性。 2．单元格属性 选择一个或多个单元格，此时“属性”面板即刻显示相关属性参数。 图6-4 单元格属性面板 6.1 表格控制 6.1.3 表格的基本操作 1．向表格内添加内容 图6-5 插入表格 图6-6 插入一幅图像 图6-7 插入多幅图像 1．向表格内添加内容 6.1 表格控制 2．选择表格与单元格 图6-10 单击上边框选择整个表格 图6-11 使用标签选择器选择整个表格 鼠标变成 表格网格图标 选择table标签 6.1 表格控制 3．拆分、合并表格 拆分指的是将一个单元格拆分为多个单元格；合并指的是将多个单元格合并为一个单元格。 图6-20 预览效果 4．复制、粘贴表格 5．添加删除表格的行或列 6.1 表格控制 6.1.4 表格中常用的CSS属性 与表格相关的CSS属性主要有border-collapse、border-spacing、caption-side和empty-cells， 更为详细的解释，如表6-1所示。 表6-1 表格中常用的CSS属性 隐藏边框 hide 设置表格的单元格无内容时，是否显示该单元格的边框（仅当表格行和列的边框独立时此属性才生效 显示边框 show（默认值） empty-cells caption 在表格的左边 left caption 在表格的下边 bottom caption 在表格的右边 right 设置表格的caption对象是在表格的那一边，它是和caption对象一起使用的属性 caption 在表格的上边 top（默认值） caption-side 当设置表格为边框独立时，行和单元格的边在横向和纵向上的间距。当指定一个length值时，这个值将作用于横向和纵向上的间距；当指定了两个length值时，第一个作用于横向间距，第二个作用于纵向间距 由浮点数字和单位标识符组成的长度值，不可为负值 length border-spacing 边框合并 collapse 设置表格的行和单元格的边框是否合并在一起 边框独立 separate（默认值） border-collapse 说明 属性值及其含义 属性 6.1 表格控制 6.1.5 隔行换色CSS表格 图6-36 最终预览效果 6.1 表格控制 6.2.1 创建表单域 图6-38 创建表单域 6.2 表单控制 6.2.2 插入多种表单对象 1．插入文本字段 图6-39 插入单行文本字段 图6-40 插入多行文本字段 图6-41 插入密码类型文本字段 6.2 表单控制 2．插入复选框和复选框组 图6-42 插入单个复选框 6.2 表单控制 3．插入单选按钮和单选按钮组 4．插入列表或菜单 图6-45 菜单预览后的效果 图6-47 列表预览后的效果 6.2 表单控制 5．插入跳转菜单 6．插入文件域 6.2 表单控制 6.2.3 表单的美化——CSS登录框的制作 图6-58 最终预览效果 6.2 表单控制 图6-59 最终效果图 图6-60 布局示意图 6.3 课堂综合练习 图6-92 布局示意图 图6-93 最终预览效果图 6.4 课堂综合实训