第3章 表格布局与表单交互

3.1 表格概述

表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。

3.1.2 表格的基本语法

表格的基本语法 在HTML中，常用表格主要通过5个标记来构成:

、和< td>。

(1) table标记是成对标记，

、

、

表示表格开始，表示表格结束。

(2) caption标记是成对标记，表示标题开始，表示标题结束。使用 内容是 caption 标记可以给表格添加标题，该标题应位于table标记与t标记之间的位置。 线或表 (3) tr (Table Row)标记是成对标记，表示行开始，表示行结束。

(4) th (Table Heading表头)标记是成对标记，表示表头开始，表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明:表头文字内容一般居中、加粗显示。

(5) td(Table Data)标记是成对标记，定义单元格或列。以开始，以结束,表头可以用th标记定义，也可以用td标记定义，但两标记之间的内容不自动居中、不加粗。

3.2 表格属性的设置

3.2.1 表格边框属性

设置表格标记中的边框属性可以改变表格的外观。表格边框属性中的属性同样适用于单元格。

语法:

.…

(1) border属性。用于设置边框的粗细，单位是像素。

(2) bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。

(3) bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。

(4) bordercolordark属性。用于设置表格暗边框，对表格右下边框生效

<table border="3px"> 
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>

3.2.2 表格的宽度和高度属性

通过设置width 属性和height，属性可以设置表格的宽度和高度。

语法: <table width=" height="">...

