网络优秀表格（table）超级详细教程及代码

好赚联盟

发贴使用表格会使风页更美观、漂亮，但是表格制作有点复杂，全是代码，下面是好赚联盟收集的表格教学及代码：实用的表格代码请看：实用的各种表格代码
字体和表格颜色代码请看：RGB颜色表
理论讲解:
简单的介绍下table的构成
使用table可以调整宽度、背景颜色、行与列等
功能十分强大，熟练使用的话，做个排版不错的帖子还是没问题的
表格由 table 元素以及一个或多个 tr、 td 元素组成。
tr 元素定义表格行，td 元素定义表格列。

1. [ table] [ /table]

复制代码

此为表格的框架，任何表格都必须使用

1. [table=98%,clor]

复制代码

98%：设定表格宽度为98%，可以使用固定数值但不能超过560，数值超过则变98%，百分数的最大数值也是98%。
color：设定表格的背景颜色，可以使用颜色的英文单词，也可以使用RGB格式或直接使用颜色代码#ffffff（把这个和RGB格式一对照你就会明白。。。不解释）
[tr] [/tr]是行代码
[td] [/td]则是列代码
一行一列：

1. [tr][td] [/td][/tr]

复制代码

一行两列：

1. [tr][td] [/td][td] [/td][/tr]

复制代码

两行两列：

1. [tr][td] [/td][td] [/td][/tr]
   
2. [tr][td] [/td][td] [/td][/tr]

复制代码

看明白了嘛，仔细看清楚了，请注意，每个元素都是由2个组成，元素必须合拢，[td]元素放置在[tr]元素之内。
以上就是table代码的初级部分。
当然你也可以说我说的没用，高级编辑模式中可以直接创建表格，比我这样直接打那肯定是要方便很多。
但是，如果你不仅仅只是简单的使用表格，也想创建出非常美观的表格，那么以上的部分那就是必须的了。

实例讲解：

一、初级简单表格介绍：

1、创建一个一行一列的表格：
效果图：

1

代码：

1. [table]
   
2. [tr][td] [/td][/tr]
   
3. [/table]

复制代码

2、创建一个两行两列的表格：
效果图：
代码：

1. [table]
   
2. [tr][td] [/td][td] [/td][/tr]
   
3. [tr][td] [/td][td] [/td][/tr]
   
4. [/table]

复制代码

3、创建一个两行两列，宽度为50%的表格：
效果图：
代码如下：

1. [table=50%]
   
2. [tr][td] [/td][td] [/td][/tr]
   
3. [tr][td] [/td][td] [/td][/tr]
   
4. [/table]

复制代码

4、创建一个两行两列，宽度为50%，颜色为黑色的表格：

效果图：
代码如下：

