WEB入门二 表格和表单

学习内容

Ø        表格的作用和制作

Ø        表单的制作

能力目标

Ø        掌握表格的创建

Ø        掌握设置表格的常用属性；

Ø        理解表单的作用

Ø        熟练掌握表单常用元素

本章简介

表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量网站广泛应用，例如新闻列表、商品显示等。

除此之外，网站中经常有很多页面的信息需要填写并提交给服务器，例如论坛注册时需填写注册信息、登陆时需提交登陆用户名和密码等。这种由用户填写并提交给服务器的页面元素称为表单，表单在页面设计中主要用于收集和提交客户端的信息，完成客户端与服务器的交互。

本章将学习如何在页面中创建一个表格以及表格的基本操作，例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后，通过举例讲解表格与表单的综合应用。

核心技能部分

1.1       表格基础

表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。

1.1.1             表格的基本结构

先让我们来看一看表格的最基本的结构。表格是由指定数目的行和列组成，如图2.1.1所示。文字或图片按照相应的列或行进行分类和显示。

图2.1.1 基本表格结构

在HTML中，用于创建表格的基本标签如下:

1.        <table>

<table>…</table>标签用于在HTML中创建表格，它包含表名和表格本身内

容的代码。表格里面包含行，行中包含单元格。

2.        <tr>

<tr>…</tr>标签用于在表格中定义行，要嵌套在<table>标签中使用。多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签表示，并用相应的</tr>标签结束

3.        <td>

表格的每一行又有若干表格单元格，用<td>. . . </td>标签定义。td是“表格数据( TableData )”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。border属性是最常用的属性，该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

4.        用于创建表格的其他标签

(1)     <caption>

<caption>标签用于定义表格的标题。该标签必须紧随<table>标签之后，且每个表格只能定义一个标题。通常将标题置于表格之上的居中位置。

(2)     <th>

<th>标签用于定义表格内的表头单元格，其显示的文字效果通常采用粗体居中。大多数表格都包含一行或一列表头，用于说明某一列或一行数据的属性类别，此时可以使用<th>标签来设置。<th>标签必须嵌套在<tr>标签内。

1.1.2             创建表格

所有的表格都包括3个基本标签，即表格标签<table>…</table>、行标签<tr>...</tr>和单元格标签<td>...</td>。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。

创建表格语法：

创建表格时，一般情况下分3步:

第一步:创建表格标签<table>…</table>。

第二步:在表格标签<table>…</table>里创建行标签<tr>...</tr>，可以有多行。

第三步:在行标签<tr>...</tr>里创建单元格标签<td></td>，可以有多个单元格。

如示例2.1所示为在页面中添加一个2行3列的表格的代码。

示例2.1

示例2.1的运行结果如图2.1.2所示。

图2.1.2 创建表格

1.1.3             表格的属性

1.        用于设置表格的尺寸和边框的属性

