HTML之表格

在文档处理中,表格是一种很常用的表现手法。在HTML中的表格除了用来对齐数据之外,更多地用来进行页面排版。无论是普通的HTML页面还是动态网站都需要使用表格来进行页面的布局。

1. 创建表格

表格的开始元素<TABLE>,结束元素是</TABLE>。所有的表格内容都位于这两个元素之间。要创建一个完整的表格,除了包含表格元素外,还要有行元素<TR>和单元格元素<TD>。可以说,如果要在页面中创建一个完整的表格,至少包含这三个元素。创建表格的具体语法是:

<table>
<tr>
<td>在页面中添加表格</td>
</tr>
</table>

2.表格属性

表格宽度
默认情况下,表格的宽度是以内容为标准的。如果要设置表格的宽度为某一特定值而与其中的内容无关时,则可以使用WIDTH属性,其语法如下:

<TABLE WIDTH="表格宽度">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

其中,表格宽度可以是表格的绝对宽度,单位是像素;也可以设置为相对宽度,及相对与窗口的百分比。

表格高度
除了可以为表格指定宽度之外,还可以为表格指定高度。通常表格的高度都是由表格的行数及单元格里的内容决定,在为表格指明高度之后,如果表格的行数与单元格里的内容使表格的高度高于指定的高度,则浏览器将以实际的高度显示表格;如果实际高度低于指定高度,则浏览器以指定高度显示表格。<TABLE>元素里的HEIGHT属性名值可以用来指定表格的高度,其语法如下

<TABLE HEIGHT="表格高度">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

表格背景图片
通过<TABLE>元素中的BACKGROUND属性,可以为表格指定一个背景图片。这种方法有点类似于为网页指定背景图片。如果背景图片小于表格大小,则会平铺该背景图片以充满整个表;如果背景图片大于表格太小,而会对背景图片进行裁剪,以适合该表格。其语法如下所示:

<table backrpound="图像源文件地址">
<tr>
<td>表格的内容<td>
<tr>
<table>

BACKGROUND 的属性值也是一个标准的url,其图片可以为gif或jpeg格式。

单元格间距
单元格间距是指表格中两个相邻单元格之间的间距和单元格与表格边框的间距。在默认情况下,单元格与单元格之间的间距是两个像素。通过设置<TABKE>元素中的CELLSPACING属性值,可以增大或缩小单元格之间的间距。其语法如下所示:

<TABLE CELLSPACING="间距太小">
<TR>
<TD>表格间距</TD>
</TR>
<TABLE>

表格内单元格与文字的距离
表格内单元格与文字的距离是指在单元格内,文字与单元格边框的距离。默认情况下,文字是紧贴着单元格的边框出现的,这样会显得页面的内容有些拥挤,可以通过<TABLE>元素中得CELLPADDING属性来调整这一距离,其语法是:

<TABLE CELLPADDING="单元格与文字距离的值">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

3. 表格的边框

表格的用处很多,不过只要不涉及网页排版,通常都会将表格边框显示出来。而且要设置表格的属性,就要先将表格的边框显示出来,这样才能更好地查看表格的效果。HTML中为<TABLE>元素提供了多个属性用于设置表格边框的样式。

边框宽度
在HTML中,默认表格的边框宽度为零,即不显示表格的边框。如果要显示表格的边框,就必须要为表格指定边框宽度。在HTML中,可以使用<TABLE>元素中的BORDER属性来设置表格边框的宽度。其语法如下所示:

<TABLE BORDER="表格的边框宽度">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

边款颜色
默认情况下,边款的颜色是灰色的。如果整个页面设置了特定的颜色,那么为了使表格和整个页面色调协调一致,就应该为表格的边框设置一个搭配的颜色。可以使用<TABLE>元素中的BORDERCOLOR属性来设置表格边框的颜色。其语法如下所示:

<TABLE BORDER=表格边框宽度 BORDERCOLOR="边框颜色">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

和其他页面元素一样,这里的边框颜色可以是颜色的英文名称,也可以是十六进制的颜色代码。需要注意的是,要想为边框设置颜色,首先必须为边框设置宽度,否则看不到效果。

亮边框颜色
在HTML中,除了可以设置表格的边框颜色外,还可以将边框划分为亮边框和暗边框。亮边框就是光线照到的边框,一般认为是表格外部的上边框和左边框,以及内部的下侧和右侧边框为亮边框。可以通过<TABLE>元素中的BORDERCOLORLIGHT来设置表格亮边框,其语法如下所示:

<TABLE BORDER=表格的边框BORDERCOLORLIGHT="亮边框的颜色">
<TR>
<TD>表格的内容</TD>
</TR>
</TABLE>

同样,在定义亮边框颜色的时候,可以使用英文颜色名称,也可以使用十六进制颜色值。

暗边框颜色
与表格的亮边框想对应的就是暗边框,一般认为是表格外部的下边框和右边框。可以通过<TABLE>元素中的BORDERCOLORDARK来设置表格亮边框,其语法如下所示:

