HTML制作表格

HTML表格制作制作人：追梦天马•会使用表格的基本结构实现简单表格•会使用表格相关标签实现跨行、跨列的复杂表格•会使用表格相关设置进行美化修饰本章目标为什么使用表格•表格应用场合–论坛–门户网站–购物网站论坛中应用表格门户网站应用表格购物网站应用表格表格的基本结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格的基本语法TABLEborder=1TRTD单元格内容/TD……/TR……/TABLETABLE.../TABLE定义表格TD…/TD定义列TR…/TR定义行border用来设置表格边框尺寸大小如何创建表格TABLEborder=2TRTD移动/TDTD联通/TDTD铁通/TD/TRTRTDIBM/TDTD惠普/TDTD华硕/TD/TR/TABLE查看源代码什么是跨行跨列的表格跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?跨多列的表格TABLEborder=2TRTDcolspan=3学生成绩表/TD/TRTRTD英语/TDTD数学/TDTD语文/TD/TRTRTD95/TDTD98/TDTD89/TD/TR/TABLECOLSPAN=“n”属性表示跨多少列？查看源代码跨多行的表格TABLEborder=1TRTDrowspan=“3”早上菜谱/TDTD食物/TDTD鸡蛋/TD/TRTRTD饮料/TDTD牛奶/TD/TRTRTD甜点/TDTD开心粉/TD/TR/TABLErowspan=“n”属性表示跨多少行？查看源代码TABLEborder=1TRTD手机充值、IP卡/TDTDcolspan=2办公设备、文具/TD/TRTRTDrowspan=2各种卡的总汇/TDTD铅笔/TDTD彩笔/TD/TRTRTD打印/TDTD刻录/TD/TR/TABLE如何创建跨行跨列的表格查看源代码小结1编写如下图所示效果对应的html代码第一行第一个格子跨了2行此格子跨了3列练习答案练习代码什么是表格的美化修饰背景图片背景色表格的高度表格的宽度文字对齐方式根据理解,下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框TABLEwidth=“400”height=“200”border=“15”bordercolor=redTRTDcolspan=4品牌商城/TD/TRTRTDcolspan=2笔记本电脑/TDTDcolspan=2办公设备、文具、耗材/TD/TRTRTD惠普/TDTD华硕/TDTD打印机/TDTD刻录盘/TD/TR/TABLEwidth用来设置表格的宽度height用来设置表格的高度border用来设置表格边框尺寸大小bordercolor用来设置表格边框颜色查看源代码如何设置背景TABLEbackground=“images/type_back.jpg”width=“360height=120border=2TRTDcolspan=6 /TD/TRTRbgcolor=#EBEFFFTDcolspan=3笔记本电脑/TDTDcolspan=“3”bgcolor=yellow办公设备、文具、耗材/TD/TR……/TABLEbackground属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。查看源代码如何设置对其方式TABLEwidth=350height=100border=2background=images/type_back.jpgTRTDcolspan=4 /TD/TRTRbgcolor=#EBEFFFTDcolspan=2align=center笔记本电脑/TDTDcolspan=2align=center办公设备、文具、耗材/TD/TRTRbgcolor=#EBEFFFTD惠普/TDTD华硕/TDTD打印机/TDTD刻录盘/TD/TR/TABLEalign属性用来设置表格、行、列的对齐方式查看源代码为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)查看源代码TABLEborder=20cellpadding=30cellspacing=40bordercolor=red……/TABLE如何设置表格的填充属性TABLEcellspacing=“5”cellpadding=“10”border=“1background=images/type_back.jpgTRTDcolspan=6 /TD/TRTRbgcolor=#EBEFFFTDcolspan=3align=center笔记本电脑/TDTDcolspan=3align=center办公设备、文具、耗材/TD/TR…./TABLEcellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离查看源代码填充之后的效果小结2表格的高度、宽度、背景图像、边框和填充属性行的背景色单元格居中对齐练习答案练习代码编写如下图所示效果对应的HTML代码–如何实现图文内容的布局，达到如左图所示页面的效果？–分析上图所示页面，应该用什么进行布局？什么是表格布局使用表格进行布局用表格对网页的内容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？需要7行2列如何使用表格进行布局TABLEwidth=298TRTDcolspan=2IMGsrc=images/adv.jpg//TD/TRTRTDwidth=“122”rowspan=“6”align=“left”IMGsrc=images/wangyou.jpgwidth=116height=142//TDTDwidth=“285”Ahref=“#”超值变形金钢2.5折!/A/TD/TRTRTDAhref=#人们为啥对电视吼叫/A/TD/TR……/TABLE查看源代码编写如下图所示效果对应的html代码小结3跨2行，并放了一副图片此单元格放了一副图片此单元格跨了3列练习答案练习代码总结•创建表格最少需要那三个标签？•简述表格的基本结构。•跨行跨列的表格，主要在什么情况下使用？•给你一个表格，你会从哪些方面进行美化？