【教程】dz代码、表格（table）代码详解 附颜色代码表（发帖美化）

一只喵喵

写在前面

帖子不仅仅只是简单的文字+图片，我们想做的更好，带给大家更好的视觉体验！
让你在看一个帖子的时候，有一种像看一幅画一样的感受。

      撒花～升级之后论坛的表格代码终于可以让我们做出美美的帖子了！没有任何权限！所有能发帖的人都可以用～

DZ代码（表格代码）如何编辑使用？

      在发帖页面勾选右上角源码，即可进入代码编辑页面。所有的代码都是以 [代码]开始，[/代码]结束。如果有缺少，则代码肯定显示有问题。不勾选源码，则是可视化编辑效果。（因为dz自身问题，可视化看到的跟发布出去之后看到的不一定相同！强烈建议大家直接保存发布来验证代码的正确性！而不要只是在编辑框里面看效果！如果遇到颜色识别不正确的情况，1、重新编辑保存下，不用修改任何信息；2、检查颜色代码的形式，只支持英语和#ff0000的模式，不支持rgb（11,22,33）的形式。）

什么是DZ代码？

      DZ代码就是很多论坛玩家所说的表格代码，一般用来美化帖子，使用最多的就是表格（table）以及表格嵌套。
目前战意论坛支持的代码举例如下（可能有更多，需要自己去挖掘了！）

