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

3.1  表格概述

（1）表格的结构：

    表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或格等元素。表格中的内容按照相应的行或列进行分类和显示

（2）表格的基本语法

3.2  表格属性设置

（1）表格边框属性

(1)border属性。用于设置边框的粗细，单位是像素(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进英文名称。
(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。

（2）表格的宽度和高度属性

表格的宽度和高度属性
通过设置 width属性和height，属性可以设置表格的宽度和高度语法:
<table width = " height = " " >·.·</table>

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

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

（3）表格背景颜色与图像属性

表格背景颜色与背景图像属性
设置表格的 bgcolor 属性可以改变表格的背景颜色，设置表格的backgound属性可格增添背景图像效果，使表格更加美观。语法:
<table bgcolor =" " background= " " >·..</table>

（1）bgcolor可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色

（2）background设置背景图像，图像的路径可以是绝对路径或相对路径

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

（4）表格边框样式属性

表格内部边框基本属性：<table frame = " " rules = " ">…内容…</table>

（5）表格单元格间距，单元格边距属性

设置表格标记中的celspacing属性可以改变表格单元格之间的间隔，使网页中的表格容稍微松散一些。设置表格标记中的celpadding属性可以增加表格单元格的内容与内部框之间的距离。
语法:
<table cellspacing=" " cellpadding = " "
</table>
，值的单位为像素或百分比，默认值为2px。(1)cellspacing.
(2)cellpadding。值的单位为像素或百分比。

（6）表格水平对齐属性

对齐的基本语法：

<table align="left | center | right >...</table>

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

过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐齐和居右对齐。通过t标记的valign属性可以设置行内容的垂直对齐方式。垂直对顶部对齐、居中对齐和底部对齐。法”
ble align= " center" >
<tr align=" left | center | right" valign=" top | middle l bottom" ><td>…</td>
</tr>

<table>

（8）设置单元格的属性

（9）表格单元格的跨行，跨列属性

1.单元格跨行：使用td标记的 rospan 属性可以设置单元格跨行合并语法:
<td rowspan="行数">·…</td>
说明:rowspan属性可以设置单元格跨行。通过rowspan="n"(n是正整数），可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个 td 标记。

2.跨列：使用单元格 td标记的colspan 属性可以设置单元格跨列合并。语法:
<td colspan="列数">·</td>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数），可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个 td 标记。

3.3  表格嵌套

图3-8 设置单元格跨行、跨列属性
3.3 表格嵌套
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
语法:
<table>
<tr>
</tr>
<tr>
<td>
<!--单元格内嵌表格-->
<table>
<t>
</tr>
</table>

</td>
</tr>
<t>
</tr>
</table>

3.4  表单

（1）表单标记

基本语法:
<form method= " post" action = " " )
<input type = " text" name=" "/>
<textarea name = " "rows=" " cols=" ")>··</textarea><select name = " " >
<option value =" " selected></option>
<option value = " " ></option>
</select>
</form>

（2）定义域和域标题

利用feldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，feldset 标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 heldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果或者可创建一个子表单来处理这些元素。legend 标记为eldset 标记定义域标题。语法:
<form>
<feldset>
<legend alig="left|center|right">域标题内容</legend></fieldset>
</form>
说明:fieldset标记没有属性，是成对标记。legend标记必须位于feldset标记内，也是成对标记:有一个对齐align属性，属性值分别为left，center和right。

（3）表单信息输入

1.单行文本输入框：
设置imput 标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。语法:
<input name= " " type= " text" maxlength=" " size=" " value= " " readonly/>说明:单行文本输人框的主要属性有name，maxlength，size，value和readonly

2.密码输入框：设置input标记的type 属性值为password，可以实现向表单中插人一个密码输人框。密码输人框中可以输人任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
语法:僥釕
<input name= " " type=" password" maxlength = " " size = " " />
说明:密码输人框的主要属性有name，maxlent和size，取值及说明与单行文本输人框相同。

3.复选框：置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name=" " type = " checkbox" value ="" checked/>
说明:复选框的主要属性有name，value和checked，其中checked属性用于设置初始预选项。复选框的属性、

4.单选按钮

设置input 标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name =" " type = " radio" value=" " checked/>说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

5.图像按钮

设置input标记的 type属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过src 属性加载图像。
语法:
<input name = " " type= " image" src =" " width=" " height=” "/>
说明:图像按钮主要属性有name，src，width和height。

6.提交按钮

设置 input 标记的 type 属性值为 submit,可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value=" 提交"/>
说明:提交按钮的属性主要有name和value

7.重置按钮

设置input 标记的type 属性值为reset，可以实现向表单中插人一个重置按钮，重置按用于将表单中所有的输入信息清空，然后让用户可以重新填写。语法:
<input name = " " type = " reset" value = " " />
说明:重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同

8.普通按钮

置input 标记的type 属性值为 button，可以实现向表单中插人一个普通按钮。普通钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name = " " type = " button" value = " "οnclick=" "/>说明:普通按钮的属性有name，value和onclick，

9.文件选择框

设置input 标记的type属性值为fle，可以实现向表单中插人一个文件选择框语法:
<input name=" " type=" file" value= " "/>
说明:
name，定义imnput标记的名称。页面上会自动添加一个文本输人框和一个“浏览… ,按钮。单击“浏览…”按钮可以从“选择要加载的文件”对话框选择某一个文件，然后自动将文件名称回填到文本输入框中。

10.隐藏框

置 imnput 标记的type 属性值为 hidden,可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
语法:
<input name =" " type = " hidden" value = " "/>
说明:隐藏框的属性有name和value

（4）多行文本输入框

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

（5）下拉列表框

拉列表可以在表单中接收用户的输人。下拉列表通常需婴同时使用mdla和icm标记来在表单中插入下拉菜单和列表项。
语法:
<select name= " " size= " " multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息 2</option>
</select>
说明:select标记是成对标记，，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有 name,size 和 multiple 等属性。option 标记有 value 和 selected 等属性。select标记与 option标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。