(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。

(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。

<table width="200px" hight="150px">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>

        <table widt="20%" height="20%">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>
        

3.2.3 表格背景颜色与背景图像属性

设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。

语法:

…

(1) bgcolor。可以用rgb函数、十六制、英文颜色名称来设置背景颜色。

(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。

(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

<table  bgcolor="#0000ff">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>
        <table background="img/schoolp.jpg"  width="200px" hight="150px">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>

3.2.4 表格边框样式属性

设置表格标记中的fame属性可以改变表格边框的样式;设置表格标记中的rules 属性可以改变表格内部边框的样式。

语法:

……内容……

<table frame="hsides" rules="all">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>
        

3.2.5 表格单元格间距、单元格边距属性

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。

语法: <table cellspacing="" cellpadding=""

(1) cellspacing。值的单位为像素或百分比，默认值为2px。

(2) cellpadding。值的单位为像素或百分比。

        <table cellspacing="10px"border="2px">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>
        <table cellpadding="10px"border="2px">
            <caption>23软件2班名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。

语法:

…

3.2.7 设置表格的（tr）标记行的属性

通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。

语法:

    <tr align=" left | center | right" valign=" top | middle | bottom">

            <td>...</td>

    </tr>

    ......

3.2.8 设置单元格的属性

表格的列(td)标记的属性可以设置表格单元格的显示风格。td标记常用的属性如表3-6所示。

<table border="2px"width="200px"hight="150px">
            <caption>23软件2班名单</caption>
            <tr align="left">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr align="center">
                <td>1</td>
                <td>张三</td>
                <td>女</td>
            </tr>
            <tr align="right">
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>
        <table border="2px"width="200px"hight="150px">
            <caption>23软件2班名单</caption>
            <tr align="left" valign="top">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr align="center" valign="middle">
                <td>1</td>
                <td align="right" valign="bottom">张三</td>
                <td>女</td>
            </tr>
            <tr align="right" valign="bottom">
                <td>2</td>
                <td>李四</td>
                <td>男</td>
            </tr>
        </table>

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

使用单元格td 标记的rowspan属性可以设置单元格跨行合并。

语法: ...

说明:rowspan属性可以设置单元格跨行。通过rowspan=" n"(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个 td 标记。

3.2.9.2 单元格跨列

使用单元格td 标记的colspan属性可以设置单元格跨列合并。

语法: .….

说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td 标记。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置单元格跨行、跨列属性</title>
    </head>
    <body>
        <h3 align="center">设置单元格跨行、跨列属性</h3>
        <table border="1" width="500px" align="center" bordercolor="#3366ff">
        <caption>专业研讨会日程安排</caption>
        <tr align="center">
            <td colspan="2">上午</td>
            <td colspan="2">下午</td>
        </tr>
        <tr>
            <td>8:00——10:00</td>
            <td>10:10——12:00</td>
            <td>14:00——16:00</td>
            <td>16:10——18:00</td>
        </tr>
        <tr align="center">
            <td rowspan="2">学校领导讲话</td>
            <td>大会主题报告</td>
            <td>行业企业专题报告</td>
            <td rowspan="2">总结报告</td>
        </tr>
        <tr align="center">
            <td>专家报告</td>
            <td>分组讨论</td>
        </tr>
            <tr align="center">
            <td colspan="4">全天参观人工智能实训中心</td>
        </tr>
        </table>
    </body>
</html>

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

语法:

    <tr>

            ......

    </tr>

    <tr>

            <td> <!--单元格内嵌表格-->

            <table>

    <tr>

            ....

    </tr>

            </table>

    </td>

    </tr>

    <tr>

            ......

    </tr>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>嵌套表格布局页面</title>
        <style>
            body{font-size:36px ;}
        </style>
    </head>
    <body>
        <h4 align="center">嵌套表格布局页面</h4>
        <table width="660px" border="1" align="center" bordercolor="#3333ff">
            <tr>
                <td height="100">
                    <table width="100%" border="1" bordercolor="red">
                        <tr hight="50" align="center">
                            <td rowspan="2" width="100">logo</td>
                            <td>广告条</td>
                        </tr>
                        <tr height="50" align="center">
                            <td>导航</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td hight="300">
                    <table width="100%" border="1" bordercolor="33ff99">
                        <tr align="center">
                            <td height="300" width="30%">左栏目</td>
                            <td height="300" width="70%">正文内容</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr align="center">
                <td height="100">版权信息</td>
            </tr>
        </table>
    </body>
</html>

3.4 表单

3.4.1 表单标记

表单form标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

语法:

<form method=" post" action="">

    <input type="text" name=""/>

            <textarea name=" " rows="" cols="">……</textarea>

            <select name="">

            <option value=" " selected></option>

            <option value=" "></option>

    </select>

</form>

说明:<form>和</form>之间可包含各种表单信息输入标记。表单标记的属性主要有 name,action，method 和enctype等，其属性、取值及说明如表3-7所示。

3.4.2 定义域和域标题

利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分 组，fieldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果,或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。

语法:

<form>

    <fieldset>

            <legend alig=" left I center l right" >城标题内容</legend>

    </feldset>

</form>

说明:fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记:有一个对齐align属性，属性值分别为left,center和 right。

3.4.3 表单信息输入

表单的主要功能是为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记，可以输入一行信息。input标记是单个标记。

语法: <input name="" type=""/>

说明:input标记的属性主要有name和type等，输入类型是由类型type属性定义的， type属性有很多不同的值，设置属性值不同，就会产生不同界面效果。input标记的属性、取值及说明如表3-8所示。

3.4.3.1 单行文本输入框

设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。

语法: <input name=" " type=" password" maxlength =" " size=""/>

说明:密码输入框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框相同。

3.4.3.2 密码输入框

设置 input 标记的type属性值为password，可以实现向表单中插入一个密码输入框。密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“。”所取代，这样设计可以保障用户输入的密码不被泄露。

语法: <input name=" " type=" password" maxlength ="" size=""/> 说明:密码输入框的主要属性有name，maxlenth 和size，取值及说明与单行文本输入框相同。

3.4.3.3 复选框

设置input 标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。

语法: <input name=" " type=" checkbox" value="" checked/>

说明:复选框的主要属性有name，value和 checked，其中checked属性用于设置初始预选项。复选框的属性、取值及说明如表3-10所示。

3.4.3.4 单选按钮

设置input 标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。

语法: <input name="" type=" radio" value="" checked/>

说明:单选按钮的属性有name,vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

3.4.3.5 图像按钮

利用图像按钮在网页中插入一张图像，通过src属性加载图像。

语法: <input name=" " type="image" src=" " width=" " height=" "/>

说明 :图像按钮主要属性有name、 src 、width和height。

<form>
            用户名：<input type="text" name="user"/>
        </form>
        <form>
            用户名：<input type="text" name="user"/>
            密码：<input type="password" name="password"/>
        </form>
        <form>
            姓名：<input type="text" name="name"/>
            爱好：<input type="checkbox" name="n1" value="sing" checked/>唱歌
                <input type="checkbox" name="n2" value="dance"/>跳舞
                <input type="checkbox" name="n3" value="basketball"/>篮球
                <input type="checkbox" name="n4" value="run"/>长跑
        </form>
        <form>
            姓名：<input type="text" name="name"/>
            性别：<input type="radio" name="sex" value="male"checked/>男性
                <input type="radio" name="sex" value="female"/>女性
                <br/>
            爱好：<input type="checkbox" name="n1" value="sing" checked/>唱歌
                <input type="checkbox" name="n2" value="dance"/>跳舞
                <input type="checkbox" name="n3" value="basketball"/>篮球
                <input type="checkbox" name="n4" value="run"/>长跑
        </form>
        <!---图像按钮--->
        <form>
            <input type="image" src="img/yx.jpg"/>
        </form>

3.4.3.6 提交按钮

设置input 标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。

语法: <input name=" " type=" submit" value="提交"/>

说明:提交按钮的属性主要有name和value，其属性、取值及说明如表3-12所示。

在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“提交查询按钮”。所以一定要给value属性赋值。

3.4.3.7 重置按钮

设置input 标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。

语法: <input name=" "type=" reset" value=""/>

说明:重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。

3.4.3.8 普通按钮

设置input 标记的type属性值为button，可以实现向表单中插入一个普通按钮。普通按 注册新用 钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。

语法: </htm <input name=" " type=" button" value="" οnclick=""/> 说明:普通按钮的属性有name，value和onclick，其属性、取值及说明如表3-13所示。

<form>
            用户名：<input type="text" name="user"/>
            密码：<input type="password" name="password"/>
            <br/>
            <input type="submit" value="登录"/>
        </form>
        <form>
            用户名：<input type="text" name="user"/>
            密码：<input type="password" name="password"/>
            <br/>
            <input type="submit" value="登录"/>
            <input type="reset"/>
        </form>
        <form>
            用户名：<input type="text" name="user"/>
            密码：<input type="password" name="password"/>
            <br/>
            <input type="submit" value="登录"/>
            <input type="reset"/>
            <input type="button" value="注册"
                onclick="javascript:alert('注册新用户')"/>
        </form>

3.4.3.9 文件选择框

设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。

语法: <input name=""type="file" value=""/>

说明: name，定义input标记的名称。页面上会自动添加一个文本输入框和一个“浏览……按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。

3.4.3.10 隐藏框

设置input 标记的type 属性值为hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。

语法: </h <input name=" " type=" hidden" value=""/>

说明：隐藏框的属性有name和value，其属性、取值及说明如下：

3.4.4 多行文本输入框

textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。

语法: <textarea name=" " rows=" " cols=" " wrap=" "/>初始信息内容</textarea>

说明:多行文本输入框textarea标记是成对标记，其主要属性有name，rows,cols 和 wrap等，其属性、取值及说明如表3-15所示。默认情况下，当用户在文本区域中输入文本后，浏览器会将它们按照输入时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。

<form>
            姓名：<input type="text" name="name"/>
            性别：<input type="radio" name="sex" value="male"checked/>男性
                <input type="radio" name="sex" value="female"/>女性
                <br/>
            爱好：<input type="checkbox" name="n1" value="sing" checked/>唱歌
                <input type="checkbox" name="n2" value="dance"/>跳舞
                <input type="checkbox" name="n3" value="basketball"/>篮球
                <input type="checkbox" name="n4" value="run"/>长跑
                <br/>
                请选择佐证材料：<input type="file"/>
        </form>
        <!---隐藏框--->
        <form>
            <input type="hidden" name="abc" value="123"/>
        </form>
        <form>
            请输入您的宝贵意见：
            <textarea rows="4" cols="30"></textarea>
        </form>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select 和option标记来在表单中插入下拉菜单和列表项。

语法:

<select name=" " size="" multiple>

     <option value="" selected>文字信息1</ option>

    <option value="">文字信息2</option>

     .....

</select>

说明:select标记是成对标记，option标记是单个标记，但应该把它补成成对标记、结构更为清晰。select标记有name，size 和muliple等属性。option标记有valueselected等属性。select标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常在option标记后面。它们的属性、取值及说明如表3-16所示。

<form>
            请选择课程：
            <select multiple>
                <option name="s">网页</option>
                <option name="s">Java</option>
                <option name="s">安卓</option>
                <option name="s">PS</option>
                <option name="s">网络</option>
            </select>
            <br/>
            请输入您的宝贵意见：
            <textarea rows="4" cols="30"></textarea>
        </form>
        <form>
            <fieldset>
                <legend align="center">个人信息</legend>
                姓名：<input type="text" name="name"/>
                性别：<input type="radio" name="sex" value="male"checked/>男性
                    <input type="radio" name="sex" value="female"/>女性
                    <br/>
                爱好：<input type="checkbox" name="n1" value="sing" checked/>唱歌
                    <input type="checkbox" name="n2" value="dance"/>跳舞
                    <input type="checkbox" name="n3" value="basketball"/>篮球
                    <input type="checkbox" name="n4" value="run"/>长跑
                    <br/>
                    请选择佐证材料：<input type="file"/>
            </fieldset>
            <fieldset>
                <legend align="center">教学评价</legend>
                请选择课程：
                <select multiple>
                    <option name="s">网页</option>
                    <option name="s">Java</option>
                    <option name="s">安卓</option>
                    <option name="s">PS</option>
                    <option name="s">网络</option>
                </select>
                <br/>
                请输入您的宝贵意见：
                <textarea rows="4" cols="30"></textarea>
            </fieldset>
        </form>

3.5 综合案例——表格与表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>达维工作室——联系我们</title>
        <style type="text/css">
            .chu{
                font-weight: bold;
            }
            .zi1{
                font-family: "微软雅黑";
                font-size: 20px;
                font-weight: bold;
                color: #ED630A;
            }
            .zi2{
                font-family: "微软雅黑";
                font-weight: bold;
                color: #F60;
                text-decoration: underline;
            }
            .zibai{
                font-family: "微软雅黑";
                color: #FFF;
            }
            body{
                background-image: url(img/hua.jpg);
            }
        </style>
    </head>
    <body>
        <table width="1190" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
                        <tr>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
                                <img src="img/logo.jpg" width="100" height="63"/></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍></td>
                                <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="20" cellpadding="0">
                        <tr>
                            <td height="318">&nbsp;</td>
                            <td width="270" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                                    </tr>
                                    <tr>
                                        <td height="196" bgcolor="#FFAF03">
                                            <p class="zibai">地址：广东省
                    <p class="zibai">地址：广东省江门市XXXXXXXXX<br/>
                                                    电话：0750——XXXXXX<br/>
                                                    传真：0750——XXXXXX<br/>
                                                    QQ:12345678<br/>
                                                    电子邮箱：<br/>
                                                    [email protected]<br/>
                                                    工作室网站：<br/>
                                                    www.XXXX.com</p >
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="280" valign="top">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                            <tr>
                                                <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                                            </tr>
                                            <tr>
                                                <td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
                                                专门提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
                                                达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程......</p >
                                                <p class="zibai">&nbsp;</p >
                                                <p class="zibai chu">更多&gt;</p >
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="280">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                            <tr>
                                                <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</td>
                                            </tr>
                                            <tr>
                                                <td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队：</p >
                                                <p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最合适的设计方案。</p >
                                                <p class="zi2">我们的承诺：</p >
                                                <p class="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司特点，设计出属于客户......</p >
                                                <p class="zibai">&nbsp;</p >
                                                <p class="zibai chu">更多&gt;&gt;</p >
                                                </td>
                                            </tr>
                                        </table>
                                    </td>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset=" UTF-8">
                <title>用户注册信息</title>
                <style type="text/css">
                fieldset{
                    width:700px;
                }
                </style>
                </head>
                <body>
                    <form action="" method ="post" encdype=" mulipart/om- data" name=" forml" id="from1">
                    <fieldset>
                    <legend>用户注册信息</legend>
                    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="200" align="right">用户名：</td>
                    <td><input type="text" name="texfield" id="textfield" /></td>
                </tr>
                <tr>
                    <td width="200" align="right">密码：</td>
                    <td><input type="password" mame="textfield2" id="textfield2"/></td>
                </tr>
                <tr>
                    <td width="200" align="right">确认密码：</td>
                    <td><input type="password" name= "textield3" id="textfield3"/></td>
                <tr>
                <tr>
                    <td widh="200" align="right">性别：</td>
                    <td><input name="radio" type="radio" id="radio" value="radio" checked= "checked"/>男
                    <img src="img/Male.gif" width="22" heigh="21" dlign="absmidde" />
                    <input type="radio" name="radio" id="radio2" value="radi2" />女
                    <img src="img/Female.gif" width="23" heighr="21" align="abiniddle" /></td>
                </tr>
                <tr>
                        <td width="200" align="right">出生年月：</td>
                    <td><input name="textfield4" ype="text" id="toxtfield4" sive="12" />年
                    <select name="select" id=" select">
                    <option>l</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>S</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                        月</td>
                </td>
                <tr>
                    <td width="200" align="right">业余爱好：</td>
                    <td><input type="checkbox" name= "checkbox" id="checkbox1">看书
                    <input type="checkbox" name= "checkbox2" id="checkbox2"/>上网
                    <input type= "checkbox" name="checkbox3" id="checkbox3" />打球
                </td>
                </tr>
                <tr>
                    <td width="200" align="right">相片：</td>
                    <td height="25"><input type="file" name= "fileField" id=" ilefField" /></td>
                </td>
                <tr>
                <td width="200" align="right">意见或建议：</td>
            <td>
                <textarea name="textarea" id= "textarea" cols="45" rows="5"></textarea>
            </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                <input type="submit" name= "button" id="button" value="提交"/>
                <input type="reset" name="button2" id="button2" value="重置"/>
            </td>
            </tr>
            </table>
            </fieldset>
        </form>
    </body>
</html>