HTML（三）表格table与表单form的基本使用

table的基本使用

表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。以前的网页都是使用表格进行排版的，不过现在都不流行了，因为表格排版不利于网页结构。

1、新建表格

table就是表格

tr是表格的行，

td表格的每一个。

thread定义表头

表格示例：

效果：

2、合拼单元格

代码如下；

<thead>

<tr>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

效果如下：

表单

因为在浏览器中输入的内容都必须要经过网络提交到服务器端再处理，所以需要把所有的控件都包含在一个form表单控件中，然后一次提交给服务器，再由服务器处理用户提交的数据。

一、新建注册页面

1、新建表单

首先新建一个web project，然后新建两个页面一个是注册页面register.jsp和接受处理页面doregister.jsp。打开register.jsp，我们先写上一个form标签，定义action属性和method方法。代码如下：

body>

</form>

</body>

2、建立控件

然后在表单里面定义控件，下面模拟一个注册页面，在这个页面上面几乎用到了所有的基本的控件，为了排版更加工整，所有使用table辅助布局。代码如下：

<form action="doregister.jsp" method="post">
       <input type="hidden" />
       <table id="">
           <tr>
               <td>用户名:</td>
               <td>
                   <input type="text" name="username" id="username" />
               </td>
           </tr>
           <tr>
               <td>密码:</td>
               <td>
                   <input type="password" name="pws" />
               </td>
           </tr>
           <tr>
<td>性别：</td>
<td>
                <input type="radio" name="sex"value="1" checked="checked"/> 男
            <input type="radio" name="sex"value="0"/> 女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
                   <input type="checkbox"name="likes" value="1"checked="checked"> 羽毛球
                   <input type="checkbox"name="likes"> 篮球
                   <input type="checkbox"name="likes"> 足球
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select name="jiguang">
<option>广东省</option>
<option>广西省</option>
<option selected="selected">山东省</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td>

<textarea rows="8" cols="50"></textarea>
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file"/>
</td>
</tr>
<tr>
<td colspan="2">

<input type="button" value="普通" />

<input type="reset" value="恢复" />

<input type="submit" value="提交" />
</td>
</tr>
       </table>
   </form>

效果如下：