使用表格市公开课一等奖省赛课获奖课件_第1页
使用表格市公开课一等奖省赛课获奖课件_第2页
使用表格市公开课一等奖省赛课获奖课件_第3页
使用表格市公开课一等奖省赛课获奖课件_第4页
使用表格市公开课一等奖省赛课获奖课件_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与观赏

第8章使用表格佳木斯大学陈春蕾>使用表格第1页一、创建表格（一）创建一个普通表格应包含标识标识1.<TABLE></TABLE>:定义整个表格，表格全部内容都位于该标识内。2.<CAPTION></CAPTION>:定义表格标题，其惯用属性是align，取值以下：

1）top：在表格上部（默认值）

2）bottom：在表格下部

3）left：在表格上部左侧

4）right：在表格上部右侧3.<TR></TR>：定义表格中行，且一对<TR></TR>只能定义一行4.<TH></TH>：定义表格中表头单元格5.<TD></TD>：定义每行中各个单元格，行中有多少个单元格，就有多少个<TD>

第8章使用表格

创建表格使用表格第2页（二）合并单元格1.行合并：在<TD>或<TH>内使用rowspan属性（跨越行数）2.列合并：在<TD>或<TH>内使用colspan属性（跨越列数）（三）创建表格步骤1.先使用<TABLE>，若需要标题，则在<TABLE>后使用<CAPTION>；2.使用<TR>画第一行；3.使用<TD>或<TH>定义该行上各列单元格；（1）若碰到跨行单元格，则用rowspan属性，且在首次出现行中使用rowspan（2）若碰到跨列单元格，则用colspan进行合并4.重复步骤2－3，依次画出每一行，直到表格结束。创建表格第8章使用表格使用表格第3页<table>标签属性有：

width（宽度）height（高度）bgcolor（背景颜色）background（表格背景图片）border（边框宽度）bordercolor（边框颜色）bordercolorlight（边框明亮部分颜色）bordercolordark（边框昏暗部分颜色）cellspacing（单元格边距）cellpadding（单元格填充距）align（对齐方式）使用表格第4页<TR>标签属性有：align(水平对齐方式）valign（垂直对齐方式）bgcolor（行背景颜色）bordercolor（边框颜色）bordercolorlight（边框明亮部分颜色）bordercolordark（边框昏暗部分颜色）使用表格第5页<TD>标签属性有：Align（水平对齐方式）valign（垂直对齐方式）width（宽度）height（高度）bgcolor（单元格背景色）colspan（跨占列数，缺省值为1)rowspan（跨占行数，缺省值为1）使用表格第6页二、表格对齐1.表格在页面中对齐：（1）直接在<TABLE>中使用align属性（2）将<TABLE>放在<DIV

align=“”>与</DIV>之间2.表格内容水平对齐：在<TR>、<TH>、<TD>内使用align属性3.表格内容垂直对齐：在<TR>、<TH>、<TD>内使用valign属性（取值为top/middle\bottom）创建表格第8章使用表格使用表格第7页三、使用表格设计网页布局（一）控制表格和单元格大小使用width和height属性来定义表格或单元格大小，其取值能够是象素或百分比。例：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>控制表格和单元格大小</title></head><body><tableborderaligh="center"><trheight="400"><tdwidth="200"> <tdwidth="300"> <tdwidth="200"> <tr><tdcolspan="3"height="100"> </table></body></html>第8章使用表格使用表格第8页第3章文字与段落（二）设置表格及单元格背景能够在<TABLE>、<TR>、<TH>、<TD>等标识内使用bgcolor或background属性来定义背景色或背景图片。（三）使用嵌套表格在给页面布局时，非常有效一个方法就是将表格嵌套。只要将表格作为一个单元格内容，放在<TD>与</TD>之间即可。例：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>使用嵌套表格</title></head><body><tablealign=centercellspacing=0cellpadding=0width=619><tr><tdalign="left"height=30bgcolor="blue"><p><fontsize=2color=white>  当前位置：

<ahref="#"><fontcolor=white>首页</font></a>>

<ahref="#"><fontcolor=white>新闻</font></a>>

<ahref="#"><fontcolor=white>个人天地</font></a>>使用表格第9页<tr><tdalign="middle"valign="top"height="345"><br><tablebordercellspacing=0cellpadding=5width=606><tr><tdheight=253width=85bgcolor="99ccff"> <tdvalign="top"height="253"width="495"><br><p>在线听歌：

<ul><li><ahref="#">一千年以后</a><li><ahref="#">女人花</a><li><ahref="#">只要有你</a>

</ul>

</table>

<palign=center><fontsize=2>|<ahref="#">首页</a>|<ahref="#">网页制作</a>|<ahref="#">读者服务</a>|<ahref="#">联络我们</a></font></table></body></html>使用表格第10页四、表格布局综合应用在很多网页上，经常使用各种细线进行页面布局，从而使页面到达简练明快、不呆板效果。（一）表格框线效果制作关键点：1.将<table>中bgcolor属性设为要显示线颜色；2.将<table>中cellspacing属性设为细线粗细（值为1）；3.将单元格或行bgcolor属性设为不一样于表格<table>中bgcolor值（通常为white）第8章使用表格使用表格第11页例：<html><head><title>表格框线效果</title></head><body><tablealign=centercellspacing=1cellpadding=5bgcolor="pink"><trbgcolor="white"><tdwidth=200align=center><b>我们与时间</b>

<trbgcolor="white"><tdalign=middle>年月日时分秒，<br><br>是我们给时间定义单位，<br><br>也是时间度量我们生命尺度。<br><br>有些人说，时间飞逝，<br><br>错矣！<br><br>时间永恒，是我们离去！<br><br>

</table></body></html>第8章使用表格使用表格第12页（二）横竖分隔线效果制作关键点：1.将<table>中cellspacing=0cellpadding=0；2.将要做为细线单元格bgcolor属性设为细线颜色；3.将单元格width属性（竖线）或height（横线）设为细线粗细，为1（该单元格中不能有任何内容）。第8章使用表格使用表格第13页例：<html><head><title>横竖分隔线效果</title></head><body><tablealign=centercellspacing=0cellpadding=0><trheight=100><tdwidth=100> <tdwidth=1bgcolor=black><tdwidth=600><h1align=center><fontface=幼圆>良言</font></h1><trheight=1><tdcolspan=3bgcolor=black><trheight=300><tdwidth=100> <tdwidth=1bgcolor=black><td

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论