《HTML制作表格》PPT课件.ppt

HTML表格制作 制作人 缪卫平 会实现简单表格会实现跨行 跨列的复杂表格会对表格进行美化修饰 本章目标 为什么使用表格 表格应用场合论坛门户网站购物网站 论坛中应用表格 门户网站应用表格 购物网站应用表格 表格的基本结构 行 列 单元格 在HTML文档中 广泛使用表格来存放网页上的文本和图像 表头 表格的基本语法 表头单元格内容 单元格内容 border用来设置表格边框尺寸大小 如何创建表格 姓名性别学号你的名字你的性别你的学号王平男148081222 设置表格边框2像素 第一行 第二行 第三行 什么是跨行跨列的表格 跨3列 跨3行 下图中的表格哪里用了跨行 哪里用了跨列 跨了几行几列 跨多列的表格 学生成绩表英语数学语文959889 COLSPAN n 属性表示跨多少列 跨多行的表格 早上菜谱食物鸡蛋饮料牛奶甜点开心粉 rowspan n 属性表示跨多少行 手机充值 IP卡办公设备 文具各种卡的总汇铅笔彩笔打印刻录 如何创建跨行跨列的表格 小结1 编写如下图所示效果对应的html代码 源代码 此格子跨了3列 第一行第一个格子跨了2行 什么是表格的美化修饰 文字对齐方式 根据理解 下面表格应该从哪些方面进行美化修饰 背景色 源代码 边框宽度 如何设置表格的尺寸和边框 品牌商城笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 width用来设置表格的宽度height用来设置表格的高度 border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 源代码 如何设置背景 笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 background属性用来设置表格的背景图片 bgcolor属性用来设置表格 行 列的背景色 EBEFFF 是用RGB表示的一种颜色值 RGB指的是红绿蓝 源代码 如何设置对其方式 笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 align属性用来设置表格 行 列的对齐方式 left 左 right 右 center 居中 连续的空格 为什么要使用填充属性 单元格里的内容太靠近边线 怎么办 未填充的效果 字与单元格边框之间的距离靠得太近 什么是填充属性和间距属性 border 边框的厚度 cellpadding 单元格填充 cellspacing 单元格间距 如何使用填充 间距属性 border 边框的厚度 cellpadding 单元格填充 cellspacing 单元格间距 源代码 如何设置表格的填充属性 品牌商城笔记本电脑办公设备 文具 耗材惠普华硕打印机刻录盘 cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离 源代码 填充之后的效果 小结2 编写如下图所示效果对应的HTML代码 单元格居中对齐 具体要求 width 400 height 200 border 20 cellpadding 10 cellspacing 10 bordercolor 22FF11 第一行bgcolor EBEFFF 最后以你的学号为文件名保存在桌面上 复制给老师 作为评分依据 如何实现图文内容的布局 达到如左图所示页面的效果 分析上图所示页面 应该用什么进行布局 什么是表格布局 使用表格进行布局 用表格对网页的内容进行整体控制 如何使用表格进行布局 使用表格布局下图 需要几行几列 需要7行2列