wallcapershirg. cory 3.表格与表单(组件) 目录2 1.网页表格 2.网页表格装饰 3.网页元件设计 4.网页按钮
目录2 1.网页表格制作 2.网页表格装饰 3.网页元件设计 4.网页按钮 3.表格与表单(组件)
B居格与单 表格标签使用在网页中可是个重量级的角色,不要以为表格只是用 来填写格式化的数据,其实表格最重要的功能是用来“排版”!虽 然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式 表格的功能,但是在ASP程序中却是毫无用武之处,因此,学会表 格标签的使用就显得非常重要了。 3-1 表格制作 网页表格标签:要制作网页表格必须使用到三组标签,分别是< TABLE></ TABLE>、<TR>与<TD></TD>,我们在纸上绘制表 格,通常都是先画表格最外围的大方框对吧,在网页表格的制作上 也是一样,我们必须先使用< TABLE></ TABLE>这组网页标签来 定义表格的方框。 定义表格行数:完成表格大方框的制作后 接着就要制定表格的行数(画横线), 要定义表格行数则必须使用<TR></TR>这组网页标签。 定义表格列数:要定义表格列数(画直线)则必须使用<TD>< /TD>这组网页标签
3 表格与表单 表格标签使用在网页中可是个重量级的角色，不要以为表格只是用 来填写格式化的数据，其实表格最重要的功能是用来“排版”！虽 然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式 表格的功能，但是在ASP程序中却是毫无用武之处，因此，学会表 格标签的使用就显得非常重要了。 3－1 网页表格制作 网页表格标签：要制作网页表格必须使用到三组标签，分别是＜ TABLE＞＜/TABLE＞、＜TR＞与＜TD＞＜/TD＞，我们在纸上绘制表 格，通常都是先画表格最外围的大方框对吧，在网页表格的制作上 也是一样，我们必须先使用＜TABLE＞＜/TABLE＞这组网页标签来 定义表格的方框。 定义表格行数：完成表格大方框的制作后， 接着就要制定表格的行数（画横线）， 要定义表格行数则必须使用＜TR＞＜/TR＞这组网页标签。 定义表格列数：要定义表格列数（画直线）则必须使用＜TD＞＜ /TD＞这组网页标签
说明 火于网页中先定义表格的外框< TABLE></ TABLE>标 签, border.属线为定义表格框绻的粗细。数值大框 线越粗。 在< TABLE></ TABLE>标签之间加入行标签<TR> </R>,这样就可以产生我们的标题栏位,接着在< TR></TR>中加入三组<></T>标签这样可将 行切成三份,然后分别在三组<TD></TD>标签中填 入数学、自动控制原理、传感器技术。这样就完成了 表格标题制作。 ☆分数列请依法炮制。 标准的网页表格制作就是这么容易,请大家自己练 习制作一个3×3的表格吧!
说明 ☆于网页中先定义表格的外框＜TABLE＞＜/TABLE＞标 签，border属线为定义表格框线的粗细，数值越大框 线越粗。 ☆在＜TABLE＞＜/TABLE＞标签之间加入行标签＜TR＞ ＜/TR＞，这样就可以产生我们的标题栏位，接着在＜ TR＞＜/TR＞中加入三组＜TD＞＜/TD＞标签这样可将 行切成三份，然后分别在三组＜TD＞＜/TD＞标签中填 入数学、自动控制原理、传感器技术，这样就完成了 表格标题制作。 ☆分数列请依法炮制。 ☆标准的网页表格制作就是这么容易，请大家自己练 习制作一个3×3的表格吧！
例2<htm1> 例1 Head> <html> < title>3X网络表格</ title Head> head> < title>2X3网络表格 <body> </title> <table border="3"> /head> body <td>高等数学</td> <table border="1> <td>自动控制原理</td <td>传感器技术</td <tr </tr> <td>高等数学</td <tr) <td>自动控制原理<td <td>80</td <td>传感器技术√td <td>90</td〉 </tr> <td>85</td> <tr> </tr> <td>80</td <tr> <td>90</td <td>5学分</td <td>85</td> <td>4学分</td <td>2学分</td> /tr </tr> K/table> /table> /bod </body) /htm1> </htm1>
例 1 <html> <head> <title>2X3网络表格 </title> </head> <body> <table border="1"> <tr> <td>高等数学</td> <td>自动控制原理</td> <td>传感器技术</td> </tr> <tr> <td>80</td> <td>90</td> <td>85</td> </tr> </table> </body> </html> 例 2 <html> <head> <title>3X3网络表格</title> </head> <body> <table border="3"> <tr> <td>高等数学</td> <td>自动控制原理</td> <td>传感器技术</td> </tr> <tr> <td>80</td> <td>90</td> <td>85</td> </tr> <tr> <td>5学分</td> <td>4学分</td> <td>2学分</td> </tr> </table> </body> </html>
3-1-1合并列 制作标准网页表格(九宫格)是简易的事,但若是我们的表格并不是那么规矩时该怎么 处理?这个时就可以利用定义表格列数<TD>网页标签的“ COLSPAN”属性。 如果希望将数据栏位修改一下,则我们必须使用合并列的功能,格式:< COLSPAN 并列数 3-1-2合并行 既然 COLSPAN属性是<TD>网页标签专属的属性只能合并左右栏位,那如果要有一个 跨行的数据格该怎么办?要建立一个跨行的数据格则必须使用“ ROWSPAN"属性,利用 上一个合并列的例子修改而成,我们在科目的左方再加上一个“成绩列表”的数据格, 同时这个数据必须直跨三行,我们先来看看原始代码 在原始代码中,我们可以发现跨列的 COLSPAN属性值变成3,为什么就成3?因为我们加 入了一个跨越三行的数据格栏位,因此就变成每一行都有三栏之故。 接着我们在第二行中加入跨越三行的数据格栏位的标签语句< td rowspan=”3”>成绩列 表<td>,其他的都没有变动 注意 虽然我们的“成绩列表”数据格是直跨三行的,但是我们只要在第二行中加入<td rowspan=”3>标签语句就好,其余的行都不用加了,因为< rowspan=”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”＞标签语 句就代表了我们建立的数据格栏是向下跨越三行了，千万不要再画蛇添足，否则将会有 错误的情形产生