web前端基础：HTML表格

表格简述

表格是在制作网页的重要武器。诸如让自己的页面有底色、底图
之类的修饰，只能通过表格来实现。表格是一个可自定义的容器，因
而它就是我们用以实现页面构设的利器。
把表格称作容器缘于表格的装载特性。表格是用于装载数据的，
与我们现实中所看到和理解的表格非常一致。表格不仅仅只能装载数
据，它还被广泛地应用于网页的布局，这与表格可以将其所在区域划
分为行和列即诸多单元格密切相关。页面布局将因使用了表格而可以
随心所欲地排版。
在 HTML 里，表格有表头、表体、单元格、行、列等等概念，通
过学习、领会和实践，是能够逐渐掌握的。
◆表格标签基本代码构成表达式
以下是一个完整的表格标签代码框架，为了能够一目了然，各元
素尚未引入它们的属性：

<table>
	<tbody>
		<tr>
			<td>内容</td>
		</tr>
	</tbody>
</table>

◆认识基本表格
一个表由＜table＞开始， ＜/table＞结束，表的内容由 ＜tr
＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多
少个＜tr＞；＜th＞说明表的列数和相应栏目的名 称，有多少个栏
就有多少个＜th＞；＜td＞则填充由＜tr＞和 ＜th＞组成的表格。
表格重要的基本标记不多，但每个标记都有很多的属性，所以还
是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属
性。
表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这
样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元
格的属性标记放在＜tr＞、＜td＞里。
◆表格标签基代本码解析：
<table>：表格的起始符。任意一个表格的开始都必须以它开头，
且必须有终止符。
<tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。
必须有结尾符，放在</table>之前。避免导致代码出错。
<tr>：tr 的作用是规定表格的行，其中，t 是 table，r 是 row（行）。
有多少组 tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必
须有终止符。
<td>：td 的作用是规定表格的列，t 是 table，d 可理解为 down
（向下）。有多少组 td，这张表格就有多少列。第一个<td>紧跟在
<tr>之后。终止符为</td>。td 与 tr 配合构成单元格。</td>、</tr>、</tbody>、</table>这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。
从表格的代码框架分析得出：表格标签里，所有元素都成对出现，
而这些元素是按照从大到小的顺序从外往里层层包裹的。table 最大，
它占在起始和终结的位置，tbody 是老二，tr 是老三，td 最小，它
在最里层。
◆表格标签常用属性与参数设置：

属性	值	描述
width	pixels、%	规定表格的宽度
align	left、center、right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	表格的背景颜色
cellpadding	pixels、%	单元边沿与其内容之间的空白
cellspacing	pixels、%	单元格之间的空白
frame	属性值	规定外侧边框的那个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的

属性	值	描述
frame	viod	不显示外侧边框。
	above	显示上部的外侧边框。
	below	显示下部是外侧边框。
	hsides	显示上部和下部的外侧边框。
	vsides	显示左边和右边的外侧边框。
	lhs	显示左边的外侧边框
	rhs	显示右边的外侧边框。
	box	在所有四个边上显示外侧边框。
	border	在所有四个边上显示外侧边框。

属性	值	描述
rules	none	没有线条。
	groups	位于行组和列组之间的线条。
	rows	位于行之间的线条。
	cols	位于列之间的线条。
	all	位于行和列之间的线条。

1、border：表格边框线宽度。用于指定在边框外围添加的那些
不同样式的线段参数。
例如：border=1，表示表格边框的粗细为 1 个像素（默认值），
参数为 0 时表示没有边框线。

2、cellspacing：单元格间距。用于指定单元格之间的距离参数，
当一个表格有多个单元格时，各单元格的距离就是 cellspacing 指定
的参数值了，如若表格只有一个单元格，那么，这个单元格与表格上、
下、左、右边边框的距离也是 cellspacing。
例如：cellSpacing=10；这里的数字 10，是指 10px。

3、cellpadding：单元格边距，也可叫做衬距。用于指定该单元
格里的内容与 cellspacing 区域的距离参数。
例如：cellpadding=5 ；这里的数字 5，是指 5px。则表示单
元格里的内容与表格周边边框的距离。

4、width：表格的宽度。取值从 0 开始，默认以像素为单位，与
显示器的分辨率的像素是一致的。例如：width=“650”。
在设置表格的宽度时要充分考虑显示分辨率问题，如果表格设置
的像素宽度太大，那么，得出的效果将导致 IE 的横向滚动条出现，
只有通过滑动它才能看到表格最右边的内容。width 的取值还可以使
用百分比，例如：width=“100%”，这种赋值法有个好处：表格的宽
度将根据可显示的宽度来自我调整宽度。

5、height：表格的高度，取值方法同 width。提示：如果不是
特别需要，不用设置表格的高度，系统会根据表格的内容自动设置高
度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，
比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精
确定义，图片就不可能完整或完美地显示。

