HTML与CSS前台页面设计许莉第08章创建表格课件教学.pptVIP

PPT研究院 POWERPOINT ACADEMY * * HTML与CSS前台页面设计 创建表格 第八章 HTML与CSS前台页面设计 第八章 创建表格 HTML与CSS前台页面设计 本章要点 表格基础标记 表格属性 表格高级标记 高级表格 HTML与CSS前台页面设计 目录： 8.1 表格基础标记 8.2 创建简单表格 8.3 表格的属性 8.4 表格高级标记 8.5 创建高级表格 8.6 综合实例 第八章 创建表格 8.1 表格基础标记 在HTML的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。 table标记代表表格的开始，tr标记代表行开始，而td和/td之间的就是单元格的内容。 这几个标记之间是从大到小，逐层包含的关系，由最大的表格，到最小的单元格。 一个表格可以有多个tr和td标记，分别代表多行和多个单元格。 8.2 创建简单表格 8.3 表格的属性 在创建表格之后，我们还需要对表格的各方面属性进行调整，表格的基本属性如表所示。 8.3 表格的属性 1.表格的宽度和高度width,height table width=”value” height=”height” tr width=”value” height=”height” td width=”value” height=”height” 一般情况下只有一列的表格，width写在table的标签内，只有一行的表格，height写在table的标签内，多行多列的表格，width和height 写在第一行或者第一列的td标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width, 保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。 8.3 表格的属性 2.表格的边框border 我们看到，默认情况下表格不显示边框，即border属性值为0，我们可以设置表格边框粗细，单位为像素。 table border=”value” 8.3 表格的属性 3.表格边框颜色bordercolor 添加了5像素的边框后，我们发现，表格上下左右4条边框颜色并不相同。对表格外边框来说，左上边框颜色浅，称为亮边框bordercolorlight，右下边框颜色深，称为暗边框bordercolordark；而单元格的边框相反，左上为暗边框，右下为亮边框。我们可以使用bordercolor属性统一设置4条边框为同一颜色，也可以使用bordercolorlight和bordercolordark分别设置亮边框，暗边框的颜色。 table bordercolor=”value” table bordercolorlight=”value” bordercolordark=”value” 8.3 表格的属性 4.表格背景颜色bgcolor 通过bgcolor属性可以设置表格、行以及单元格的背景颜色。 table bgcolor=”value” tr bgcolor=”value” td bgcolor=”value” 8.3 表格的属性 5.表格背景图片background 除了背景颜色外，我们还可以为表格设置背景图像。 table background=”img_url” 8.3 表格的属性 6.单元格间距cellspacing 可以通过设置cellspacing属性调节单元格与单元格之间的间距。 table cellspacing=”value” 8.3 表格的属性 7.单元格边距cellpadding 单元格边距是指单元格中的内容和边框之间的距离。 table cellpadding=”value” 8.3 表格的属性 8.水平对齐方式align 在水平方向上，对齐方式分别有居左（left）、居中（center）、居右（right）三种。 table align=”left” table align=”left” table align=”left” 在表格标记table中使用align属性，是将整个表格居于浏览器的左、中、右方。 tr align=”value” 在tr标记中使用align属性，是将这一行的中所有单元格中的内容相对所处的单元格居左、居中、居右。 td align=”value” 在td标记中使用align属性，是将该单元格中的内容在单元格中居左、居中、居右。 8.3 表格的属性 9.表格外边