如果不指定表格的高度和宽度，浏览器就会根据表格里的内容自动调整高度和宽度。如果不指定表格边框的宽度((border属性)，则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。

语法：

其中，表格的宽度和高度可以用像素来表示，也可以用百分比(与浏览器当前窗口相比的大小比例)来表示。表格边框宽度只能用像素来表示。例如:<table width="200" height=" 100">表示一个宽为200像素，高为100像素的表格。<table width=“50%” height=“25%”>表示一个宽为当前浏览器窗口宽度的50%，高为当前浏览器窗口高度的25%的表格。

示例2.2

示例2.2运行结果如图2.1.3所示。

图2.1.3 表格的尺寸和边框

2.        设置表格背景属性

(1)      整个表格背景

表格背景包括表格的背景颜色和背景图像的设置，表格的背景颜色属性bgcolor是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图像会令表格更加美观、更加活泼生动。

(2)      表格单行背景

不仅可以对表格整体设置背景，还可以对单独一行设置背景色，行的bgcolor颜色可以覆盖<table>的bgcolor或background属性。

(3)      单元格背景

不仅可以对表格中行设置背景色，还可以对表格中每一个单元格设置背景色或背景图片，单元格的bgcolor颜色可以覆盖行的bgcolor属性。

示例2.3

示例2.3的运行结果如图2.1.4所示。

图2.1.4 表格背景

3.        设置对齐方式属性

为了美观大方，表格中的数据一般需要设置对齐方式。

设置表格、行或列的对齐方式，修改align属性为right(右对齐)、center(居中)，left(左对齐)就可以了，默认为“左对齐”。

示例2.4

示例2.4运行结果如图2.1.5所示。

图2.1.5 表格的对齐方式

一般情况下数字是右对齐，性别居中对齐，姓名等内容左对齐。

1.1.4             跨多行和多列的表格

大部分情况下表格都不是整齐划一的，例如：学生信息表，第一行是表格的标题，这就需要标题横跨学生信息表的所有列；还有一种情况是需要跨行的，跨列表格如图2.1.6所示。

图2.1.6 跨列表格

1.        跨行和跨列表格的概念

有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。

2.        跨多列的表格

跨多列指的是在水平方向上跨多个单元格，通过设置colspan这个属性来实现的。

示例2.5

示例2.5运行结果如图2.1.7所示。

图2.1.7 跨列的表格

3.        跨多行的表格

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行，设置rowspan属性实现。

示例2.6

示例2.6运行结果如图2.1.8所示。

图2.1.8 跨多行的表格

1.1.5             表格的嵌套

表格内部可以再使用大部分HTML标签从而实现丰富多次的表格。表格还可以嵌套使用，嵌套的表格经常用于设计页面布局。如下图的表格嵌套。

图2.1.9表格的嵌套

示例2.7

示例2.7运行结果如图2.1.10所示。

图2.1.10表格的嵌套

1.2       表单

用户经常在网上看到一些会员注册页面、用户登陆页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢?不敢说完全是用表单做的，但肯定至少包含有表单。可见表单主要用来收集客户端相关信息，使网页具有交互功能。本节主要讨论如何使用HTML来创建表单，然后向表单中添加表单元素。网页中的表单用途很广，而且还在不断发展。下面我们就列举一些典型的表单应用：

Ø        在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。

Ø        搜集客户订单信息，如果想在线购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。

Ø        收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。

Ø        为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，比较著名的搜索网站：谷歌((http://www.google.com)、百度(http://www.baidu.com)等。

如图2.1.11就是一个典型的表单。

图2.1.11 典型的表单

1.2.1             表单包含的元素

创建表单后，就可以在表单中放置元素以接受用户的输入。这些元素通常放在<form></form>标签对之间一起使用，也可以在表单之外用来创建用户界面。在网上冲浪时，我们经常会见到一些常用的元素，例如：让用户输入姓名的单行文本框，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。不同的表单元素有不同的用途。如果要求用户输入的仅仅是一些文字信息，如“姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框。如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图2.1.10中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些元素。如果要把填写好的表单信息提交给服务器，一般使用【提交】按钮，如图2.1.10中的【提交】按钮。除此之外，还有一些不太常用的表单元素，在这里就不一一列举了。

1.2.2             <form>标签

<form>标签用于创建 HTML文档中的表单。<form>标签除了可以包含表单字段元素之外，还可以包含文本、图像以及其他的HTML元素。

一个表单可以向 Web服务器传递多个信息，但每个信息都需要有唯一的名称标识。因此，表单中的每一个表单元素都应有一个 name属性，用于指定表单元素的名称。这样 Web 服务器可以根据表单元素的名称来获取客户端传递给服务器的信息，未设置name属性的表单元素将不会被提交。如下图淘宝网的登录表单。

图2.1.12 淘宝网的登录表单

表2-1-1 <form>标签的属性

1.2.3             表单元素的统一属性

网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。下面给出了表单元素的统一格式：

<input>元素定义要在表单中显示的控件类型和外观。此元素包括的属性见表2-1-2

表2-1-2<input>元素的属性

1.2.4             表单元素逐一介绍

1.        单行文本框

在表单中最常用最常见的表单输入元素就是文本框(text)，它提供给用户输入单行文本信息，例如用户名的输入框。若要在文档的表单里创建一个文本框，将<input>元素的type属性设为text就可以了。

2.        密码框

用于在表单中添加密码输入区域，浏览器将密码框中的每个字符都显示为星号 (*)使输入的容不可见。若要在文档的表单里创建一个密码框，将<input>元素的type属性设为password就可以了。

示例2.8

示例2.8在浏览器中的运行结果如图2.1.13所示。

图2.1.13 单行文本框和密码框

3.        多行文本框

当我们要在网页中输入两行或两行以上的文本时，怎么办?显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<textarea>

语法：

示例2.9

示例2.9在浏览器中运行结果如图2.1.14所示。

图2.1.14 多行文本框

4.        单选按钮

将<input>元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮必须具有相同的名称，用户一次只能选择一个选项。单选按钮需要一个显式的value属性。

示例2.10

示例2.10在浏览器中的运行结果如图2.1.15所示。

图2.1.15 单选按钮

5.        复选框

将<input>元素的type属性设为checkbox就可以创建一个复选框。复选框用于站点访问者从一个列表项目中选择一项或多项内容，例如提交个人爱好信息。如果某信息有多个复选框，可以将它们命名为相同的名称，这样便于客户端脚本编程时访问。当然，也可以用不同的名称命名。属性checked可用于设置复选框的选中状态，只有当复选框为选中状态时，浏览器才会将选中的复选框的值和 name属性一起提交给服务器，否则不会提交任何复选框的内容。

示例2.11

示例2.11在浏览器中的运行结果如图2.1.16所示。

图2.1.16 多选框

6.        下拉列表框

下拉列表框用于帮助用户快速、准确地选择一些选项，通过<select>和<option>标签元素来实现。<select>标签创建可供选择的下拉列表，<option>标签创建列表中的选项，使用 selected属性可以设置下拉列表的默认选项。

示例2.12

示例2.12在浏览器中运行结果如图2.1.17所示。

图2.1.17 下拉列表框

7.        按钮

在表单中按钮可以分为4类，分别为普通按钮、提交按钮、重置按钮和图形按钮。普通按钮由用户通过客户端脚本语言自定义动作；提交按钮用于将当前所在表单中的信息提交给指定服务器程序；重置按钮将当前所在表单中的元素值设置为创建表单时的初始值；图形按钮的功能类似于提交按钮，可用于替代提交按钮，提高视觉的友好性和可视性。

示例2.13

示例2.13在浏览器中运行结果如图2.1.18所示。

图2.1.18 按钮

8.        文件域

文件域的作用是便于Web浏览器通过form表单向 Web 服务器上传文件。使用文件域时，浏览器将自动生成一个单行文本框和一个“浏览”按钮，供用户选择上传到服务器的文件。

应用以上所有表单元素的完整示例见示例2.19。

示例2.14

示例2.14运行结果如图2.1.19所示。

2.1.19表单

通常情况下，为了保证表单的格式整齐、清晰，在创建表单时，可以使用表格搭建页面的框架。同时页面使用多种元素和设置，比如图片、背景等让页面丰富多彩、图文并茂并有和服务器交互能力，实现动态网站。 

本章总结

Ø        HTML表格的基本结构

n        <table>标签

n        <tr>标签

n        <td>标签

n        <th>标签

n        <caption>标签

Ø        HTML表单

n        action属性：指示服务器上处理表单输出的程序

n        method属性：指定向服务器发送数据的方法(用post方法还是用get方法)

Ø        HTML表单常用元素

n        单行文本框：<input type="text" />

n        密码框：<input type="password"/>

n        多行文本框：<textarea name="intro" cols="20"rows="5"></textarea>

n        单选按钮：<input type="radio" name="sex"/>

n        复选框：<input type="checkbox" name="hobby"/>

n        下拉列表框：<select name="address"></select>

n        按钮： 

u      <inputtype="reset" value="重置"/>

u      <inputtype="button" value="按钮"/>

u      <inputtype="image" src="login.gif"/>

n        文件域：<input type="file" name="pic"/>

任务实训部分

实训任务1：实现一个跨行和跨列的表格

训练技能点

Ø        使用<table>标签创建表格

Ø        使用colspan跨多列

Ø        使用rowspan跨多行

需求说明

实现一个跨行跨列的表格，显示商品分类信息，效果如图2.2.1所示：

图2.2.1 跨行跨列的表格

实现思路

Ø        使用<table>创建表格

Ø        设置表格的宽度和边框

Ø        使用colspan跨多列，使用rowspan跨多行

核心代码如下。

实训任务2：使用表格实现一个课程表

训练技能点

Ø        创建表格的基本结构

Ø        表格的跨行和跨列

Ø        bordercolor属性的用法

Ø        使用bgcolor设置背景颜色

需求说明

使用表格知识实现一个小学课程表，效果如图2.2.2 所示。

图2.2.2 课程表

实现思路

Ø        使用EditPlus创建表格的基本结构

Ø        使用width设置表格的宽度，border属性设置边框的粗细，bordercorder设置边框的颜色

Ø        使用bgcolor设置单元格的背景颜色

核心代码如下。

实训任务3：实现在线商品展示页面

训练技能点

Ø        表格的基本结构

Ø        使用<img>标签插入图片

Ø        <checkbox>多选框

需求说明

使用表格和<img>标签实现在线商品展示页面，效果如图2.2.3所示

图2.2.3 在线商品展示

实现思路

Ø        使用EditPlus创建表格的基本结构

Ø        合并第1行的4个单元格，然后使用<img>插入图片

Ø        第二行显示表头信息

Ø        从第二行起，在第1个单元格中添加多选框

实现步骤

(1)     使用EditPlus创建表格基本结构

(2)     合并第1行的4个单元格，然后使用<img>插入图片

(3)     从第二行起，在第1个单元格中添加多选框

实训任务4：实现购物网站用户注册页面

训练技能点

Ø        表格的使用

Ø        常用form表单元素的用法

需求说明

实现购物网站用户注册页面，效果如图2.2.4所示：

Ø        使用表格进行布局

Ø        包含常见的表单元素

巩固练习

一、选择题

1.        以下选项中，哪个全部都是表格标签？ (     )

A.       <table><head><tfoot>

B.       <table><tr><td>

C.       <table><tr><tt>

D.       <thead><body><tr>

2.        请选择可以使单元格中的内容进行左对齐的正确 HTML 标签？ (       )

A.       <tdalign="left">

B.       <tdvalign="left">

C.       <td leftalign>

D.       <tdleft>

3.        在下列的 HTML 中，哪个可以产生复选框？(         )

A.       <inputtype="check">

B.       <checkbox>

C.       <inputtype="checkbox">

D.       <check>

4.        在下列的 HTML 中，哪个可以产生单行文本框？(         )

A.       <inputtype="textfield">

B.       <textinputtype="text">

C.       <inputtype="text">

D.       <textfield>

5.        在下列的 HTML 中，哪个可以产生下拉列表？(     )

A.       <list>

B.       <inputtype="list">

C.       <inputtype="dropdown">

D.       <select>

二、上机练习

1.        请用HTML实现如图2.3.1所示的申请表表单。相关要求如下：

Ø        教育程度:默认选中为本科。

Ø        国籍:有中国、美国、澳大利亚、日本、新加坡，默认选中为中国。