html网页布局学案

1、html网页布局学案表格应用场合 论坛门户网站购物网站论坛中应用论坛中应用表格表格门户网站应门户网站应用表格用表格购物网站应购物网站应用表格用表格为什么使用表格为什么使用表格行行列列单元格单元格在在 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像表格的基本结构表格的基本结构表表格的基本语格的基本语法法 单元格内容单元格内容 .定定义表格义表格 定义列定义列 定义行定义行 border用来设置表格边用来设置表格边框尺寸大小框尺寸大小如何创建表格如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 跨跨3列列跨跨3行行下图中的表

2、格哪里用了跨行？哪里用了跨列？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列? ?什么是跨行跨列的表格什么是跨行跨列的表格跨多列的表格跨多列的表格 学生成绩表学生成绩表 英语英语 数学数学 语文语文 95 98 89 COLSPAN=“n” 属性表示跨多少列？属性表示跨多少列？跨多行的表格跨多行的表格 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan =“n” 属性表示跨多少行？属性表示跨多少行？如何创建跨行跨列的表格如何创建跨行跨列的表格 手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅

3、笔铅笔 彩笔彩笔 打印打印 刻录刻录 小结小结1 1编写如下图所示效果对应的html代码第一行第一个格第一行第一个格子跨了子跨了2行行此格子此格子跨了跨了3列列背景图片背景图片背景色背景色表格的高度表格的高度表格的宽度表格的宽度文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？什么是表格的美化修饰什么是表格的美化修饰如何设置表格的尺寸和边框如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表

4、格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表格边用来设置表格边框尺寸大小框尺寸大小bordercolor用来设置表用来设置表格边框颜色格边框颜色如何设置背景如何设置背景 & 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的属性用来设置表格、行、列的背景色。背景色。“#EBEFFF”是用是用RGB表示表示的一种颜色值，的一种颜色值，RGB指的是红绿蓝指的是红绿蓝 ，下图就是下图就是RGB颜色对照表颜色对照表 。如何设置对其方式如

5、何设置对其方式 & 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表格、属性用来设置表格、行、列的对齐方式行、列的对齐方式为什么要使用填充属性为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边框未填充的效果，字与单元格边框之间的距离靠得太近之间的距离靠得太近什么是填充属性和间距属性什么是填充属性和间距属性border(边框的厚度边框的厚度) 内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何使用填充、间距属性如何使用填充、间距属性border(边框的厚度边框的厚度) cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何使用表格进行布局如何使用表格进行布局使用表格布局下图，需要几行几列？使