Web前端开发必知必会 课件-中文版 lesson 2-2 表格标签与应用.pptx

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10表格与图像LESSON2-2

CONTENTS01<table><tr><td>02图像标签与背景图像03表格与图像应用实例

<table>、<tr>、<td>,<img>2024/4/1001

网页中的表格Note：td:tabledatacelltr:tablerowh2:headerlevel2<table><td><tr>

2024/4/10表格有关属性<table>width：(pxof%),height：(pxof%)border,cellspacing,cellpadding,bgcolor,bordercolor<tr>height(无宽度属性）bgcolor（无背景图像）<td>width,height,background,bgcoloralign,valigncolspan,rowspan

其他表格相关标签(usethead,tbody,tfoot,th…)2024/4/10captiontheadtbody里的thtdtfoot

内容图像与背景图像<img>内容图像属性包括：width,heightaltsrctitle如：<imgsrc=“images/logo.png”alt=“LOGO”title=“logo”/>2024/4/1002

背景图像使用HTML标签属性（旧）background=“path+filename”如：<bodybackground=“img/bg1.jpg">或：<tdwidth="200"height=“50"background="lab1-2/trail1.gif"> </td>使用(inline行内式)CSS<bodystyle=“background-image:url(img/bg1.jpg);background-repeat:repeat-x;”>使用CSS选择器(后述)<!---定义一个类class，名为mycell----><tablewith=“800”……> <tr><tdwidth="200"class="mycell“> </td><!---使用这个类---->2024/4/10注意：使用相对路径

试一试：模仿杭州小客车网站：/

2024/4/1004

按F12，查看网站中真实网页元素信息（高仿）2024/4/10

Summary小结Imageandbackgroundimage图像与图像背景:<imgsrc=“pic,jpg”>VS<tablebackground=“pic,jpg”>table，tr，td表格结构表格居中VSdiv居中（拓展）div的使用2024/4/10

ThankYou地址：杭州市滨江区滨文路528号邮政编码：310053