三．HTML表格

一．HTML表格

HTML表格是web开发的功能最强大的特性之一，它简化了复杂数据的表示方法。

表格由行和列的网格组成，这些个体单元格可以容纳文本或图像。

二．创建表格

    表格位于两个HTML标记之间—<TABLE>标记代表表格开始</TABLE>标记代表表格结束，表格中可以指定任意数量的行和列。

标记	用途
<TABLE>	创建一个表格
<TR>	在表格中创建一行
<TD>	在行里创建一个列
<TH>	在行里创建文字居中加粗列

<table>的属性：

1．            Border:指定边框(0为无边框)。

2．            Align:指定对齐方式。

3．            Bordercolor:指定边框颜色。

4．            Width:指定边框的高（长度）。

<th><td>的属性：

1．            跨行：在<th>或者<td>中指定 rowspan=n .

2．            跨列：在<th>或者<td>中指定 colspan=n .

例：

    <table border="1" align="center">

     <tr>

      <th>科目</th><th>价格</th>

     </tr>

     <tr>

      <td>C++</td><td>8000</td>

     </tr><tr>

      <th>JAVA</th><th>7900</th>

     </tr><tr>

      <th>C#</th><th>6500</th>

     </tr>

  <tr>

<th colspan="2" align="center">全科</th>

</tr>

    </table>

四．HTML表单

一．表单的定义和用途

表单是网站用来获得访问者输入的工具。用来得到访问者的反馈。表单可以定义为HTML

页的一个区域，包含了用户输入信息，信息可以送到任何服务器端的程序进行进一步的

处理。

表单有一些是用来收集信息的控件。当访问者提交一个表单时，表单控件的信息就转到一个

程序，然后这个程序执行必要的操作。

二．创建表单

    1. 在表单要出现的位置添加<FORM></FORM>标记。

       <form>的属性：

1)     action="要提交的页面".

2)     method="提交方式".

a.       get提交：表单提交的时候在地址栏上能看见提交数据。

优点：提交速度快。

缺点：安全性低。有字数限制。

b.      post提交：提交时地址栏上看不见提交数据。

优点：安全性好，理论上提交数据大小没有限制。

缺点：提交速度相对于get速度慢。

2. 通过添加<input>标记，创建提交控件。

  <input>的属性：

1)  type: 指定控件的类型。

a) text: 文本框。

b) radio: 单选按钮。

c) checkbox: 复选框。

d) file: 文件框。

e) hidden: 隐藏域。

f) password: 密码框。

g) reset: 重置。

h) button: 按钮。

i) submit: 提交按钮。

j) image: 图像。

2)  name: 指定控件名称。

3)  value: 指定值。

三. 大文本域<textarea>

  <textarea>的属性：

    Rows: 指定大文本域的行数。

    Cols: 指定大文本域的列数。

    Name: 给大文本域起名。

    Readonly: 指定文本域的内容是只读的。

四．下拉列表<select>

      <select>的属性

Name: 为输入字段指定一个标签。

        Size: 为选择字段指定可见大小(默认值为1).

       Multiple：可以多选。

<Option>指定在包含选择字段中的选项。

  Selected: 设置此项为列表的默认值。

   Value: 分配与name属性相关联的内容。

例：

   <form action="login.jsp" method="post">

    <select name="shiyan">

    <option  value="BJ" >北京</option>

    <option  value="hrb" >哈尔滨</option>

    <option  value="SH" selected="SH">上海</option>

    <option  value="SY" >沈阳</option>

    </select>

    <input type="submit"value="提 交">

    </form>