HTML5+CSS3程序设计第3章 HTML5中的表格.pptVIP

* 第3章 HTML 5中的表格 01 绘制表格 03 单元格标签td的属性 02 行标签的属性 04 表格的结构标签 04 表头标签的属性 绘制表格 1 主要内容 设置表格的边框 1 设置表格的宽度和高度 2 设置表格的边框色 3 设置表格的对齐方式 4 设置表格的背景颜色 5 设置表格的背景图片 6 设置表格的边框 table标签的border属性设置表格边框。 table border=valuetable 默认的情况下，表格的边框为0 设置表格的宽度和高度 表格的宽度和高度根据内容自动调整，也可以手动设置表格的宽度和高度。 table width=value height=value table border=3 height=200 width=400 /table height：设置表格的高度。 设置表格的对齐方式 表格中通过设置属性align的值来设定表格的对齐方式 对齐方式可以取值为： table align=value left center right 设置表格的背景颜色 bgcolor的值可以定义表格的背景颜色 table bgcolor=value value：颜色的值， 英文颜色名称或十六进制颜色值 设置表格的背景图片 设置属性background的值可以为表格的背景加入一张背景图片 value：图片的地址， table background=value 绝对路径， 也可以为相对路径 行标签的属性 2 主要内容 设置行的高度 1 设置行的边框颜色 2 设置行的背景颜色 3 设置行的水平位置 4 设置行的垂直位置 5 设置行的高度 某一行高度和其他行高度不相等时，需要使用height属性。 value：设置行的高度（用来设置某一行） tr height=value 设置行边框颜色 通过设置bordercolor的属性单独为边框设置颜色 value：英文颜色名称或十六进制颜色值表现 tr bordercolor=value 设置行背景颜色 通过设置bgcolor的属性单独为行设置背景颜色 value：英文颜色名称或十六进制颜色值 tr bgcolor=value 设置行水平位置 通过设定行属性align的值，改变本行的水平对齐方式： value： tr align=value 左对齐、居中对齐和右对齐 left、center和right。 设置行垂直位置 通过设定行属性valign的值，来改变本行的垂直对齐方式：居上、居中和居下 value：top、middle和bottom。 tr valign=value 单元格标签td的属性 2 主要内容 设置单元格的大小 1 设置单元格的水平对齐属性 2 设置单元格的垂直对齐属性 3 设置单元格的水平跨度 4 设置单元格的垂直跨度 5 设置单元格的背景色 6 单元格属性的综合运用 8 设置单元格的背景图片 7 设置单元格大小 调整单元格大小方法和table标签调整表格大小的方法一样，也是通过设置width和height的值来改变大小。 设置单元格水平对齐属性 水平方向上，可以设定单元格的对齐方式：有居左、居中、居右3种 td align=value 例如，设置表格的水平对齐方式为右对齐 td align=” right” 设置单元格垂直对齐属性 设定单元格的对齐方式，分别有居上、居中、居下3种 td valign=value value：表格的对齐方式可以取值为： 设置表格的垂直对齐方式为居下对齐： top、middle和bottom。 td valign=bottom 设置单元格水平跨度 水平方向上是跨过多个列，需要使用跨列属性colspan来合并单元格 td colspan=value value：代表单元格跨的列数。 设置单元格垂直跨度 有的单元格在垂直方向上是跨过多个行的，需要使用跨行属rowspan td rowspan=value value：代表单元格跨的行数 设置单元格背景色 为不同的单元格分别设置不同的背景颜色。它的用法与设置表格的背景颜色相同 td bgcolor=value 例如设置单元格的背景颜色为红色： td bgcolor=red 设置单元格背景图片 单元格可以为背景添加图片，与设置表格的背景图片相同 td background=value value：图片的地址，可以是绝对路径，也可以为相对路径。 td background=a.jpg *