［ - 轻轻松松学HTML系列之一：表格教程篇 - ］

文章分类：昔日╰ァ残教 | 论坛：新手 | 在论坛中查看 | 字体大小: 小中大

Created by: http://jack.asprise.net/software/imggen

这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。<TABLE>是一个容器标记，也可以理解成是个框，意思是说文字图片都可以放在这个框或者容器中！并且TABLE是可以一层层叠加的！
<TR>用以标示表格列（row）
<TD>用以标示储存格（cell）
<TABLE>的参数设定（常用）：
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

width="400"
整个的表格宽度，接受绝对值（如 400）及相对值（如 80%）。
border="1"
表格边框厚度，一般设为0或者1。
cellspacing="2"
表格与表格之间的间隔厚度，根据自己喜好调整。
cellpadding="2"
表格与其内容间的距离，根据自己喜好调整。
align="CENTER"
表格的水平摆放位置，可选值为： left, right, center，。
valign="TOP".
表格内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。
background="myweb.gif"
表格背景壁纸，与 bgcolor 不要同用，同用的话，一般bgcolor会被背景图片遮住。
bgcolor="#0000FF"
表格背景底色，与background不要同用，同用的话，一般bgcolor会被背景图片遮住。
bordercolor="#FF00FF"
表格边框颜色。
bordercolorlight="#00FF00"
表格边框向光部分的颜色。『只适用于 IE』
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用bordercolorlight或bordercolordark时 bordercolor将会失效。『只适用于 IE』

注意：其实，<TR><TD>除了特殊需要，大部分时候都不需要设置，大家见下面的两个实例就可以知道！

例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="blue">

align="RIGHT"
该一列内字画等的摆放贴位置（水平），可选值为：left, center, right。
valign="MIDDLE"
该一列内字画等的摆放贴位置（垂直），可选值为： top, middle, bottom。
bgcolor="#0000FF"
该一列底色，请看。
bordercolor="#FF00FF"
该一列边框颜色，请看。『只适用于 IE』

bordercolorlight="#808080"
该一列边框向光部分的颜色，请看。『只适用于 IE』
bordercolordark="blue"
该一列边框背光部分的颜色，使用bordercolorlight 或 bordercolordark时bordercolor 将会失效。『只适用于 IE』

例如：<td width="48%" height="400" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" background="myweb.gif">

width="48%"
该一储存格宽度，接受绝对值（如 400）及相对值（如 80%）。
height="400"
该一储存格高度。
align="RIGHT"
该一储存格内字画等的水平摆放贴位置，可选值为：left, center, right。
valign="BOTTOM"
该一储存格内字画等的垂直摆放贴，可选值为：top, middle, bottom。
bgcolor="#FF00FF"
该一储存格底色。
bordercolor="#808080"
该一储存格边框颜色。『只适用于 IE』
background="myweb.gif"
该一储存格背景壁纸。

注意：其实，<TR><TD>除了特殊需要，大部分时候都不需要设置，大家见下面的两个实例就可以知道！

■ 我们来看一下范例^_^

肯定有人快不耐烦了，那么我简单介绍一下使用，基本格式如下：

大家看看这个单一表格的实例

好看吗？

上面的单一表格实例的代码

刚才给出的只是一个表格，如果使用表格的嵌套，你的帖子会更有魅力，如同一个彩色的画框。原理是这样：

表格1开始 + 表格2开始 + ... + 表格2结束 + 表格1结束

下面给出3层表格的范例，如果你要多层，继续加入即可：

注意：关键在于这几个方面，也是我们修改的内容：
1、第一个表格的width可以取你想要的宽度，其他全部取100％，操作简单。

2、cellspacing的取值决定了表格边的宽度，我下面分别取30、20、40，大家看效果。

3、border的取值也是重要的，建议取0或者1。

4、颜色搭配非常重要，这个才是重点，不要反差太大，有点像女士配衣服，男士搭配西装、衬衣和领带，千万不要大红配大绿，那就是丑。

大家看看这个多表格的实例