html表格基础.ppt

《html表格基础.ppt》由会员分享，可在线阅读，更多相关《html表格基础.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二章第二章第二章第二章表格基础表格基础表格基础表格基础回顾回顾 HTML标签区分大小写吗？标签区分大小写吗？HTML的基本结构并说明各部分的含义。的基本结构并说明各部分的含义。页面链接有几种？分别用在什么场合？页面链接有几种？分别用在什么场合？超链接的基本格式及其各部分的含义。超链接的基本格式及其各部分的含义。2本章任务本章任务制作制作“宝贝分类宝贝分类”页面页面制作制作“公告栏公告栏”页面页面3会使用表格的基本结构实现简单表格会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰会使用表格相关设置进

2、行美化修饰本章目标本章目标4为什么使用表格为什么使用表格表格应用场合表格应用场合论坛论坛门户网站门户网站购物网站购物网站论坛中应用论坛中应用表格表格门户网站应门户网站应用表格用表格购物网站购物网站应用表格应用表格5表格的基本结构表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像6表格的基本语法表格的基本语法 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小7如何创建表格如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠

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

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

5、惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表用来设置表格边框尺寸大小格边框尺寸大小bordercolor用来设用来设置表格边框颜色置表格边框颜色15如何设置背景如何设置背景 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表表示的一种颜色值，示的一种颜色值，RGB指的

6、是红绿指的是红绿蓝蓝，下图就是，下图就是RGB颜色对照表颜色对照表。16如何设置对其方式如何设置对其方式 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式17为什么要使用填充属性为什么要使用填充属性单元格里的内容太靠近边线，怎么办？单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边未填充的效果，字与单元格边框之间的距离靠得太近框之间的距离靠得太近18什么是填充属性和间距属性什么是填充属性和间距属性border(边框的厚度边框的厚度)内

7、容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)19如何使用填充、间距属性如何使用填充、间距属性border(边框的厚度边框的厚度)cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)20如何设置表格的填充属性如何设置表格的填充属性 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 .cellspacing属性用来设属性用来设置表格置表格内框宽度内框宽度 cellpadding属性用来属性用来设置表格内填充距离设置表格内填充距离填充之后填充之后的效果的效果2

8、1小结小结2 2表格的高度、宽表格的高度、宽度、背景图像、度、背景图像、边框和填充属性边框和填充属性行的背景色行的背景色单元格居单元格居中对齐中对齐编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码22如何实现图文内如何实现图文内容的布局，达到容的布局，达到如左图所示页面如左图所示页面的效果？的效果？分析上图所示页分析上图所示页面，应该用什么面，应该用什么进行布局？进行布局？什么是表格布局什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制23如何使用表格进行布局如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局

9、下图，需要几行几列？需要需要7行行2列列 24如何使用表格进行布局如何使用表格进行布局 超值变形金钢超值变形金钢2.5折折!人们为啥对电视吼叫人们为啥对电视吼叫 查看源代码查看源代码25编写如下图所示效果对应的编写如下图所示效果对应的html代码代码小结小结3 3跨跨2行行，并放了，并放了一副图片一副图片此单元格放此单元格放了一副图片了一副图片此单元格此单元格跨了跨了3列列26总结总结创建表格最少需要那三个标签？创建表格最少需要那三个标签？简述表格的基本结构。简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？给你一个表格，你会从哪些方面进行美化？27