《HTML CSS JavaScript网页制作三合一案例教程》教学课件 06第六章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健;第六章 制作表格并使用CSS美化;;案例一 制作2012年世界杯分组表 ——构建和美化表格;案例一 制作休闲文章页面——设置图片效果;一、表格的HTML标签;table/table标签对为表格的主体标签，表格的其他组成元素，如行标签、单元格标签等都包含在table/table标签对之间。在上面的代码中，width=70% border=0 cellspacing=0 cellpadding=0为table标签的相关属性和属性值，表示该表格的宽度为其父元素的70%，其边框粗细、单元格边距以及单元格间距均为0。;tr/tr标签对为表格的行标签，表格有多少行，就有多少个tr/tr标签对。在每行中可以包含多个单元格。;td/td标签对为表格的单元格标签，其包含在tr/tr标签对中。单元格用于存放表格要显示的内容，可以是任意的HTML内容，这些内容位于td/td标签对之间。在表格的一行中可以包含多个单元格。;th/th标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界面中创建表格时可以选择表头所在的位置。在上面的代码中，scope为th标签的属性，表示定义表头，col为属性值，表示将当前列的所有单元格和表头单元格联系起来。;caption/caption标签对为table表格特有的表示标题的标签，同th标签不同的是，caption标签不需要合并，它本身就只有一列，同时caption标签的位置是默认居中的。;二、合并和拆分单元格;合并单元格后，在Dreamweaver的代码界面中可看到系统自动为相应单元格添加了colspan或rowspan属性。因此，我们也可直接在代码视图中通过为单元格标签添加这两个属性来合并单元格。;三、使用CSS设置表格或单元格颜色;四、使用CSS设置表格或单元格大小和边框;案例二 制作月历——使用CSS控制表格进阶;案例二 制作月历——使用CSS控制表格进阶;一、使用CSS设置网页元素的内边距和外边距;margin和padding属性的使用方法相同，可用来分别设置元素的上、右、下、左外边距和内???距，如表6-3所示。;我们也可不在margin和padding属性后面加left、right、top和bottom后缀，而直接在margin和padding后输入属性值，并用空格隔开，如padding:距离1 距离2 距离3 距离4;。使用组合的margin和padding属性时，其参数值一般有4个，从左到右分别代表上、右、下、左边距；如果只提供1个参数值，将用于全部的4个方向；如果提供2个，第1个用于上、下，第2个用于左、右；如果提供3个，第1个用于上，第2个用于左、右，第3个用于下。下面以margin为例说明，如表6-5所示。;二、使用CSS合并表格边框;Thank you！