3.2　表格

表格其实就是很多的小单元格很有次序地排列着，有很多行和很多列。表格是<table>标签来定义的。<table>标签中的行就是<tr>标签，列就是<td>标签，必需先定义行才能定义列。因为HTML中，每一列是在一行当中的。

3.2.1　基本语法

表格是由几个不同的样式结构组成的，下面将会为大家介绍表格的结构内容。

1．表格的结构

（1）设置表头样式thead：用于定义表格最上端表头的样式（一个表只能有一个thead元素）。

（2）设置表主体样式tbody：用于统一设计表主体部分的样式（一个表只能有一个tbody元素）。

（3）设置表尾样式tfoot：用于定义表格最末端表尾的样式（一个表只能有一个tfoot元素）。

（4）层标签<div>：

     <div id=值 align=对齐方式 style=样式 class=应用的样式类></div>

2．表单介绍

（1）表单主要是用来收集客户端提供的相关信息。表单标签为<form>，每个表单元素开始于form元素，包含所有的表单控件，还有任何必需的伴随数据。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。

（2）处理程序action：真正处理表单的数据脚本或程序是在action属性。

     <form action="表单的处理程序">…</form>

在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。

（3）表单名称name：用于给表单命名。

     <form name="表单名称">…</form>

☆注意☆　表单名称中不能包含特殊符号和空格。

（4）传送方法method：用于定义处理程序从表单中获取信息的方式，可取值为get和post（决定表单中已收集数据是用什么方法发送到服务器）。

     <form method="传送方法">…</form>

（5）编码方式enctype：用于设置表单信息提交的编码方式。

     <form enctype="编码方式">…</form>

（6）目标显示方式target：用于指定目标窗口的打开方式。

     <form target="目标窗口打开方式">…</form>

目标窗口打开方式包含_blank、_parent、_self和_top。

3．表格基本标签

表格基本标签有table标签（表格）、tr标签（行）和td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。

代码如下所示：

效果如图3-2所示。

图3-2　表格基本元素效果

说明：tr即“table row（表格行）”，td即“table data cell（表格单元格）”。<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

代码如下所示：

在浏览器预览效果如图3-3所示。

图3-3　表格基本元素预览效果

3.2.2　跨行和跨列

一般使用<td>元素的colspan属性来实现单元格跨列操作，使用<td>元素的rowspan属性来实现单元格的跨行操作。

colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性，其取值为number。

代码如下所示：

效果如图3-4所示。

图3-4　跨列效果

rowspan属性规定单元格可跨越的行数，所有浏览器都支持rowspan属性，其取值为number。

代码如下所示：

效果如图3-5所示。

图3-5　跨行效果

代码如下所示：

运行效果如图3-6所示。

图3-6　跨行跨列效果