3讲 表格

执行校长李伟表格基础企业网站制作(第三讲)2课程回顾Font是什么标签？有哪些属性？对齐的方式有哪几种？鼠标经过图像如何制作？目前学过的不成对使用的标签有哪些？3本讲目录表格基础及其基本结构表格的编辑表格的属性设置4本讲重点、难点重点表格布局方式难点表格布局方式5表格基础及其基本结构表格是网页布局中极为有用的设计工具，用来定位页面中的基本元素，以使页面中的各元素能够达到有序排列的目的。6什么是表格及其用途排版！7表格的基本语法结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像8table…/table定义了一个表格，table可能包含若干个可选的元素，以形成一个结构复杂的表格。tr.../tr定义了一个表格行，必须出现在table内td…/td定义了表格中的一个单元格，必须处在一个tr元素中9表格的基本语法结构tabletrtd单元格内容/tdtd单元格内容/td……/trtrtd……/tdtr…………/table定义表格table/table定义行tr/tr定义单元格td/td以上均为双标签10表格的基本语法结构tablewidth=200border=1trtdimgsrc=“/1.jpgwidth=182height=188//tdtdimgsrc=“/2.jpgwidth=182height=188//tdtdimgsrc=“/3.jpgwidth=182height=188//tdtdimgsrc=“/4.jpgwidth=182height=188//td/trtrtd¥19.00/tdtd¥138.00/tdtd¥178.00/tdtd¥49.00/td/tr/table11表格的创建及嵌套表格创建方法插入记录-表格常用插入栏中的插入表格按钮12表格的创建及嵌套表格的嵌套操作步骤将光标定位到需插入嵌套表格的单元格内插入表格13表格的编辑表格的编辑选择整个表格选择行或列选择单元格添加行或列删除行或列拆分单元格合并单元格14表格的编辑跨行跨列表格跨3列跨3行15表格的编辑跨行跨列表格标签TABLEborder=2TRTDcolspan=3学生成绩表/TD/TRTRTD英语/TDTD数学/TDTD语文/TD/TRTRTD95/TDTD98/TDTD89/TD/TR/TABLECOLSPAN=n属性表示跨多少列？16表格的编辑TABLEborder=1TRTDrowspan=3早上菜谱/TDTD食物/TDTD鸡蛋/TD/TRTRTD饮料/TDTD牛奶/TD/TRTRTD甜点/TDTD开心粉/TD/TR/TABLErowspan=n属性表示跨多少行？17表格的编辑创建跨行跨列表格TABLEborder=1TRTD手机充值、IP卡/TDTDcolspan=2办公设备、文具/TD/TRTRTDrowspan=2各种卡的总汇/TDTD铅笔/TDTD彩笔/TD/TRTRTD打印/TDTD刻录/TD/TR/TABLE18表格的编辑现场编程第一行第一个单元格跨了2行此单元格跨了3列19典型案例——制作“我的课程表”表格第一行第一个单元格跨了2行第一行第二个单元格跨了5列20典型案例——制作“我的课程表”表格创建一个“wodekechengbiao.html”网页，将素材图像复制到网页保存的位置设置网页的背景图像设置网页内容居中对齐插入一个5行6列，宽度为600的表格将第一列的前两个单元格合并，将第一行的后5个单元格合并在第三行第2~6个、第四行2~6个单元格中嵌套表格（4行1列，2行1列）插入文字、图像21典型案例——制作“我的课程表”表格设置“我的课程表”为“华文隶书”，字号“30”将“星期一”——“星期六”、“上午”、“下午”、“晚上”设置为粗体22设置表格的属性设置表格的属性选中表格在属性面板进行设置Id:对表格进行命名填充：设置单元格边界和单元格内容之间的距离间距：设置相邻单元格之间的距离对齐：设置表格与文本或图像等网页元素的对齐方式删除表格多余的列宽删除表格多余的行高23设置表格的属性表格的大小和边框TABLEwidth=“400height=“200”border=15bordercolor=redTRTDcolspan=4品牌商城/TD/TRTRTDcolspan=2笔记本电脑/TDTDcolspan=2办公设备、文具、耗材/TD/TRTRTD惠普/TDTD华硕/TDTD打印机/TDTD刻录盘/TD/TR/TABLEwidth用来设置表格的宽度height用来设置表格的高度border用来设置表格边框尺寸大小bordercolor用来设置表格边框颜色24设置表格的属性TABLEbackground=images/type_back.jpgwidth=360height=120border=2TRTDcolspan=6 /TD/TRTRbgcolor=#EBEFFFTDcolspan=3笔记本电脑/TDTDcolspan=3bgcolor=yellow办公设备、文具、耗材/TD/TR……/TABLEbackground属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。25设置表格的属性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属性用来设置表格、行、列的对齐方式26设置表格属性border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)27设置表格的属性border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)TABLEborder=20cellpadding=30cellspacing=40bordercolor=red……/TABLE28设置表格的属性如何设置表格的填充属性TABLEcellspacing=5cellpadding=10border=1background=images/type_back.jpgTRTDcolspan=6 /TD/TRTRbgcolor=#EBEFFFTDcolspan=3align=center笔记本电脑/TDTDcolspan=3align=center办公设备、文具、耗材/TD/TR…./TABLEcellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离填充之后的效果29设置单元格的属性选择单元格在属性面板设置水平、垂直下拉列表框设置单元格中的内容在水平和垂直方向上的对齐方式边框文本框用于设置单元格边框颜色不换行复选框，选中时文本超过单元格宽度时，单元格会自动加宽以适应文本宽度。30表格布局案例分析使用表格布局下图需要几行几列？需要7行2列31表格布局案例分析TABLEwidth=298TRTDcolspan=2IMGsrc=images/adv.jpg//TD/TRTRTDwidth=122rowspan=6align=leftIMGsrc=images/wangyou.jpgwidth=116height=142//TDTDwidth=“285”Ahref=#超值变形金钢2.5折!/A/TD/TRTRTDAhref=#人们为啥对电视吼叫/A/TD/TR……/TABLE32表格布局案例分析布局如下格式，代码如何？跨2行，并放了一副图片此单元格放了一副图片此单元格跨了3列33典型案例——美化“我的课程表”整个表格的填充、间距、边框分别为0、1、1背景颜色设置“我的课程表”居中对齐，将“星期一~星期五”设置为居中对齐设置第一列水平、垂直方向都居中将第五行第二列之后的单元格设置为居中将嵌套表格的填充、间距、边框设为5、1、4背景颜色为”#d6e1f0”34典型案例——美化“我的课程表”35本讲回顾创建表格最基本的是哪三个标签？创建跨行、跨列标签的属性是什么？什么情况下使用？表格的美化从哪几个方面进行？