DHTML表格层与样式表学习教案

1、会计学1DHTML表格表格(biog)层与样式表层与样式表第一页，共35页。第1页/共35页第二页，共35页。行行列列列标题(biot)在在 HTML 文档中，广泛使用表格文档中，广泛使用表格(biog)来存放网页上的文本和来存放网页上的文本和图像图像单元格单元格表格标题第2页/共35页第三页，共35页。 表标记表标记 行标记行标记 单元格标记单元格标记 标题标记标题标记 列标记列标记第3页/共35页第四页，共35页。使用表格 姓名(xngmng) 性别 分数 robert m 80 .代表表格的开始，border=2表示(biosh)边框尺寸为2表示行，这是表格的第一行，有三列数据(shj)

2、，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据第4页/共35页第五页，共35页。第5页/共35页第六页，共35页。nValign = topnValign = middlenValign = bottom数据单元格 1第6页/共35页第七页，共35页。学员(xuyun)档案信息 姓名 性别 分数 robert m 80 .表示(biosh)表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据第7页/共35页第八页，共35页。 学员档案信息 姓名(xngmng) 性别 分数 robert m 80 .整个(zhngg)表格居中姓名列默认左对齐 性别列居

3、中 分数列右对齐 第8页/共35页第九页，共35页。创建表格 第一学期(xuq)第二学期(xuq) 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88. COLSPAN=“n” 属性表示属性表示(biosh)跨多少列跨多少列 第9页/共35页第十页，共35页。创建表格 螺母(lum) 螺栓 锤子 第一季度一月250010001240 二月300025004000 .ROWSPAN=“n” 属性表示属性表示(biosh)跨多少行跨多少行 第10页/共35页第十一页，共35页。 学员(xuyun)档案信息 姓名 性别 分数 robert m 80 mary f 18 表格(bi

4、og)的颜色设置：表格(biog)的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。1880分分数数FM性性别别MaryRobert姓名姓名学员档案信息学员档案信息第11页/共35页第十二页，共35页。第12页/共35页第十三页，共35页。1.在在Web页中插入层时，可以使用两种标记进页中插入层时，可以使用两种标记进行行(jnxng)设

5、置：设置：div，span第13页/共35页第十四页，共35页。图图3.11：示例：示例10的输出结果的输出结果将元素分组将元素分组 第一层第一层这是第一部分内的一个段落元素这是第一部分内的一个段落元素第一层的内容。第一层的内容。该部分之外该部分之外 第二部分第二部分这是第二部分内的一个段这是第二部分内的一个段第一层的内容。第一层的内容。 第14页/共35页第十五页，共35页。第15页/共35页第十六页，共35页。HTML第16页/共35页第十七页，共35页。第17页/共35页第十八页，共35页。RuleSelector property:value;property: value; . 规则

6、选择器规则选择器声明声明属性属性属性值属性值第18页/共35页第十九页，共35页。第19页/共35页第二十页，共35页。第20页/共35页第二十一页，共35页。.water color:blue .danger color:red 测试测试(csh)水水测试测试(csh)危险危险无样式无样式斜体斜体类选择器示例类选择器示例(shl)第21页/共35页第二十二页，共35页。ID选择器示例选择器示例(shl)第22页/共35页第二十三页，共35页。上下文选择器示例上下文选择器示例(shl)第23页/共35页第二十四页，共35页。第24页/共35页第二十五页，共35页。 h1color:maroon

7、; pcolor:hotpink; font-family:arial;第25页/共35页第二十六页，共35页。设置属性设置属性(shxng)本段应用了内嵌样式本段应用了内嵌样式本段以默认样式显示。本段以默认样式显示。您能发现本行中的您能发现本行中的不同之处不同之处吗？吗？第26页/共35页第二十七页，共35页。设置设置(shzh)属性属性。第27页/共35页第二十八页，共35页。第28页/共35页第二十九页，共35页。第29页/共35页第三十页，共35页。类型类型CSS属性属性值值字体字体属性属性font-familyArial，serif，宋体宋体font-sizeSmall，medium

8、，large或直接指定字体大小或直接指定字体大小font-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本文本属性属性text-alignleft, right, center, justifytext-indent度量或度量或%text-decoration none, blink, underline, overline, line-throughtext-transform none, capitalize, uppercase, lowercasevertical-alignBaseline, super,

9、sub, top, text-top, middle-bottom, text-bottomword-spacing度量度量letter-spacing度量度量第30页/共35页第三十一页，共35页。类型类型CSS属性属性值值框框属属性性borderNone, solid, double, ridge, inset, outset, groove, dotted dashedborder-style同上同上border-width度量度量，thick，medium，thinborder-color#RRGGBB，颜色名称，颜色名称margin-top度量或度量或%Margin-left度量或度量或%定位定位属性属性top度量度量width度量或度量或%height度量或度量或%left度量度量颜色颜色属性属性color#RRGGBB，颜色名称，颜色名称background-color #RRGGBB，颜色名称，颜色名称，transparentbackg