wallcapershirg. cory 3.表格与表单(组件) 目录2 1.网页表格 2.网页表格装饰 3.网页元件设计 4.网页按钮
目录2 1.网页表格制作 2.网页表格装饰 3.网页元件设计 4.网页按钮 3.表格与表单(组件)
B居格与单 表格标签使用在网页中可是个重量级的角色,不要以为表格只是用 来填写格式化的数据,其实表格最重要的功能是用来“排版”!虽 然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式 表格的功能,但是在ASP程序中却是毫无用武之处,因此,学会表 格标签的使用就显得非常重要了。 3-1 表格制作 网页表格标签:要制作网页表格必须使用到三组标签,分别是、与,我们在纸上绘制表 格,通常都是先画表格最外围的大方框对吧,在网页表格的制作上 也是一样,我们必须先使用这组网页标签来 定义表格的方框。 定义表格行数:完成表格大方框的制作后 接着就要制定表格的行数(画横线), 要定义表格行数则必须使用这组网页标签。 定义表格列数:要定义表格列数(画直线)则必须使用这组网页标签
3 表格与表单 表格标签使用在网页中可是个重量级的角色，不要以为表格只是用 来填写格式化的数据，其实表格最重要的功能是用来“排版”！虽 然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式 表格的功能，但是在ASP程序中却是毫无用武之处，因此，学会表 格标签的使用就显得非常重要了。 3－1 网页表格制作 网页表格标签：要制作网页表格必须使用到三组标签，分别是＜ TABLE＞＜/TABLE＞、＜TR＞与＜TD＞＜/TD＞，我们在纸上绘制表 格，通常都是先画表格最外围的大方框对吧，在网页表格的制作上 也是一样，我们必须先使用＜TABLE＞＜/TABLE＞这组网页标签来 定义表格的方框。 定义表格行数：完成表格大方框的制作后， 接着就要制定表格的行数（画横线）， 要定义表格行数则必须使用＜TR＞＜/TR＞这组网页标签。 定义表格列数：要定义表格列数（画直线）则必须使用＜TD＞＜ /TD＞这组网页标签
说明 火于网页中先定义表格的外框标 签, border.属线为定义表格框绻的粗细。数值大框 线越粗。 在标签之间加入行标签 ,这样就可以产生我们的标题栏位,接着在中加入三组<>标签这样可将 行切成三份,然后分别在三组标签中填 入数学、自动控制原理、传感器技术。这样就完成了 表格标题制作。 ☆分数列请依法炮制。 标准的网页表格制作就是这么容易,请大家自己练 习制作一个3×3的表格吧!
说明 ☆于网页中先定义表格的外框＜TABLE＞＜/TABLE＞标 签，border属线为定义表格框线的粗细，数值越大框 线越粗。 ☆在＜TABLE＞＜/TABLE＞标签之间加入行标签＜TR＞ ＜/TR＞，这样就可以产生我们的标题栏位，接着在＜ TR＞＜/TR＞中加入三组＜TD＞＜/TD＞标签这样可将 行切成三份，然后分别在三组＜TD＞＜/TD＞标签中填 入数学、自动控制原理、传感器技术，这样就完成了 表格标题制作。 ☆分数列请依法炮制。 ☆标准的网页表格制作就是这么容易，请大家自己练 习制作一个3×3的表格吧！
例2 例1 Head> 3X网络表格 head> 2X3网络表格 /head> body 高等数学 自动控制原理传感器技术 高等数学自动控制原理80传感器技术√td 90 85 80 905学分85 4学分2学分 /tr K/table> /table> /bod
例 1 2X3网络表格 高等数学 自动控制原理 传感器技术 80 90 85 例 2 3X3网络表格 高等数学 自动控制原理 传感器技术 80 90 85 5学分 4学分 2学分
3-1-1合并列 制作标准网页表格(九宫格)是简易的事,但若是我们的表格并不是那么规矩时该怎么 处理?这个时就可以利用定义表格列数网页标签的“ COLSPAN”属性。 如果希望将数据栏位修改一下,则我们必须使用合并列的功能,格式:网页标签专属的属性只能合并左右栏位,那如果要有一个 跨行的数据格该怎么办?要建立一个跨行的数据格则必须使用“ ROWSPAN"属性,利用 上一个合并列的例子修改而成,我们在科目的左方再加上一个“成绩列表”的数据格, 同时这个数据必须直跨三行,我们先来看看原始代码 在原始代码中,我们可以发现跨列的 COLSPAN属性值变成3,为什么就成3?因为我们加 入了一个跨越三行的数据格栏位,因此就变成每一行都有三栏之故。 接着我们在第二行中加入跨越三行的数据格栏位的标签语句成绩列 表,其他的都没有变动 注意 虽然我们的“成绩列表”数据格是直跨三行的,但是我们只要在第二行中加入标签语句就好,其余的行都不用加了,因为标签语 句就代表了我们建立的数据格栏是向下跨越三行了,千万不要再画蛇添足,否则将会有 错误的情形产生
3－1－1 合并列 制作标准网页表格（九宫格）是简易的事，但若是我们的表格并不是那么规矩时该怎么 处理？这个时就可以利用定义表格列数＜TD＞网页标签的“COLSPAN”属性。 如果希望将数据栏位修改一下，则我们必须使用合并列的功能，格式：＜COLSPAN＝ “合并列数”＞。 3－1－2 合并行 既然COLSPAN属性是＜TD＞网页标签专属的属性只能合并左右栏位，那如果要有一个 跨行的数据格该怎么办？要建立一个跨行的数据格则必须使用“ROWSPAN”属性，利用 上一个合并列的例子修改而成，我们在科目的左方再加上一个“成绩列表”的数据格， 同时这个数据必须直跨三行，我们先来看看原始代码： 在原始代码中，我们可以发现跨列的COLSPAN属性值变成3，为什么就成3？因为我们加 入了一个跨越三行的数据格栏位，因此就变成每一行都有三栏之故。 接着我们在第二行中加入跨越三行的数据格栏位的标签语句＜td rowspan=”3”＞成绩列 表＜/td＞，其他的都没有变动。 注意 虽然我们的“成绩列表”数据格是直跨三行的，但是我们只要在第二行中加入＜td rowspan=”3”>标签语句就好，其余的行都不用加了，因为＜tdrowspan=”3”＞标签语 句就代表了我们建立的数据格栏是向下跨越三行了，千万不要再画蛇添足，否则将会有 错误的情形产生
例3 合并行与列/head> 自动化专业2000级学生平均成绩列表 /td> /tr> td rowspan="3">2003年考试成绩列表高等数学78 自动控制原理95 传感器技术td>85 /table> /body html>
例3 合并行与列 自动化专业2000级学生平均成绩列表 2003年考试成绩列表 高等数学78 自动控制原理95 传感器技术85
8=感伤布置 最基础的表格呈现就是它那外围的大框框,也就是标 签的“ border”属性设置。 指定表格框线< TABLE BORDER=“数值” BORDER属性值越大,表格的外框线越粗,当然你也可以把它设 置为0,这们就没有表格的外框线了。 范例 3-2-1表格框线颜色设置 指定表格框线颜色 <TABLE BORDERCOLO BORDERCOL0R属性的颜色值大多使用RGB16进制的颜色码来设置, 例如要设置为红色,则颜色码就是“#FF0000”,当然你也可 以用英文单句“RED”来替代了 范例
3－2 网页表格装饰布置 最基础的表格呈现就是它那外围的大框框，也就是＜TABLE＞标 签的“border”属性设置。 指定表格框线＜TABLE BORDER＝“数值”＞ BORDER属性值越大，表格的外框线越粗，当然你也可以把它设 置为0，这们就没有表格的外框线了。 范例 3－2－1 表格框线颜色设置 指定表格框线颜色 ＜TABLE BORDERCOLOR“颜色值”＞ BORDERCOLOR属性的颜色值大多使用RGB16进制的颜色码来设置， 例如要设置为红色，则颜色码就是“＃FF0000”，当然你也可 以用英文单句“RED”来替代了。 范例
例4 例5 head> 表格框线设置 表格框线颜色设置 /title> /title> /head> 高等数学 bordercolor= #ff0000 /td自动控制原理 高等数学td /td>td>传感器技术 自动控制原理传感 /td〉/tr> 器技术 td>80td>90 8090 /td〉td>8585/tr> /table> K/table> /body> /htm1>
例4 表格框线设置 高等数学 自动控制原理 传感器技术 8090 85 例5 表格框线颜色设置 高等数学 自动控制原理传感 器技术 8090 85
3-2-3格背景图弃设置 指定表格背景图片 注意,表格标签的 BACKGR0UN属性值是链接一个图片文件,如 果图片与网页本身不是位于同一个目录下,我们就要再指定图 片文件的路径。 范例 3-2-4表格宽度设置 表格标签的 WIDTH属性是用来设置表格宽度,其宽度的设置分为 像素或百分比,使用百分比来设置宽度,则表格的宽度会随着 显示画面的大小自动调整宽度,若使用像素为单位来设置,则 表格的宽度不会随着显示画面的大小而调整宽度
3－2－3 表格背景图片设置 指定表格背景图片 ＜TABLE BACKGROUND＝“图片文件名”＞ 注意，表格标签的BACKGROUND属性值是链接一个图片文件，如 果图片与网页本身不是位于同一个目录下，我们就要再指定图 片文件的路径。 范例 3－2－4 表格宽度设置 ＜TABLE WIDTH＝“宽度设置”＞ 表格标签的WIDTH属性是用来设置表格宽度，其宽度的设置分为 像素或百分比，使用百分比来设置宽度，则表格的宽度会随着 显示画面的大小自动调整宽度，若使用像素为单位来设置，则 表格的宽度不会随着显示画面的大小而调整宽度
例6 例7 Head> Head> title>表格背景颜色设置表格背景图片设置 K/title> K /head> /head> 高等数学高等数学 /td>自动控制原理 自动控制原理传感 /td传感器技术 器技术 /td>/tr> 8090/td 8090 >85/tr> 85/tr) /table> K /table> /body> /body> </html
例6 表格背景颜色设置 高等数学 自动控制原理 传感器技术 8090 85 例7 表格背景图片设置 高等数学 自动控制原理传感 器技术 809085