6、bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000
或 bgcolor=red。单元格也可有此属性，如果设置了表格的背
景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这
种情况主要用于多单元格的表格。

7、background：表格的背景图。其值为一个有效的图片地址。

也有此属性。

8、bordercolor：表格的边框颜色，当 border 值不为 0 时设置
此值有效。取值同 bgcolor。

9、bordercolorlight：亮边框颜色，当 border 值不为 0 时设置
此值有效。亮边框指表格的左边和上边的边框。

10、bordercolordark：暗边框颜色，当 border 值不为 0 时设
置有效。暗边框指表格的右边和下边的边框。

11、border-style：边框线样式，表达方式为：
style=“border-style: groove;”

12、align：表格的对齐方式，值有 left（左对齐，默认）、center
（居中）以及 right（右对齐）。
align 定义的是表格自身的位置，这是一个很有用的属性，强烈
建议使用它来规定表格的对齐方式，尽量不要使用<p align=?>表格
</p>、<div align=?>表格</div>和<center>表格</center>之类
的标签来规定表格的位置，因为这么做将导致添加许多废码！此外，
当表格的宽度设置为 100%，或者，表格的宽度设置成了占满它所在
的容器的宽度，没有必要定义 align 属性。
★单元格属性设置
从表格的整体外观上看，单元格是表格的基本构成单元，一张表
格至少要有一个单元格。单元格由共同组成，
但在一组里，可以拥有多组，有多少组 td 该表格就有多
少列；同样，一张表格可以拥有多组 tr，表格有多少组 tr 就有多少
行。显而易见，构成表格最小单元的 td，它的属性设置是不可忽视
的。
单元格的属性设置主要体现在里，除了在上面学到的bgcolor 等之外，还有许多属性需要掌握，令人高兴的是，很多属性的设置方法都是和

属性设置一样的，如 width、height、bordercolor 等。对于 width，在运用时要特别注意。好的习惯是，如果是一个单元格的表格，假设在 <table>里设置了其宽度，那么，就不必再设置 <td>的宽度了，因为这是多余的，如果再另行这么设置： <td width="100%">，显然只是增加了代码量，它没有任何作用——当有了表格宽度，单元格的宽度会自动占满表格的宽度。但应引起重视的是：在多列表格里， <td>的宽度就应该设置，如若不设置，系统会自动按各单元格里的内容的占位情况自行分配宽度，效果是可想而知的。
单元格的 bordercolor 设置有些讲究，主要用于实现单像素的表格边框——要实现这种效果，要求表格的 border 为 1，且 <table>里设置了 bordercolor 颜色值，cellpadding 和 cellspacing 都设置为 0，然后将 <td>的bordercolor 颜色值设置为与 <td>的背景色相一致。
单元格的最为重要的属性应该为 align 和 valign，align 规范单元格里的内容的水平对齐方式，valign 则规定垂直方向的对齐方式——请特别注意：它们规定的对齐方式是单元格里面的内容，而不象表格里的 align 那样定义自身的位置！
align 取值方法和前面介绍的一样，valign 的取值方法主要有：left
（左对齐）、middle（居中）、top（靠顶）、bottom（靠底）等。
<tr>标签属性：

属性	值	描述
align	Left、center、right、justify、char	行内容的水平对齐
valign	top、middle、bottom、baseline	行内容的垂直对齐
bgcolor	•rgb(x,x,x)•#xxxxxx•colorname	行的背景颜色。

<td>和<th>标签属性

属性	值	描述
align	Left、center、right、justify、char	单元格内容的水平对齐
valign	top、middle、bottom、baseline	单元格内容的垂直对齐
bgcolor	•rgb(x,x,x) •#xxxxxx •colorname	单元格的背景颜色。
width	•%•pixels	单元格的宽度
height	•%•pixels	单元格的高度

<thead>、<tbody>和<tfoot>标签属性

属性	值	描述
align	Left、center、right、justify、char	水平对齐
valign	top、middle、bottom、baseline	垂直对齐

带表头的表格

<table>
	<tr>
		<th>…</th>   <!– 表格头，内容居中、加粗显示-->
		…
	</tr>
	<tr>
		<td>…</td>
		…
	</tr>
	…
</table>

带标题的表格

<table>
	<caption>…</caption>    <!– 表格标题，居中显示-->
	<tr>
		<th>…</th>
		…
	</tr>
	<tr>
		<td>…</td>
		…
	</tr>
	…
</table>

带结构的表格

表格划分三部分：表头、主体、脚注
• thead：表格的头 （放表格的表头）
• tbody：表格的主体 （放数据本体）
• tfoot：表格的脚 （放表格的脚注）

<table>
	<caption>…</caption>
	<thead>
		<tr>
			<th>表头</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>主体</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>脚注</td>
		</tr>
	</tfoot>
</table>