[表格布局.pptVIP

8.* 第8章表格布局 本章结构 创建表格 设置表格格式 高级表格标记 小结 创建表格 在HTML的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。 table标记代表表格的开始，tr标记代表行开始，而td和/td之间的就是单元格的内容。 这几个标记之间是从大到小，逐层包含的关系，由最大的表格，到最小的单元格。 一个表格可以有多个tr和td标记，分别代表多行和多个单元格。 标记 描述 table/table 表格标记 tr/tr 行标记 td/td 单元格标记 基本表格标记 table和/table 任何一个表格都由table标记开始，由/table标记结尾，table标记是表格的根标记，table和/table标记必须成对出现。 html head titlebasic table tags: example 1/title /head body table 表格内容 /table /body /html 设置表格行 tr标记是table row的简称，代表起始行。 标记table和/table之间可以包含任意多个tr标记，一般把tr看成是一行单元格的容器。 table tr 行内容 /tr /table 设置表格列 th是 table head的简称，用来在一行中设置一个表头。 td是 table data的简称。它是一种数据单元格标记，用来标记除表头以外的其他单元格。 table border=1 width=90% tr th姓名/th th年龄/th /tr tr td罗昌/td td26/td /tr /table 创建简单的表格 表格的属性 在创建表格之后，我们还需要对表格的各方面属性进行调整，表格的基本属性如表所示。 表格的属性 调整表格尺寸 如果没有为表格设置具体的尺寸，表格将根据需要自动调整大小 指定表格尺寸，需要在table标记中添加width（宽度）和height（高度）属性。 width属性可以用像素数来表示，也可以用占浏览器窗口宽度的百分比来表示。对于height也是一样。 对齐方式 使用align属性可以为表格设定位置，它的属性值有left、right、和center三种，默认为left。 表格的边框border 我们看到，默认情况下表格不显示边框，即border属性值为0，我们可以设置表格边框粗细，单位为像素。 table border=”value” 表格的属性 表格的应用 body table border=10 bordercolor=#996803 align=center bgcolor=#ddffdd width=500 height=150 bordercolorlight=#8899cc bordercolordark=#660000 cellspacing=2 cellpadding=8 tr valign=middle bgcolor=#00ffff bordercolor=#ff00ff bordercolorlight=blue bordercolordark=#ff0000 th计算机系/td th自动化系/td th电子信息系/td /tr tr tdc#程序设计/td td自控原理/td td数字信号处理/td /tr tr td网络安全/td td计算机接口技术/td td电子系统设计/td /tr /table /body 表格的应用 运行效果图 表格的属性 设置表格背景颜色 使用bgcolor属性： bgcolor＝”pink” table、 tr、 td（或th）标记中均可使用 在td（或th）中设置的背景颜色要优先于在tr设置的背景颜色，而在tr中设置的背景颜色又将优先于在table中设置的背景颜色。 设置表格格式 在表格中插入图片 可以把图片放入某一个单元格内，也可以把图片作为表格背景。 要想为表格加入背景图片，需要在table标记中加入background属性。在这里，该属性的值是图片的URL地址。被设置为表格背景的图片将平铺在表格占用的所有空间上。 如果要在一个单元格中加入图片，需要在相应单元格的标记（td或th）之间加入img标记，并指定图片相应的URL地址。 设置表格格式 在表格中插入图片 设置表格格式 调整单元格大小 使用width属性来指定单元格的宽度，其单位可以是像素数，也可以是占整个表格宽度的百分比。 tr th width=50%姓名/th th width=30%性别/th th width=20%年龄/th /tr 设置表格格式 设置元格内容的对齐方式 控制单元格内容的对齐方式主要使用两个属性：align和valign。 align用来设置水平对齐方式