HTML制作表格学习教案

会计学1HTML制作表格制作表格第一页，编辑于星期六：十四点 十六分。第1页/共22页第二页，编辑于星期六：十四点 十六分。为什么使用表格表格应用场合论坛门户网站购物网站论坛中应用表格论坛中应用表格门户网站应用表格门户网站应用表格购物网站应用表格购物网站应用表格第2页/共22页第三页，编辑于星期六：十四点 十六分。表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像表头表头第3页/共22页第四页，编辑于星期六：十四点 十六分。 表头表头单元格内容单元格内容 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表格边框尺寸大小用来设置表格边框尺寸大小 定义列定义列( (表头表头) ) 第4页/共22页第五页，编辑于星期六：十四点 十六分。 姓名姓名 性别性别 学号学号 你的名字你的名字 你的性别你的性别 你的学号你的学号 王平王平 男男 148081222 设置表格边框设置表格边框2像素像素第一行第一行第二行第二行第三行第三行第5页/共22页第六页，编辑于星期六：十四点 十六分。什么是跨行跨列的表格什么是跨行跨列的表格跨跨3列列跨跨3行行下图中的表格哪里用了跨行？哪里用了跨列？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列? ?第6页/共22页第七页，编辑于星期六：十四点 十六分。 学生成绩表学生成绩表 英语英语 数学数学 语文语文 95 98 89 COLSPAN=“n” 属性表示跨多少列？属性表示跨多少列？第7页/共22页第八页，编辑于星期六：十四点 十六分。 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan =“n” 属性表示跨多少行？属性表示跨多少行？第8页/共22页第九页，编辑于星期六：十四点 十六分。 手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔 打印打印 刻录刻录 第9页/共22页第十页，编辑于星期六：十四点 十六分。源代码源代码此格子跨了此格子跨了3列列第一行第一个格子跨了第一行第一个格子跨了2行行第10页/共22页第十一页，编辑于星期六：十四点 十六分。什么是表格的美化修饰文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？表格的高度表格的高度表格的宽度表格的宽度背景色背景色源代码源代码边框宽度边框宽度第11页/共22页第十二页，编辑于星期六：十四点 十六分。 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表格边框尺寸大小用来设置表格边框尺寸大小bordercolor用来设置表格边框颜色用来设置表格边框颜色源代码源代码第12页/共22页第十三页，编辑于星期六：十四点 十六分。   笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的背景色。属性用来设置表格、行、列的背景色。“#EBEFFF”是用是用RGB表示的一种颜色值，表示的一种颜色值，RGB指的是红绿蓝指的是红绿蓝 。源代码源代码第13页/共22页第十四页，编辑于星期六：十四点 十六分。   笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表格、行、列的对齐方式：属性用来设置表格、行、列的对齐方式：left(左左)、right(右右)、center(居中居中)连续的空格连续的空格第14页/共22页第十五页，编辑于星期六：十四点 十六分。未填充的效果，字与单元格边框之间的距离靠得太近未填充的效果，字与单元格边框之间的距离靠得太近第15页/共22页第十六页，编辑于星期六：十四点 十六分。border(边框的厚度边框的厚度) 内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)第16页/共22页第十七页，编辑于星期六：十四点 十六分。border(边框的厚度边框的厚度) cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)源代码源代码第17页/共22页第十八页，编辑于星期六：十四点 十六分。 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 cellspacing属性用来设置表格内框宽度属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离属性用来设置表格内填充距离源代码源代码填充之后的效果填充之后的效果第18页/共22页第十九页，编辑于星期六：十四点 十六分。单元格居中对齐单元格居中对齐具体要求：具体要求：width=400“height=200 border=20 cellpadding=10 cellspacing=10 bordercolor=#22FF11”第一行第一行bgcolor=#EBEFFF”最后以你的学号为文件名保存在桌面上，复制给老师，作为评分依据。第19页/共22页第二十页，编辑于星期六：十四点 十六分。如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？ 使用使用表格表格进行布局进行布局用表格对网页的内容进行整体控制用表格对网页的内容进行整体控制第20页/共22页第二十一页，编辑于星期六：十四点 十六分。使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 第21页/共22页第二十二页，编辑于星期六：十四点 十六分。