效果 DZ代码 效果展示 粗体 [b]战意坛[/b] 复制代码 战意论坛 斜体 [i]战意论坛[/i] 复制代码 战意论坛 下划线 [u]战意论坛[/u] 复制代码 战意论坛 字体颜色 [color=red]战意论坛[/color] 复制代码 战意论坛 字体 [font=微软雅黑]战意论坛[/font] 复制代码 战意论坛 字体大小 [size=1]战意论坛[/size] 复制代码 战意论坛 超链接 [url=http://qn2.netease.com/]战意论坛[/url] 复制代码 战意论坛 居中 [align=center]战意论坛[/align] 复制代码 战意论坛 删除线 [s]战意论坛[/s] 复制代码 战意论坛

以上代码都是可以自行编辑的
1、居中代码为align=center，那么居左即是align=left，居右align=right
2、字体颜色为color=red（red为红色，修改颜色的时候修改等号之后的颜色名称即可，颜色的英文单词），另外颜色还有另一种代码color=#ff0000，其中#ff0000是RGB格式颜色代码，代码对照表见下面（颜色选择小技巧：利用PS，吸取颜色，你就可以得到自己喜欢的颜色的RGB代码了！不过此类代码容易与论坛表情代码冲突。建议使用出现问题的时候可以发帖选择禁用表情）
3、字体及大小都是可以自己按代码进行调整的。

以上都是废话！下面请进入正文～～～

---

本帖详细目录表
1楼——DZ代码（表格代码）解释

2楼——DZ代码（表格代码）基础表格示例说明

3楼——DZ代码（表格代码）较复杂表格示例说明

4楼——颜色代码对照查询表（以及好看的配色表）

5楼——DZ代码（表格代码）发帖美化范例欣赏（懒人福利，可直接复制）

---

dz代码科普贴：http://z.netease.com/thread-65-1-1.html 看过他的帖子，基本上都懂了的话，建议大家直接跳到后面看示例说明！

重要的事情说三遍！
写了这么多！不给加分，不给点赞，不来回复！！！像话吗！！！
写了这么多！不给加分，不给点赞，不来回复！！！像话吗！！！
写了这么多！不给加分，不给点赞，不来回复！！！像话吗！！！

一只喵喵

2楼——DZ代码（表格代码）基础表格例示例说明

表格代码最重要的就是表格，通过表格我们能做出很多漂亮的页面。主要就是由三大元素构成，table、tr、td。
直接复制代码就可以测试了！部分不能直接复制的代码我都是加了一个空格的！复制的时候请去掉空格再使用！



一、最简单的一个一列一行的表格

1. [table=300,red][tr][td]表格内容1111[/td][/tr][/table]

复制代码

表格内容1111

1. [table=50%,#ff0000][tr][td]表格内容1111[/td][/tr][/table]

复制代码

表格内容1111

说明：

1、table后面的数字代表表格宽度，单位为px，300即是300px，论坛默认是使用百分比，table=50%；具体的大小大家凭自己的爱好看吧，两种都是可行的。如果需要表格贴合图片大小的时候，可以采用px；（论坛编辑时强烈建议使用百分比控制大小！否则手机上查看会显示不完全！）

2、red或者#ff0000，都代表表格背景色。第一种为16进制表示方式，说白了就是颜色的英文；第二种为RGB颜色表达，颜色代码对照表见4楼，使用的时候建议勾选发帖选项的禁用表情，否则容易导致乱码；

3、所有的代码都是对称的，有[table ]必须有[/table ]，有[tr ]肯定有[/tr ]，如果没有，你的代码肯定有问题……返回去检查错误代码是一件很悲剧的事情！眼睛会瞎真的- -


二、表格的行、列插入

行、列是表格中最重要的组成成分，先举几个例子，大家自己看下区别！
两行的表格

1. [table=300,Plum][tr][td]表格内容xxx[/td][/tr][tr][td]表格内容yyy[/td][/tr][/table]

复制代码

表格内容xxx

表格内容yyy

两列的表格

1. [table=300,Plum][tr][td]表格内容xxx[/td][td]表格内容yyy[/td][/tr][/table]

复制代码

表格内容xxx

表格内容yyy

两列两行的表格

1. [table=300,Plum][tr][td]表格内容xxx[/td][td]表格内容yyy[/td][/tr][tr][td]表格内容xxx[/td][td]表格内容yyy[/td][/tr][/table]

复制代码

表格内容xxx	表格内容yyy
表格内容xxx	表格内容yyy

说明：

以下添加仅仅针对简单的，行列一致的表格，如果你第一行有1列，第二行有3列，那么就不能简单的添加下面的代码了！这种复杂的请查看3楼。

1、行代码[tr ][/tr ]，列代码[td ][/td ]
2、表格添加行即添加代码[tr ][td ]此处内容[/td ][/tr ]；

3、表格添加列即添加代码[td ]此处内容[/td ]（此处容易出错，请要记住，表格有行有列，tr、td缺少任一均是错的！[td ][/td ]添加的位置是在[/ td]与[/ tr]之间的！）；



三、简单的回型表格套用

两层表格套用，即回形表格。有时候为了让一个帖子表现不同的颜色，有一层好看的复合自己要求的宽度，会选择表格套表格的模式来进行表达。

宽度表达为px样式套用

1. [table=300,MediumTurquoise][tr][td][table=280,Gray][tr][td]回型[/td][/tr][/table][/td][/tr][/table]

复制代码

回型

宽度表达为百分比样式套用

1. [table=50%,MediumTurquoise][tr][td][table=100%,Gray][tr][td]回型[/td][/tr][/table][/td][/tr][/table]

复制代码

回型

说明：
这里有几个重点，特别是百分比表示的套用.

1、建议一个帖子内统一宽度的表达，用px则都用px，用百分比都用百分比，不要第一层是table=98%，第二层就变成了table=700，效果会很惨烈的；

2、宽度表达为px的套用，建议外面的表格要比里面的宽，否则效果就不好看了。我的样式是里面的比外面的小20，具体的可以自由发挥；

3、宽度表达为百分比的话，如果第一层是80%，那么第二层的90%是针对第一层的80%来计算的。如果你论坛整个宽1000px，第一层你选择了80%，第二层选择60%，你实际得到的效果是第一层800px，第二层1000x80%x60%=480px 而不是你预想的600px！这个是注意下！



四、简单的图文美化

做表格，构思最重要，最好是结合好看的图片，协调表格的颜色！表格不是套的越多越好的。简单的表格配色和配图也能达到非常美的效果！后面会教大家如何利用PS取色。以下例子均来自网络

秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。

1. [align=center][table=70%,#000000]
   
2. [tr][td][align=center] [img]http://xqn.netease.com/data/attachment/forum/201509/14/222458pc1t5yhph6kpyny5.jpg[/img][/align]
   
3. [table=98%,#ffffff]
   
4. [tr][td][align=center]秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。
   
5. 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。
   
6. 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。
   
7. 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。
   
8. 秋风清，秋月明， 落叶聚还散，寒鸦栖复惊， 相思相见知何日，此时此夜难为情。[/align][/td][/tr]
   
9. [/table]
   
10. [/td][/tr]
    
11. [/table][/align]

复制代码

一只喵喵

3楼——DZ代码（表格代码）较复杂表格示例说明

[tr ]代码属性为行，[td ]代码属性为列。（竖为列，横为行。）


一、表格的行属性[tr ]——定义颜色

[tr ]代码属性为行，他定义的就是此行的颜色！[tr=red ] 代表此行为红色。如果行定义了颜色，那么之前在table中定义的颜色就会在此行失效。

1. [table=60%,Plum]
   
2. [tr=MediumTurquoise][td]此行单独定义了颜色 [/td][td]此行单独定义了颜色 [/td][/tr]
   
3. [tr][td] 33[/td][td]44 [/td][/tr]
   
4. [tr][td]55 [/td][td]66 [/td][/tr]
   
5. [/table]

复制代码

此行单独定义了颜色	此行单独定义了颜色
33	44
55	66

说明：
其实很简单的，一个表格只有两个地方可以定义颜色，[table=大小,颜色] ，[tr=颜色]。就很容易记住了！不过注意颜色代码别写错～



二、表格的列属性[td ]——定义列宽与合并单元格

1、[td=60 ]或者 [td=10% ]定义列宽！定义列宽一般是方便展示内容上每列都可以自定义宽度。方便调节。如果有多行，只需要定义第一行的列宽，后面的行数就会跟着统一的！

有定义列宽

1. [table=70%,Plum]
   
2. [tr][td=10%]作者 [/td][td=20%]板块 [/td][td=40%]标题 [/td][/tr]
   
3. [tr][td]一只喵喵 [/td][td]主讨论区 [/td][td]你是我的小苹果你是我的小苹果 你是我的小苹果[/td][/tr]
   
4. [tr][td]一只喵喵 [/td][td]主讨论区 [/td][td]你是我的小苹果你是我的小苹果 你是我的小苹果 [/td][/tr]
   
5. [/table]

复制代码

作者	板块	标题
一只喵喵	主讨论区	你是我的小苹果你是我的小苹果 你是我的小苹果
一只喵喵	主讨论区	你是我的小苹果你是我的小苹果 你是我的小苹果

未定义列宽

1. [table=70%,Plum]
   
2. [tr][td]作者 [/td][td]板块 [/td][td]标题 [/td][/tr]
   
3. [tr][td]一只喵喵 [/td][td]主讨论区 [/td][td]你是我的小苹果你是我的小苹果 你是我的小苹果[/td][/tr]
   
4. [tr][td] 一只喵喵 [/td][td]主讨论区 [/td][td]你是我的小苹果你是我的小苹果 你是我的小苹果 [/td][/tr]
   
5. [/table]

复制代码

作者	板块	标题
一只喵喵	主讨论区	你是我的小苹果你是我的小苹果 你是我的小苹果
一只喵喵	主讨论区	你是我的小苹果你是我的小苹果 你是我的小苹果

前方高能预警，看晕了别怪我……虽然我也晕的差不多了#17

2、[td=2,1 ]表示：合并此行的2个单元格。文字不清楚，来看范例。

1. [table=70%,MediumTurquoise]
   
2. [tr][td=2,1] 合并2个单元格[/td][td]13 [/td][/tr]
   
3. [tr][td]21 [/td][td]22 [/td][td]23 [/td][/tr]
   
4. [/table]

复制代码

合并2个单元格		13
21	22	23

这里需要注意的是假如我这行本来有3个单元格，也就是说应该有三个[td ][/td ]，但是我合并了2个单元格，那么最终的代码应该只有2个[td ][/td ]！如果还写着3个。就会出现bug。
bug示例（你会发现你的第一行多了一个格子凸出来！此时，只需要删掉一个[td ][/td ]就能恢复正常了！）

合并2个单元格		12	13
21	22	23

类推，可以知道[td=3,1 ] [td=4,1 ] 分别为合并此行3个单元格以及 合并此行4个单元格，当然，前提是你此行的单元格不少于你要合并的格数。详细可以自己尝试。

3、[td=1,2 ]  合并两行的第一列单元格

1. [table=70%,MediumTurquoise]
   
2. [tr][td=1,2] 合并两行的第一列单元格11[/td][td] 12[/td][td] 13[/td][/tr]
   
3. [tr][td] 22[/td][td] 23[/td][/tr]
   
4. [tr][td] 31[/td][td] 32[/td][td] 33[/td][/tr]
   
5. [/table]

复制代码

合并两行的第一列单元格11	12	13
	22	23
31	32	33

同样需要注意，既然两列的第一行都被合并了，第一列有一个[td=2,1 ][/td ]那么第二列就应该少一个[td ][/td ]。（绕晕了吗。还是自己研究吧，只能说的这么清楚了！自己对比下代码的却别！）

一只喵喵

4楼——RGB颜色代码对照查询表

【资源】dz代码表格代码之各种不同类型的配色表：http://z.netease.com/thread-60-1-1.html

截图示例：

一只喵喵

5楼——DZ代码（表格代码）发帖美化范例欣赏

以下内容部分来自于网络。更多请查看：http://z.netease.com/thread-61-1-1.html

表格一：

字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字 字字字字字字字字字字字

1. [align=center][img]http://xqn.netease.com/data/attachment/forum/201509/14/222201vjiujtecfai00iqe.jpg[/img][table=350,#80837a]
   
2. [tr][td][align=center][table=320,#fbeabe]
   
3. [tr][td]
   
4. [size=2][color=#ff0000]字字字字字字字字字字字
   
5. 字字字字字字字字字字字
   
6. 字字字字字字字字字字字
   
7. 字字字字字字字字字字字
   
8. 字字字字字字字字字字字
   
9. [/color][/size]
   
10. [img]http://l.paipaitxt.com/118851/12/06/22/196_12245342_f9c9ea78f83970e.jpg[/img][size=2][color=#ff0000]
    
11. 字字字字字字字字字字字
    
12. 字字字字字字字字字字字
    
13. 字字字字字字字字字字字
    
14. 字字字字字字字字字字字
    
15. 字字字字字字字字字字字
    
16. [/color][/size]
    
17. [/td][/tr]
    
18. [/table][/align][/td][/tr]
    
19. [/table][img]http://xqn.netease.com/data/attachment/forum/201509/14/222201vjiujtecfai00iqe.jpg[/img] [/align]

复制代码

---

表格二：

文字编辑： leave all your love and your loving behind you can't  carry it with you if you want to survive.

1. [align=center] [align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_892f1376356215d91cd1c1715dc4a.jpg[/img][/align]
   
2. [table=80%,#009966]
   
3. [tr][td][align=center]
   
4. [table=95%,#ffffff]
   
5. [tr][td][align=right][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_305f137635621447a3af4efff1480.png[/img][/align][size=2]
   
6. 文字编辑：
   
7. leave all your love and your loving behind you can't  carry it with you if you want to survive.
   
8. [/size]
   
9. [align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_79db1376384268e83c8acd8b0dc8e.jpg[/img]
   
10. [/align][/td][/tr]
    
11. [/table]
    
12. [/align][/td][/tr]
    
13. [/table]
    
14. [/align]

复制代码

---

表格三：

		♥						♥
	♥		♥				♥		♥
♥				♥		♥				♥
♥					♥					♥
	♥								♥
		♥						♥
			♥				♥
				♥		♥
					♥

1. [align=center][table=400,white]
   
2. [tr][td][/td][td][/td][td][table=30,red]
   
3. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
   
4. [/table][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
   
5. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
   
6. [/table][/td][td][/td][td][/td][/tr]
   
7. [tr][td][/td][td][table=30,red]
   
8. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
   
9. [/table][/td][td][/td][td][table=30,red]
   
10. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
11. [/table][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
12. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
13. [/table][/td][td][/td][td][table=30,red]
    
14. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
15. [/table][/td][td][/td][/tr]
    
16. [tr][td][table=30,red]
    
17. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
18. [/table][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
19. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
20. [/table][/td][td][/td][td][table=30,red]
    
21. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
22. [/table][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
23. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
24. [/table][/td][/tr]
    
25. [tr][td][table=30,red]
    
26. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
27. [/table][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
28. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
29. [/table][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
30. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
31. [/table][/td][/tr]
    
32. [tr][td][/td][td][table=30,red]
    
33. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
34. [/table][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
35. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
36. [/table][/td][td][/td][/tr]
    
37. [tr][td][/td][td][/td][td][table=30,red]
    
38. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
39. [/table][/td][td][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
40. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
41. [/table][/td][td][/td][td][/td][/tr]
    
42. [tr][td][/td][td][/td][td][/td][td][table=30,red]
    
43. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
44. [/table][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
45. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
46. [/table][/td][td][/td][td][/td][td][/td][/tr]
    
47. [tr][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
48. [tr][td][color=white][b]♥[/b][/color][/td][/tr]
    
49. [/table][/td][td][/td][td][table=30,red]
    
50. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
51. [/table][/td][td][/td][td][/td][td][/td][td][/td][/tr]
    
52. [tr][td][/td][td][/td][td][/td][td][/td][td][/td][td][table=30,red]
    
53. [tr][td][color=white][b]♥ [/b][/color][/td][/tr]
    
54. [/table][/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
    
55. [/table][/align]

复制代码

Ryu邪道长

666666666666666666666666666666666666666666666

义薄云天-陈群

话说我还是看不懂 算了 还是去水贴吧

YY_161_收人

帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气

神兽也会醉

好评顶了

锦尊毅

这样能行？？

麦子zzZ

学习学习

卜方

23333333333   加油！

沈阿棠

看个技能贴还有限制

小河豚

1. <p>[align=center] [align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_892f1376356215d91cd1c1715dc4a.jpg[/img][/align]</p><p>[table=80%,#009966]</p><p>[tr][td][align=center]</p><p>[table=95%,#ffffff]</p><p>[tr][td][align=right][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_305f137635621447a3af4efff1480.png[/img][/align][size=2]</p><p>怎么用呢</p><p>leave all your love and your loving behind you can't  carry it with you if you want to survive.</p><p>[/size]</p><p>[align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_79db1376384268e83c8acd8b0dc8e.jpg[/img]</p><p>[/align][/td][/tr]</p><p>[/table]</p><p>[/align][/td][/tr]</p><p>[/table]</p><p>[/align]</p>

复制代码

1. [align=center] [align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_892f1376356215d91cd1c1715dc4a.jpg[/img][/align]
   
2. [table=80%,#009966]
   
3. [tr][td][align=center]
   
4. [table=95%,#ffffff]
   
5. [tr][td][align=right][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_305f137635621447a3af4efff1480.png[/img][/align][size=2]
   
6. 怎么用呢
   
7. leave all your love and your loving behind you can't  carry it with you if you want to survive.
   
8. [/size]
   
9. [align=center][img]http://s1.houdao.com/11884/photo/Mon_1308/97291_79db1376384268e83c8acd8b0dc8e.jpg[/img]
   
10. [/align][/td][/tr]
    
11. [/table]
    
12. [/align][/td][/tr]
    
13. [/table]
    
14. [/align]

复制代码