第四讲用html创建表格和在页面多媒体_第1页
第四讲用html创建表格和在页面多媒体_第2页
第四讲用html创建表格和在页面多媒体_第3页
第四讲用html创建表格和在页面多媒体_第4页
第四讲用html创建表格和在页面多媒体_第5页
已阅读5页，还剩19页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

第四讲

表格的使用2023/5/24回顾什么是HTML？在HTML中是否区分大小写？在HTML是否所有的标签都成对出现？学过的都有哪些标签、各个标签的用处？2023/5/24本讲目标学习使用HTML创建表格掌握与表格有关的标签及常用属性2023/5/24一、表格的作用1显示数据。使用表格可以清晰地显示列成表的数据，例如图5-1所示的是股票行情的数据列表。这个作用是设计表格标签的初衷。2对网页进行布局。表格的作用不只是显示数据，它还在网页定位上起着重要的作用，通常用于在网页布局中。2023/5/242023/5/24图4-1使用表格显示数据二、使用HTML建立表格

表格的建立将利用3个最基本的HTML标签来完成，它们分别是“<table>”标签、“<tr>”标签和“<td>”标签。建立一个最基本的表格，必须包含一组“<table>”和“</table>”标签、一组“<tr>”和“</tr>”标签以及一组“<td>”和“</td>”标签，这也是最简单的单元格表格。2023/5/24表格的基本结构<table></table>定义表格的基本框架<tr></tr>定义表格的行<td></td>定义表格中行内的单元格2023/5/24二、使用HTML建立表格二、使用HTML建立表格【案例一】最简单的表格示例<html><head><title>单元格</title></head><body><center>2023/5/24<tableborder=1><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td>2023/5/24二、使用HTML建立表格</tr><tr><td>单元格5</td><td>单元格6</td></tr></table></center></body></html>2023/5/24二、使用HTML建立表格2023/5/24图6-2表格二、使用HTML建立表格

合并单元格使用colspan属性左右合并单元格使用rowspan属性上下合并单元格注意：在合并单元格时要注意单元格之间的对应2023/5/24二、使用HTML建立表格完整的表格标记定义表头部分<thead></thead>定义表格主体<tbody></tbody>定义表格脚注<tfoot></tfoot>注意：三个标签的显示顺序是<thead>,<tfoot>,<tbody>三个标签都必须同时使用，要么都不用<thead>和<tfoot>的内容要用<tr><td>来表示，不推荐直接表示2023/5/24三、表格标签<table></table>的属性

属性描述width表格的宽度（以像素为单位）height表格的高度（以像素为单位）align表格在页面的水平摆放位置background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色bordercolorlight表格边框明亮部分的颜色bordercolordark表格边框昏暗部分的颜色cellspacing单元格之间的间距（以像素为单位）cellpadding单元格内容与单元格边界之间的空白距离的大小2023/5/24四、表格行标签<tr></tr>

表格是由行和单元格组成的，一个表格有几行组成就要有几个行标签<tr></tr>，行标签用它的属性值来修饰，属性都是可选的。2023/5/24四、<tr></tr>标签的属性属性描述align行内容的水平对齐valign行内容的垂直对齐bgcolor行的背景颜色bordercolor行的边框颜色bordercolorlight行的亮边框颜色bordercolordark行的暗边框颜色2023/5/24四、【案例三】2023/5/24五、单元格属性属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（如80%）。colspan单元格向右打通的列数rowspan单元格向下打通的行数align单元格内字画等的摆放贴，位置（水平），可选值为：left,center,right。valign单元格内字画等的摆放贴位置（垂直），可选值为：top,middle,bottom。bgcolor单元格的底色bordercolor单元格边框颜色bordercolorlight单元格边框向光部分的颜色bordercolordark单元格边框背光部分的颜色background单元格背景图片2023/5/24五、【案例四】2023/5/24

六、测试题设置围绕表格的边框宽度的HTML代码是？

A.<tablesize=#>B.<tableborder=#>C.<tablebordersize=#>D.<tableborderColor=#>2023/5/24六、测试题HTML代码<tablewidth=#or%>表示？

A.设置表格中单元格之间空间的大小

B.设置表格中单元格边框与其内部内容之间空间的大小

C.设置表格的宽度－用绝对像素值或文档总宽度的百分比

D.设置表格单元格的水平对齐2023/5/24六、测试题设置表格的边框为0的HTML代码是（）

A.<tablecellspacing=0>B.<tableheight

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

温馨提示

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

最新文档

评论

0/150

提交评论