<TABLE BORDER=表格的边框宽度 BORDERCOLORDARK="暗边框的颜色">
<TR>
	<TD>表格的内容</TD>
</TR>
</TABLE>

同样,在定义暗边框颜色的时候,可以使用英文颜色名称,也可以使用十六进制颜色值。

4. 设置表格行的对齐方式

表格都是行组成的,行也可以设置对齐方式。通过行里面的对齐方式的设定,可以是表格更加整齐。表格行的对齐方式包括水平对齐方式和垂直对齐方式。

垂直对齐方式
VALIGN属性可以设置行的垂直对齐方式,就是是行里面的内容都垂直对齐,其中默认为垂直居中对齐。垂直对齐方式语法结构如下所示:

<TABLE>
<TR VALLGN="">
<TD>表格内容</TD>
</TR>
</TABLE>

VALIGN 属性有三个值:middle、top、bottom,分别表示居中对齐、居上对齐、居下对齐。这三个属性值除了可以写在<tr>标签里面,还可以写在<td>标签里面。写在<td>标签里面,用来控制每列内容的垂直对齐方式,用法和写在<tr>标签里面一样。

水平对齐方式
ALIGN属性可以设置行的水平对齐,就是使行里面的内容都水平对齐,其中默认为水平居左对齐。水平对齐方式语法结构如下所示:

<TABLE>
<TR ALIGN="">
<TD>表格内容</TD>
</TR>
</TABLE>

VLIGN属性共有三个值:center、right、left,分别表示居中对齐、居右对齐、居左对齐。

5. 行和列的合并

在一个表格里,有时候我们想编辑的表格中,并不一定每行每列的行数和列数都是一样的。这时候我们就需要进行行和列的合并。

列的合并
COLSPAN 属性可以进行列的合并,就是把一行中的某个单元格与其后的一个或者多个单元格合并。其语法如下:

<TABLE>
<TR>
<TD COLSPAN="所跨的列数">表格的内容</TD>
</TR>
</TABLE>

在这里,设置的是单元格所跨的列数,而不是像素数。要注意的是,当设置水平跨度的时候,某一行单元格的跨度总和不能超过表格内的总列数,否则表格将会出现无法编辑的空白区域。

行的合并
ROWSPAN属性可以进行行的合并,就是把单元格与其下的一个或几个单元格进行合并。其语法结构如下:

<TABLE>
<TR>
<TD ROWSPAN=所跨的行数>表格的内容</TD>
</TR>
</TABLE>

在这里设置的是单元格所跨的行数。同样,当设置垂直跨度的时候,某一列单元格的跨度总和不能超过表格内的总行数,否则表格内同样会出现无法编辑的空白区域。

6. 表格结构

表格结构标记可以明确表格的结构,分出表格的头(表首)、身体(表主体)和尾(表尾)。通过设置这些结构标记,还可以分别对表首、表主体以及表尾的样式进行设置。

表头
通常一个表格的第1行都是用于说明本列数据含义的表头行,表头标签<THEAD>用于组合表格的表头内容。表头标签<THEAD>的使用,可以让网页中过长的表格在打印时,每页的最前面都可以显示出表头标签<THEAD>内容。表头语法如下所示:

<THEAD>
<TR>
<TD>单元格内的文字</TD>
</TR>
</THEAD>

主体
表格的主体就是表格真正要表达的内容和数据,一般占用表格的大部分内容。通过表主体标记<TBODY>,可以更好地划分表格的结构。表格主体部分设置语法如下:

<TBODY>
<TR>
<TD>单元格内的文字</TD>
</TR>
</TBODY>

表尾
表格的表尾主要是用于标注的一些额外信息,例如内容的设计者、创建日期、总和等。在HTML中,表格的表尾标记是<TFOOT>,可以让网页中过长的表格在打印时,每页的最后面都可以显示出表尾标签<TFOOT>的内容。其语法如下所示:

<TFOOT>
<TR>
<TD>单元格内的文字</TD>
</TR>
</TFOOT>

7. 表格标题

表格经常包括标题部分。HTML 4.01 里专门有一个元素用来设置表格的标题,不过由于表格的标题部分看上去与表格似乎是分离的两个部分,所有很多网页开发者都没有使用该元素的习惯,而是直接使用文本元素来设置表格标题。在默认情况CIA,表格的标题都显示在表格的上分,并且是居中显示。通常<CAPTION>元素都是紧跟在

之后的,但是它可以出现在<TABLE>元素与<TR>元素之间的任何位置。其语法如下所示:

<CAPTION>表格的标题文字</CAPTION>

8. 表格嵌套

在实际应用中,表格并不是单一出现的,往往需要在表格内嵌套其他的表格来实现页面的整体布局。一般情况下需要使用一些可视化软件来实现布局,这样看起来比较直观,容易达到预期的目的。但是也可以通过直接输入代码实现。

总结:

1. 有个完整的表格包括 <TABLE>、<TR>、 <TD> 3种元素。
2. COLSPAN元素可以设置表格行的合并,POWSPAN元素可以设置表格列的合并。