HTML第二节表格4.5(3.23)浅析.ppt

第四章 HTML 基础语法  —第二节 4.5 表格 本节教学目标 1、掌握表格的HTML的基本语法； 2、掌握表格及其属性的标记。 重点:使用HTML标记语言熟练设置表格的标记； 难点:使用HTML标记语言熟练设置表格的标记。 本节教学内容 4.5.1 表格的HTML的基本语法 4.5.2 表格属性的标记 4.5.1 表格的HTML的基本语法 table tr td /td /tr /table ①table…… /table 表示插入一个表格 ②tr…………/tr 表示插入一行表行 ③th………../th 表示插入一列，但只能用于题头部分 ④ td…………/td 定义单元格 范例1：插入2行3列的表格。 在body…../body中插入相应的内容 table tr th1/th th2/th th 3/th /tr tr tdA/td tdB/td td C/td /tr /table 表示插入了1行3列的表格 表示插入了1行3列的表格 表示插入了2行3列的表格 范例1：插入2行3列的表格。 table tr th1/th th2/th th 3/th /tr tr tdA/td tdB/td td C/td /tr /table 1 2 3 A B C 范例1：插入2行3列的表格。 table tr td1/td td2/td td 3/td /tr tr tdA/td tdB/td td C/td /tr /table 1 2 3 A B C 思考并回答：插入3行3列表格的HTML代码？ table tr th1/th th2/thth 3/th /tr tr tdA/tdtdB/tdtd C/td /tr tr tda/tdtdb/tdtd c/td /tr /table 1 2 3 A B C a b c ① width 表格宽度 height 表格高度 ② border 表格边框 ③ background 表格背景图片 bgcolor 表格的背景颜色 ④ cellspacing 表格之间的空白距离 cellpadding 表格表格内文本和单元格之间的距离 ⑤ align 设置表格的对齐方式 4.5.2 表格属性的标记 1、 width 表格宽度 书写格式： table width=“”……../table height 表格高度 书写格式： table height=“”……../table 4.5.2 表格属性的标记 2、 border 表格边框 书写格式： table border=“”……../table border的默认值为0 4.5.2 表格属性的标记 3、 background 表格背景图片 书写格式： table background =“a.jpg”/table bgcolor 表格的背景颜色 书写格式： table bgcolor =“”……/table 4.5.2 表格属性的标记 4、 cellspacing 表格之间的空白距离 cellpadding 表格内文本和单元格之间的距离 你 好 4.5.2 表格属性的标记 5、 align 设置表格的对齐方式 书写格式：table align =“”…../table align的属性 center：横向剧居中 left：横向剧居左 right:横向剧居右 4.5.2 表格属性的标记 课上活动1 练习使用表格的align=“right/center/left”的标记，并观察其网页效果图。 6、单元格的属性标记 （1）书写格式：td align =“”…../td 表示的是对这个单元格的属性设置 ① align的属性 center：横向居中 left：横向居左 right:横向居右 ② valign的属性 top：纵向居上 middle：纵向居中