请选择 进入手机版 | 继续访问电脑版
查看: 3060|回复: 14

[教程] 【教程】dz代码、表格(table)代码详解 附颜色代码表(发帖美化)

[复制链接]
发表于 2016-3-10 17:09:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转战意社区。

您需要 登录 才可以下载或查看,没有帐号?创建论坛帐号

x

写在前面

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


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

DZ代码(表格代码)如何编辑使用?

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



什么是DZ代码?

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

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

战意论坛

删除线
  1. [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 看过他的帖子,基本上都懂了的话,建议大家直接跳到后面看示例说明!

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

评分

1

查看全部评分

本帖被以下淘专辑推荐:

 楼主| 发表于 2016-3-10 17:23:41 | 显示全部楼层
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]
复制代码
 楼主| 发表于 2016-3-10 17:25:00 | 显示全部楼层
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]
复制代码
此行单独定义了颜色 此行单独定义了颜色
3344
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 ]。(绕晕了吗。还是自己研究吧,只能说的这么清楚了!自己对比下代码的却别!)




 楼主| 发表于 2016-3-10 17:27:23 | 显示全部楼层
4楼——RGB颜色代码对照查询表

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

截图示例:






本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?创建论坛帐号

x
 楼主| 发表于 2016-3-10 17:30:00 | 显示全部楼层
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]
复制代码
发表于 2016-3-22 22:42:47 | 显示全部楼层
666666666666666666666666666666666666666666666
发表于 2016-3-24 22:43:53 | 显示全部楼层
话说我还是看不懂 算了 还是去水贴吧
发表于 2016-3-25 13:56:30 | 显示全部楼层
帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气帅气   霸气
发表于 2016-3-25 13:59:03 | 显示全部楼层
提示: 该帖被管理员或版主屏蔽
发表于 2016-4-2 00:34:18 | 显示全部楼层
好评顶了
发表于 2016-4-5 23:12:02 | 显示全部楼层

这样能行??
































发表于 2016-4-6 11:10:10 | 显示全部楼层
学习学习
发表于 2016-4-8 13:05:57 | 显示全部楼层
23333333333   加油!
发表于 2017-12-12 15:39:34 | 显示全部楼层
看个技能贴还有限制
发表于 2018-7-26 16:54:10 | 显示全部楼层
  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]
复制代码


您需要登录后才可以回帖 登录 | 创建论坛帐号

本版积分规则

Archiver|手机版|小黑屋