三、表格和表单

HTML、CSS基础课程系列 HTML

表格和表单

表格

表格,是由行和列组成的一组结构化数据(tabular data),表格允许您快速地查找不同类型数据之间联系的值。

创建第一张表格

表格的所有内容在放在<table></table>标签之间,<table>标签下面分为很多行<tr>,每一行里面又分为很多单元格<td>,没错,单元格就是表格里面最小的容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<!-- 第一行 -->
<tr>
<td>我是第一行第一列</td>
<td>我是第一行第二列</td>
<td>我是第一行第三列</td>
</tr>
<!-- 第二行 -->
<tr>
<td>我是第二行第一列</td>
<td>我是第二行第二列</td>
<td>我是第二行第三列</td>
</tr>
<!-- 第三行 -->
<tr>
<td>我是第三行第一列</td>
<td>我是第三行第二列</td>
<td>我是第三行第三列</td>
</tr>
</table>

上面这份表格在浏览器中打开,并不是您想象中的样子,它是这样的:

表格的美化工作通常都和css分不开,这里我们还没学习到css,那么我们就使用表格自带的一些属性来稍微渲染下它把:

  • border属性,表格的边框。
  • width属性,表格的宽度。
  • height属性,表格的高度。

上面几个属性的值的单位,都是像素(px),后面css的课程中大家会学习到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1" width="600" height="200">
<!-- 第一行 -->
<tr>
<td>我是第一行第一列</td>
<td>我是第一行第二列</td>
<td>我是第一行第三列</td>
</tr>
<!-- 第二行 -->
<tr>
<td>我是第二行第一列</td>
<td>我是第二行第二列</td>
<td>我是第二行第三列</td>
</tr>
<!-- 第三行 -->
<tr>
<td>我是第三行第一列</td>
<td>我是第三行第二列</td>
<td>我是第三行第三列</td>
</tr>
</table>

那么,打开浏览器自己试试吧!

表格中文本的位置

通常我们会调整表格中文本的位置,这里有两个常用的位置属性:

  • algin属性:文本水平方向位置,它的值有leftcenterright,默认值是left
  • valgin属性:文本垂直方向的位置,它的值有top,middle,bottom,默认值是middle

当然,这两个属性可以放在行<tr>上,也可以放在单元格<td>上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1" width="600" height="200">
<!-- 第一行 -->
<tr align="center"> <!-- 表示第一行所有的文本 水平位置居中 -->
<td>我是第一行第一列</td>
<td>我是第一行第二列</td>
<td>我是第一行第三列</td>
</tr>
<!-- 第二行 -->
<tr>
<td valign="top">我是第二行第一列</td> <!-- 居于顶部 只作用于这个单元格 -->
<td>我是第二行第二列</td>
<td>我是第二行第三列</td>
</tr>
<!-- 第三行 -->
<tr>
<td>我是第三行第一列</td>
<td>我是第三行第二列</td>
<td>我是第三行第三列</td>
</tr>
</table>

允许单元格跨多个行和列

不是所有的表格都是行和列全部对齐的,有时候我们希望某个单元格合并多行或合并多列,那么就需要用到下面两个属性:

  • rowspan属性:行合并,对同列不同行的数据进行合并。
  • colspan属性:列合并,对同行不同列的数据进行合并。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" width="500" height="200">
<tr align="center">
<td colspan="2">1</td>
<td rowspan="3">3</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
</tr>
</table>

上面这个表格,我给所有的行都添加了align="center"属性,让每一行的数据都水平居中,给1所在的位置添加了colspan="2"列合并,合并的单元格数量为2,给3所在的单元格添加了rowspan="3"行合并,把下面两行的69合并掉了,如下图:

表单

什么是表单

HTML表单是用户和网站或应用程序之间交互要点之一,它允许用户将数据提交到网站,大部分是提交到web服务器上。HTML表单是由一个或多个小部件组成,这些小部件可以是文本框、选择菜单、复选框或按钮,学习如何正确的使用它们,指示用户输入正确的数据。

创建一个注册表单

所有的HTML表单都是以

元素开始的:
1
2
3
<form action="index.html" method="post">
</form>

这就正式定义了一个表单元素,它就像个<div><p>元素一样,是个容器。所有的表单小部件都放在<form>里面。它有很多属性,单最好总是至少设置actionmethod属性:

  • action属性:提交表单时收集的数据发送的地址(URL)。
  • method属性:定义http协议发送的提交方式(get 或 post)。

关于这些属性的具体原理,大家会在后续的课程里面了解到。
下面我们来正式的添加表单的小部件到<form>里面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="index.html" method="post">
<div>
<label>用户名:</label>
<input type="text" name="username">
</div>
<div>
<label>邮箱:</label>
<input type="email" name="email">
</div>
<div>
<label>密码:</label>
<input type="password" name="psw">
</div>
<div>
<label>重复密码:</label>
<input type="password" name="repsw">
</div>
<div>
<label>一句话介绍自己?</label>
<textarea></textarea>
</div>
<div>
<input type="checkbox" name="remember">
<span>记住我</span>
</div>
<div>
<button type="reset">重置</button>
<button type="submit">提交</button>
</div>
</form>

关于这些常用的小部件我们需要了解到:

  • input:表单项,这个标签是个空元素,它因为type属性而表现出不同的含义:
    • type=”text”,文本输入框。
    • type=”email”,邮件输入框。
    • type=”password”,密码输入框。
    • type=”radio”,单选框。
    • type=”checkbox”,复选框。
      同时,它的name属性和value属性也非常重要。
  • textarea:文本域,这个标签可以让用户输入大量文本内容。
  • button:按钮,和input一样,也是type属性产生不同的效果:
    • type=”submit”,提交按钮,这是默认值。
    • type=”reset”,重置按钮。
    • type=”button”,这,看起来很傻,不过在后续的javascript课程里面创建自定义按钮非常有用。
  • label:这个标签有着非常重要的属性for,它所对应的是一个表单里面表单元素的id的值,在css课程中,我们会详细讲解id属性。
    这些小部件还有一些共同的属性:
属性名称 范围 描述
name 所有表单元素 元素的名称,提交的时候会使用。
value 所有表单元素 元素所对应的初始值。
placeholder 文本输入字段 显示在文本输入框内的文本,简要描述了该文本框的用途。

如上所述,有很多不同类型的表单元素,不需要一次性记住所有的详细信息,要在实践中去运用他们。

注意:禁止将表单嵌套在另外一个表单里面,嵌套可能会导致浏览器以不可预知的方式运行。

常用实体

html实体是一段文本串,它是一&开始,以英文小写;结束的字符。为什么要使用它,因为对于一些特殊的符号,浏览器会解析它,例如在html里面<>符号会被解析成html标签的组成部分。

1
<p>这段文字中间&nbsp;好像&nbsp;有一些空格。</p>

下面是一些常用实体:

字符 实体 注意
& &amp; 解释实体或字符的开始符号。
< &lt; 解释为标签的开头。
> &gt; 解释为标签的结束。
&quot; 解释为属性值的开始和结束。
© &copy;
® &reg;

小结

这节课程了解了表格和表单的创建,以及如何书写一些常用的实体以避免被浏览器解析特殊字符。下节课程,我们会详细讲解关于css的使用。

作业

①. 测试这节课程中所有的标签的使用。

②. 使用表格的内容制作下面这段网页:

③. 使用表单的内容制作下面这段网页:

教材编写 myxxqy@gmail.com 张超
2017.06.30