1. [table=50%,#000000]
   
2. [tr][td] [/td][td] [/td][/tr]
   
3. [tr][td] [/td][td] [/td][/tr]
   
4. [/table]

复制代码

注：
1、table代码的颜色代码不可单独使用，必须先定义表格的宽度后才可以定义颜色；
2、table代码不能自定义边框颜色；
3、table代码不能自动居中，如需要则需使用居中代码;
4、table代码最多可以重叠五层，第六层开始代码失效（注意：在DZ编辑框中，只显示四层的表格。。。第五层就不显示了）

下面是向个做几个实例表格，方便套用
效果：
代码：

1. [table=560,blue]
   
2. [tr][td][/td][/tr]
   
3. [/table]

复制代码

其中，颜色和宽度可以自己设置

效果：

代码：

1. [table=300,Salmon]
   
2. [tr][td][/td][/tr]
   
3. [/table][table=400,Salmon]
   
4. [tr][td][/td][/tr]
   
5. [/table][table=500,Salmon]
   
6. [tr][td][/td][/tr]
   
7. [/table]

复制代码

颜色和宽度之类的都可以自己设置。。。或者多弄几条也可以

效果图：
代码：

1. [table=560,#C1CDCD]
   
2. [tr][td][/td][/tr]
   
3. [/table][table=560,#4876FF]
   
4. [tr][td][/td][/tr]
   
5. [/table][table=560,#0000CD]
   
6. [tr][td] [/td][/tr]
   
7. [/table][table=560,#4876FF]
   
8. [tr][td][/td][/tr]
   
9. [/table][table=560,#C1CDCD]
   
10. [tr][td][/td][/tr]
    
11. [/table]

复制代码

效果图：

代码：

1. [table=560,black]
   
2. [tr][td][table=560,#ffffff]
   
3. [tr][td] [/td][/tr]
   
4. [/table][table=560,#ffffff]
   
5. [tr][td] [/td][/tr]
   
6. [/table][table=560,#ffffff]
   
7. [tr][td] [/td][/tr]
   
8. [/table][table=560,#ffffff]
   
9. [tr][td] [/td][/tr]
   
10. [/table][table=560,#ffffff]
    
11. [tr][td] [/td][/tr]
    
12. [/table][/td][/tr]
    
13. [/table]

复制代码

颜色什么的都可以自己设置
效果图：

代码：

1. [table=560,yellow]
   
2. [tr][td=1,5] [/td][td] [/td][td] [/td][/tr]
   
3. [tr][td] [/td][td] [/td][/tr]
   
4. [tr][td] [/td][td][/td][/tr]
   
5. [tr][td] [/td][td][/td][/tr]
   
6. [tr][td] [/td][td][/td][/tr]
   
7. [/table]

复制代码

每一行也可以设置行颜色
效果图：

嵌套

代码：

1. [table=560,#000000]
   
2. [tr][td][table=560,#ff0000]
   
3. [tr][td][table=560,#00ff00]
   
4. [tr][td][table=560,#0000ff]
   
5. [tr][td][table=560,#ffffff]
   
6. [tr][td]嵌套[/td][/tr]
   
7. [/table][/td][/tr]
   
8. [/table][/td][/tr]
   
9. [/table][/td][/tr]
   
10. [/table][/td][/tr]
    
11. [/table]

复制代码

效果图：

旋风管家 CAN'T TAKE MY EYES OFF YOU 外文名称 ハヤテのごとく! 原作/原案 畑健二郎 导演/人设 工藤昌史 脚本 小鹿理惠 类型 搞笑、后宫 地区 十一区

代码如下：

1. [align=center][table=560,#000000]
   
2. [tr][td][table=560,#ffffff]
   
3. [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
   
4. [tr=#FF69B4][td=1,7][align=center][img=160,120]http://192.168.6.138/bbs/upload/image/h5galgame/fll1sjvtcqu.jpg[/img][/align][/td][/tr]
   
5. [tr=#9ACD32][td]外文名称[/td][td]ハヤテのごとく![/td][/tr]
   
6. [tr=#9ACD32][td]原作/原案[/td][td]畑健二郎[/td][/tr]
   
7. [tr=#9ACD32][td]导演/人设[/td][td]工藤昌史[/td][/tr]
   
8. [tr=#9ACD32][td]脚本[/td][td]小鹿理惠[/td][/tr]
   
9. [tr=#9ACD32][td]类型[/td][td]搞笑、后宫[/td][/tr]
   
10. [tr=#9ACD32][td]地区[/td][td]十一区[/td][/tr]
    
11. [/table][/td][/tr]
    
12. [/table][/align]
    

复制代码

可以将文字、图片什么的进行替换
也可以适当增加行、或减少
还可以更改颜色，以及设置宽度。。。自己弄吧
于是，其实我们还可以改动一下
效果图：

旋风管家 CAN'T TAKE MY EYES OFF YOU 外文名称 ハヤテのごとく! 原作/原案 畑健二郎 导演/人设 工藤昌史 脚本 小鹿理惠 类型 搞笑、后宫 地区 十一区

代码如下：

1. [align=center][table=560,#000000]
   
2. [tr][td][table=560,#ffffff]
   
3. [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
   
4. [tr=#FF69B4][td=1,13][align=center][img=160,120]http://192.168.6.138/bbs/upload/image/h5galgame/fll1sjvtcqu.jpg[/img][/align][/td][/tr]
   
5. [tr=#9ACD32][td=1,2]外文名称[/td][/tr]
   
6. [tr=#FFA500][td]ハヤテのごとく![/td][/tr]
   
7. [tr=#9ACD32][td=1,2]原作/原案[/td][/tr]
   
8. [tr=#FFA500][td]畑健二郎[/td][/tr]
   
9. [tr=#9ACD32][td=1,2]导演/人设[/td][/tr]
   
10. [tr=#FFA500][td]工藤昌史[/td][/tr]
    
11. [tr=#9ACD32][td=1,2]脚本[/td][/tr]
    
12. [tr=#FFA500][td]小鹿理惠[/td][/tr]
    
13. [tr=#9ACD32][td=1,2]类型[/td][/tr]
    
14. [tr=#FFA500][td]搞笑、后宫[/td][/tr]
    
15. [tr=#9ACD32][td=1,2]地区[/td][/tr]
    
16. [tr=#FFA500][td]十一区[/td][/tr]
    
17. [/table][/td][/tr]
    
18. [/table][/align]

复制代码

于是，这个其实就是在上面的那个改动了下而已。。。

效果图：

正方 V.S 反方 理由 理由

代码如下：

1. [align=center][table=560,#87CEFA]
   
2. [tr][td][table=560]
   
3. [tr=#ffffff][td=30]正方[/td][td][/td][td=1,2,100][align=center]V.S[/align][/td][td][/td][td=30][align=right]反方[/align][/td][/tr]
   
4. [tr=#FFFACD][td=2,1][align=right]理由[/align][/td][td=2,1][align=left]理由[/align][/td][/tr]
   
5. [/table][/td][/tr]
   
6. [/table][/align]

复制代码

于是，这个是辩论所需的。。。正常情况下是不需要了

效果图

正方 V.S 反方 理由 理由

代码如下：

1. [align=center][table=560,#00ff00]
   
2. [tr][td][table=560]
   
3. [tr=#ffffff][td=30]正方[/td][td][/td][td=1,3,100][align=center]V.S[/align][/td][td][/td][td=30][align=right]反方[/align][/td][/tr]
   
4. [tr=#ff0000][td=2,2][align=right]理由[/align][/td][/tr]
   
5. [tr=#0000ff][td=2,1][align=left]理由[/align][/td][/tr]
   
6. [/table][/td][/tr]
   
7. [/table][/align]

复制代码

二、中级复杂表格介绍：
现在，我们来详细了解一下行代码[tr]
定义行的颜色

1. [tr=color]

复制代码

此处color依旧为颜色代码
注：如果table定义了颜色之后，此处会失效。。。优先选择行颜色。。。
定义列的宽度

1. [td=500]

复制代码

此处定义列的宽度，可以为固定数值，也可以为百分数。固定数值不得大于560，否则会变成98%，百分数最大值也只为98%
合并单元格

1. [td=2,1]

复制代码

第一个数值为列，第二个为行。。。这样好记点
于是，这个的意思就是，2列，1行合并为一个单元格

1. [td=3,1]

复制代码

这个的意思就是，3列，1行合并为一个单元格

1. [td=1,2]

复制代码

这个的意思就是，1列，2行合并为一个单元格

1. [td=2,2]

复制代码

这个的意思就是，2列，2行合并为一个单元格
这样就清楚了吧，于是，下面还有实例，先看看就好，过会详细介绍
于是，合并行和合并列也介绍完毕。。。

定义合并单元格的宽度

1. [td=2,1,50%]

复制代码

实例讲解：

综合运用
效果图：

1
1				5
1		3		5		7
1	2	3	4	5	6	7	8

代码如下：

1. [table=500]
   
2. [tr=red][td=8,1]1[/td][/tr]
   
3. [tr=blue][td=4,1]1[/td][td=4,1]5[/td][/tr]
   
4. [tr=yellow][td=2,1]1[/td][td=2,1]3[/td][td=2,1]5[/td][td=2,1]7[/td][/tr]
   
5. [tr=green][td]1[/td][td]2[/td][td]3[/td][td]4[/td][td]5[/td][td]6[/td][td]7[/td][td]8[/td][/tr]
   
6. [/table]

复制代码

解说：
1.定义表格的宽度为500；
2.定义行的颜色为red（红色）；定义合并8列1行；
3.定义行的颜色为blue（蓝色）；定义合并4列1行*2；
4.定义行的颜色为yellow（黄 色）；定义合并2列1行*4；
5.定义行的颜色为green（绿色）；没有定义。。。就是一个很简单的列*8。
so，于是，通过这个案例，明白了一点表格的应用了嘛？

下面，继续讲解一个几个。。。

效果图：

1
2				3
				4		5
6	6	6	6	6	6

代码如下：

1. [table=500]
   
2. [tr=red][td=8,1]1[/td][/tr]
   
3. [tr=blue][td=4,2]2[/td][td=4,1]3[/td][/tr]
   
4. [tr=yellow][td=2,1]4[/td][td=2,2]5[/td][/tr]
   
5. [tr=green][td]6[/td][td]6[/td][td]6[/td][td]6[/td][td]6[/td][td]6[/td][/tr]
   
6. [/table]

复制代码

解说：so，这个比上一个稍微复杂点。。。
1.定义表格的宽度为500；
2.定义行的颜色为red（红色）；定义合并8列1行；
3.定义行色颜色为blue（蓝色）；定义合并4列2行；定义合并4列1行；
4.定义行的颜色为yellow（黄 色）；定义合并2列2行；定义合并2列1行；
5.定义行的颜色为green（绿色）；定义行*6
注意：
第4行代码，由于第3行的代码合并了2行，所以，此处代码显示在后面，可以参照上一个例子来看一看。。。
第5行代码，由于第4行的代码也合并了2行，所以，此处也跳过去
表格的嵌套使用：

效果图：

1

代码如下：

1. [table=500,black]
   
2. [tr][td][table=500,yellow]
   
3. [tr][td]1[/td][/tr]
   
4. [/table][/td][/tr]
   
5. [/table]

复制代码

解说：
1.定义表格的宽度为500,；定义表格的颜色为black（黑色）；
2.定义一行一列；嵌套一个表格（宽度为500，颜色为yellow（黄 色））；
3.定义嵌套的表格为一行一列；
4.定义关闭嵌套的表格；关闭一列一行；
5.定义关闭这个表格。
注意：
1.宽度数值可以设置为固定值（最大560），也可以设置为百分数（最大98%）。
2.table代码最多可以重叠五层，第六层开始代码失效（注意：在DZ编辑框中，只显示四层的表格。。。第五层就不显示了）
3.当行定义了颜色之后，table的定义颜色会在本行失效
4.颜色代码
RGB颜色表、英文颜色对照表http://www.5tu.cn/colors/rgb-peisebiao.html

三、高级超复杂表格介绍：
效果图：

1	2	3	4	5	6	7	8	9	10
					2
					3
					4
					5
1颜色
	2颜色
		3颜色
			4颜色
				5颜色
					6颜色
						7颜色
							8颜色
								9颜色
									10颜色

于是，此为我从另一个地方拿来的
先以这个来讲解一下，请看代码
代码如下：

1. [table=98%,black]
   
2. [tr][td][color=#ff0000]1 [/color][/td][td][color=#ff0000]2 [/color][/td][td][color=#ff0000]3 [/color][/td][td][color=#ff0000]4 [/color][/td][td][color=#ff0000]5 [/color][/td][td][color=#ff0000]6 [/color][/td][td][color=#ff0000]7 [/color][/td][td][color=#ff0000]8 [/color][/td][td][color=#ff0000]9 [/color][/td][td][color=#ff0000]10 [/color][/td][/tr]
   
3. [tr=yellow][td=3,1] [/td][td] [/td][td] [/td][td] 2[/td][td=2,1] [/td][td] [/td][td] [/td][/tr]
   
4. [tr=white][td=1,3] [/td][td] [/td][td] [/td][td] [/td][td=1,2] [/td][td] 3[/td][td] [/td][td] [/td][td=2,1] [/td][/tr]
   
5. [tr=blue][td] [/td][td] [/td][td] [/td][td] 4[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
6. [tr=green][td] [/td][td] [/td][td] [/td][td] [/td][td] 5[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
7. [tr=#cccccc][td=1,10]1颜色[/td][/tr]
   
8. [tr=#CCFF99][td=1,9]2颜色[/td][/tr]
   
9. [tr=#33CC00][td=1,8]3颜色[/td][/tr]
   
10. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
    
11. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
12. [tr=#330000][td=1,5]6颜色[/td][/tr]
    
13. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
14. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
15. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
16. [tr=#9966cc][td]10颜色[/td][/tr]
    
17. [/table]

复制代码

解说：
看到这么多代码，是不是不相信的说，你会说，不就是6行嘛，怎么会出现这么多代码
于是，我可以很肯定以及确定乃至确信的告诉你，没错。。。请听我慢慢分析。。。
1.定义table代码的宽度为98%；定义表格的颜色为black；
2.定义了列*10；字体颜色什么的就无视吧。。。
3.
[tr=yellow]
此处才为真正的第3行，我们是按行算的。。。也就是[tr]代码。。。
第3行（其实是第2行，因为加上了表格那一行）定义了颜色为yellow（table颜色失效）；定义合并3列1行；定义1列*3；定义合并2列1行；定义1列*2；
4.定义行颜色为white；定义合并1列3行；定义1列*3；定义合并1列2行；定义1列*3；定义合并2列1行；
5.定义行颜色为blue；定义1列*8（由于此行有2个单元格被合并了，所以，只需要8列即可）；
6.定义行颜色为green；定义1列*9（由于此行有1个单元格被合并了，多以，只需要9列即可）；
以上均为中级篇内容，很简单，都看的明白吧，重点在这里。。。
7.定义行的颜色为#cccccc；定义合并1列10行，合并了下面10行的内容，那边合并之后它就等于一行；
8.定义行的颜色为#CCFF99；合并了下面9行的内容，因为第1列合并掉了本来存在的10列中的1列，所以它只能合并9行；
9.定义行的颜色为#33CC00；合并了下面8行的内容，因为第1列和第2列合并掉了本来存在的10列中的2列，所以它只能合并8行；
10.定义行的颜色为#CCFF00；合并了下面7行的内容，因为前面3列合并掉了本来存在的10列中的3列，所以它只能合并7行；
11.定义行的颜色为#FFCC00；合并了下面6行的内容，因为前面4列合并掉了本来存在的10列中的6列，所以它只能合并6行；
12.同理。。。
13.同理。。。
14.同理。。。
15.同理。。。
16.定义行的颜色为9966cc；由于是最后1列，所以，so，没错，不需要合并了，结束。
17.关闭表格。。。

于是，看完了吗，看完了吧，有什么感想吗，感觉是不是很坑爹。。。很无语。。。很碉堡。。。
好戏还在后头。。。
so，没错，现在继续。。。

上面重点介绍的那10列的衍生用法：

效果图：

1颜色	1颜色
		2颜色
			3颜色
				4颜色	4颜色
						5颜色
							6颜色
								7颜色
									8颜色

代码如下：

1. [table]
   
2. [tr=#cc00cc][td=1,8]1颜色[/td][td=1,8] 1颜色[/td][/tr]
   
3. [tr=#CCFF00][td=1,7]2颜色[/td][/tr]
   
4. [tr=#FFCC00][td=1,6]3颜色[/td][/tr]
   
5. [tr=#33FF00][td=1,5]4颜色[/td][td=1,5]4颜色 [/td][/tr]
   
6. [tr=#CCCC33][td=1,4]5颜色[/td][/tr]
   
7. [tr=#CC0000][td=1,3]6颜色[/td][/tr]
   
8. [tr=#99CC00][td=1,2]7颜色[/td][/tr]
   
9. [tr=#9966cc][td]8颜色[/td][/tr]
   
10. [tr][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
    
11. [/table]

复制代码

解说：
1.定义一个表格。。。
2.定义行颜色为#cc00cc；定义合并1列8行；定义合并1列8行；
3.定义行颜色为#ccff00；定义合并1列7行；
4.定义行颜色为#ffcc00；定义合并1列6行；
5.定义行颜色为#33ff00；定义合并1列5行；定义合并1列5行；
6.定义行颜色为#cccc33；定义合并1列4行；
7.定义行颜色为#cc0000；定义合并1列3行；
8.定义行颜色为#99cc00；定义合并1列2行；
9.定义行颜色为#9966cc；定义1列；
10.定义1列*10；
11.关闭表格。

于是。。。就不细说了，可以参照上面的7-16步。。。

于是，估计大家会看不懂，所以，附上原型表格，对照着看，估计可以容易明白点。。。

第一个表格的最后那10列：
原型表格实例（即不合并的情况）：

代码如下：

1. [table=98%]
   
2. [tr=#cccccc][td] [/td][/tr]
   
3. [tr=#CCFF99][td] [/td][td] [/td][/tr]
   
4. [tr=#33CC00][td] [/td][td] [/td][td] [/td][/tr]
   
5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
7. [tr=#330000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
8. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
9. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
   
10. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
    
11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
    
12. [/table]

复制代码

解说：

对照着来看就很好理解了，
第1列合并下面的所有行。。。所以只剩1行，所以，第2列就和第1列显示在同1行了
第2列合并下面的所有行。。。所以只剩1行，所以，第3列就和第2列显示在同1行了
下面同理。。。
于是。。。明白了吧，我感觉我已经说的够清楚了


衍生用法的我就不弄了，和这个也差不多。。。

于是，此高级篇的讲解结束。。。

此篇的最大意义就在于可以实现单独的1列单独的1种颜色，或者说单独的1个单元格单独的1种颜色。。。
当然，只是看起来是这样而已。。。实际想实现这样的效果。。。那可就不是这么简单的事了

四、骨灰级表格介绍：

于是，其实这篇可有可无，为什么要弄出来，只是想详细说下这个的应用，以及多占一层楼而已，淡定。。。

实例一：

效果图：

10颜色
9颜色
	10颜色
8颜色
	9颜色
		10颜色
7颜色
	8颜色
		9颜色
			10颜色
6颜色
	7颜色
		8颜色
			9颜色
				10颜色
5颜色
	6颜色
		7颜色
			8颜色
				9颜色
					10颜色
4颜色
	5颜色
		6颜色
			7颜色
				8颜色
					9颜色
						10颜色
3颜色
	4颜色
		5颜色
			6颜色
				7颜色
					8颜色
						9颜色
							10颜色
2颜色
	3颜色
		4颜色
			5颜色
				6颜色
					7颜色
						8颜色
							9颜色
								10颜色
1颜色
	2颜色
		3颜色
			4颜色
				5颜色
					6颜色
						7颜色
							8颜色
								9颜色
									10颜色

代码如下：

1. [table]
   
2. [tr=#9966cc][td]10颜色[/td][/tr]
   
3. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
   
4. [tr=#9966cc][td]10颜色[/td][/tr]
   
5. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
   
6. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
   
7. [tr=#9966cc][td]10颜色[/td][/tr]
   
8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
   
9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
   
10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
11. [tr=#9966cc][td]10颜色[/td][/tr]
    
12. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
13. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
14. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
15. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
16. [tr=#9966cc][td]10颜色[/td][/tr]
    
17. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
18. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
19. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
20. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
21. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
22. [tr=#9966cc][td]10颜色[/td][/tr]
    
23. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
    
24. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
25. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
26. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
27. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
28. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
29. [tr=#9966cc][td]10颜色[/td][/tr]
    
30. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
    
31. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
    
32. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
33. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
34. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
35. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
36. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
37. [tr=#9966cc][td]10颜色[/td][/tr]
    
38. [tr=#cc00cc][td=1,9]2颜色[/td][/tr]
    
39. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
    
40. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
    
41. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
42. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
43. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
44. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
45. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
46. [tr=#9966cc][td]10颜色[/td][/tr]
    
47. [tr=#77FFEE][td=1,10]1颜色[/td][/tr]
    
48. [tr=#cc00cc][td=1,9]2颜色[/td][/tr]
    
49. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
    
50. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
    
51. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
    
52. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
    
53. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
    
54. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
    
55. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
56. [tr=#9966cc][td]10颜色[/td][/tr]
    
57. [/table]

复制代码

解说：
1.定义一个表格
2.定义行颜色为#9966cc；定义1列；
3.定义行颜色为#99CC00；定义合并1列2行；
4.定义行颜色为#9966cc；定义1列；
.......
47.定义行颜色为#77FFEE；定义合并1列10行；
48.定义行颜色为#cc00cc；定义合并1列9行；
49.定义行颜色为#cc33cc；定义合并1列8行；
50.定义行颜色为#CCFF00；定义合并1列7行；
51.定义行颜色为#FFCC00；定义合并1列6行；
52.定义行颜色为#33FF00；定义合并1列5行；
53.定义行颜色为#CCCC33；定义合并1列4行；
54.定义行颜色为#CC0000；定义合并1列3行；
55.定义行颜色为#99CC00；定义合并1列2行；
56.定义行颜色为#9966cc；定义1列；
57.关闭表格。

于是，仔细看看47-56，有没有似曾相识的感觉
so，没错，就是高级篇说到的那10列。。。
于是，在向上看去，可以发现都是这样
依次递增

1

↓

2

↓

3

↓

4

↓

5

↓

6

↓

7

↓

8

↓

9

↓

10

于是，就是这样的模型，所以，现在我们来反过来看下原先的表格实例图：

效果图：

10
9
	10
8
	9
		10
7
	8
		9
			10
6
	7
		8
			9
				10
5
	6
		7
			8
				9
					10
4
	5
		6
			7
				8
					9
						10
3
	4
		5
			6
				7
					8
						9
							10
2
	3
		4
			5
				6
					7
						8
							9
								10
1
	2
		3
			4
				5
					6
						7
							8
								9
									10

代码如下：

1. [table=98%]
   
2. [tr=#9966cc][td]10[/td][/tr]
   
3. [tr=#99CC00][td]9 [/td][/tr]
   
4. [tr=#9966cc][td] [/td][td]10[/td][/tr]
   
5. [tr=#CC0000][td]8 [/td][/tr]
   
6. [tr=#99CC00][td] [/td][td]9 [/td][/tr]
   
7. [tr=#9966cc][td] [/td][td] [/td][td]10[/td][/tr]
   
8. [tr=#CCCC33][td]7 [/td][/tr]
   
9. [tr=#CC0000][td] [/td][td]8 [/td][/tr]
   
10. [tr=#99CC00][td] [/td][td] [/td][td]9 [/td][/tr]
    
11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
12. [tr=#33FF00][td]6 [/td][/tr]
    
13. [tr=#CCCC33][td] [/td][td]7 [/td][/tr]
    
14. [tr=#CC0000][td] [/td][td] [/td][td]8 [/td][/tr]
    
15. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
16. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
17. [tr=#FFCC00][td]5 [/td][/tr]
    
18. [tr=#33FF00][td] [/td][td]6 [/td][/tr]
    
19. [tr=#CCCC33][td] [/td][td] [/td][td]7 [/td][/tr]
    
20. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
    
21. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
22. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
23. [tr=#CCFF00][td]4 [/td][/tr]
    
24. [tr=#FFCC00][td] [/td][td]5 [/td][/tr]
    
25. [tr=#33FF00][td] [/td][td] [/td][td]6 [/td][/tr]
    
26. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
    
27. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
    
28. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
29. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
30. [tr=#cc33cc][td]3 [/td][/tr]
    
31. [tr=#CCFF00][td] [/td][td]4 [/td][/tr]
    
32. [tr=#FFCC00][td] [/td][td] [/td][td]5 [/td][/tr]
    
33. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
    
34. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
    
35. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
    
36. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
37. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
38. [tr=#cc00cc][td]2 [/td][/tr]
    
39. [tr=#cc33cc][td] [/td][td]3 [/td][/tr]
    
40. [tr=#CCFF00][td] [/td][td] [/td][td]4 [/td][/tr]
    
41. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td]5 [/td][/tr]
    
42. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
    
43. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
    
44. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
    
45. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
46. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
47. [tr=#77FFEE][td]1 [/td][/tr]
    
48. [tr=#cc00cc][td] [/td][td]2 [/td][/tr]
    
49. [tr=#cc33cc][td] [/td][td] [/td][td]3 [/td][/tr]
    
50. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4 [/td][/tr]
    
51. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5 [/td][/tr]
    
52. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
    
53. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
    
54. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
    
55. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
    
56. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
57. [/table]

复制代码

效果图：

1颜色
	2颜色
		3颜色
			4颜色
				5颜色
				6颜色
			7颜色
		8颜色
	9颜色
10颜色

代码如下：

1. [table]
   
2. [tr=#77FFEE][td=1,9]1颜色[/td][/tr]
   
3. [tr=#cc00cc][td=1,7]2颜色[/td][/tr]
   
4. [tr=#cc33cc][td=1,5]3颜色[/td][/tr]
   
5. [tr=#CCFF00][td=1,3]4颜色[/td][/tr]
   
6. [tr=#FFCC00][td]5颜色[/td][/tr]
   
7. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
   
8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
   
9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
   
10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
11. [tr=#9966cc][td]10颜色[/td][/tr]
    
12. [/table]

复制代码

解说：

1.定义一个表格
2.定义行颜色为#77FFEE；定义合并1列9行；
3.定义行颜色为#cc00cc；定义合并1列7行；
4.定义行颜色为#cc33cc；定义合并1列5行；
5.定义行颜色为#CCFF00；定义合并1列3行；
6.定义行颜色为#FFCC00；定义1列；
7.定义行颜色为#33FF00；定义合并1列5行；
8.定义行颜色为#CCCC33；定义合并1列4行；
9.定义行颜色为#CC0000；定义合并1列3行；
10.定义行颜色为#99CC00；定义合并1列2行；
11.定义行颜色为#9966cc；定义1列；
12.关闭表格。
于是，这样看起来的话，可能感觉很不好理解吧，那么，继续，原实例图登场：

效果图：

1
	2
		3
			4
				5
				6
			7
		8
	9
10

                             
代码如下：

1. [table]
   
2. [tr=#77FFEE][td]1[/td][/tr]
   
3. [tr=#cc00cc][td] [/td][td]2[/td][/tr]
   
4. [tr=#cc33cc][td] [/td][td] [/td][td]3[/td][/tr]
   
5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4[/td][/tr]
   
6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5[/td][/tr]
   
7. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td]6[/td][/tr]
   
8. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td]7[/td][td] [/td][/tr]
   
9. [tr=#CC0000][td] [/td][td] [/td][td]8[/td][td] [/td][td] [/td][/tr]
   
10. [tr=#99CC00][td] [/td][td]9[/td][td] [/td][td] [/td][td] [/td][/tr]
    
11. [tr=#9966cc][td]10[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
    
12. [/table]

复制代码

虽然和这个方式不同，但是效果是差不多的。。。

效果图：

1颜色
	2颜色
		3颜色
			4颜色
				5颜色
6颜色
	7颜色
		8颜色
			9颜色
				10颜色

代码：

1. [table]
   
2. [tr=#77FFEE][td=1,5]1颜色[/td][/tr]
   
3. [tr=#cc00cc][td=1,4]2颜色[/td][/tr]
   
4. [tr=#cc33cc][td=1,3]3颜色[/td][/tr]
   
5. [tr=#CCFF00][td=1,2]4颜色[/td][/tr]
   
6. [tr=#FFCC00][td]5颜色[/td][/tr]
   
7. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
   
8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
   
9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
   
10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
    
11. [tr=#9966cc][td]10颜色[/td][/tr]
    
12. [/table]

复制代码

于是，并不是说上面那个不好，只不过，这个还是以方便为主，这样想必大家也好理解点。。。

原型效果图：

1
	2
		3
			4
				5
6
	7
		8
			9
				10

代码如下：

1. [table]
   
2. [tr=#77FFEE][td]1[/td][/tr]
   
3. [tr=#cc00cc][td] [/td][td]2[/td][/tr]
   
4. [tr=#cc33cc][td] [/td][td] [/td][td]3[/td][/tr]
   
5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4[/td][/tr]
   
6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5[/td][/tr]
   
7. [tr=#33FF00][td]6[/td][/tr]
   
8. [tr=#CCCC33][td] [/td][td]7[/td][/tr]
   
9. [tr=#CC0000][td] [/td][td] [/td][td]8[/td][/tr]
   
10. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td]9[/td][/tr]
    
11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
    
12. [/table]

复制代码