Minecraft(我的世界)中文论坛

标题: [论坛食用技巧76]论坛代码拓展教程1：[table] 表格长度、合并单元格
作者: 音乐家七月天    时间: 2016-1-27 17:53
标题: [论坛食用技巧76]论坛代码拓展教程1：[table] 表格长度、合并单元格
本帖最后由 音乐家七月天 于 2016-1-27 18:15 编辑

       Discuz论坛的编辑器代码可谓是令人蛋疼上又疼，又很难找到官方的代码教程，一句话，就是代码的拓展技法基本上是自！己！乱！试！出！来！的！现在要讲的{table}教程也是之前乱试附加值的时候试出来的233！！很少有人把全部代码任何用法都精通的，所以食技现在要开始教你们这些代码的拓展技巧了23333……
请注意，本帖中除了“代码文字栏”中的现成代码之外，正文所使用的代码的符号“[]”均写为“{}”，使用时请注意。

本期的食用小技巧：编辑的时候请善用纯文本模式，我一般都是在纯文本模式下进行编辑，这样不仅可以保险一点，还可以慢慢学到论坛的代码。

       {table}指令相信各位大致基本上会用，它就在编辑器工具栏上，按钮图片为“”。

————模式样本
例1
  1. [table]
  2. [tr][td]文字1[/td][td]文字2[/td][/tr]
  3. [tr][td]文字3[/td][td]文字4[/td][/tr]
  4. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：
文字1文字2
文字3文字4

————拆解代码
1. {table}...{/table}是代码本体，这之中的内容便是表格。
2. {tr}...{/tr}是这之中的一行，这之中没有可视内容，只能添加{td}...{/td}的格(列)。在{/tr}之后必定会空一行。有多少个{tr}...{/tr}就有多少行。
3. {td}...{/td}是一行之中的一个单元格，这就是最基本的表格中的文字框，这之中添加的就是可视内容。可以是文字、图片、超链接……它们也可以添加代码。有多少个{td}...{/td}这行中就有多少个单元格。如果一行中全部的单元格都是连一个空格都没有，则该行会成为一个高度为8像素(不算边框)的条，如下例所示。其实只有一个空格也会变成一个长条，即使在编辑器里看并非如此。
例2
  1. [table=50%]
  2. [tr][td][/td][td][/td][/tr]
  3. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：

————代码附加值
咱要不要先来了解一下附加值？附加值，是一个指令后面附属的描述，如{size=3}...{/size}这当中“=”后面的“3”便是附加值，在这里它表达“字号3号”，不同的代码附加值的意义不同。有时它可有可无(例：{img=[固定大小]}...{/img})有时必定会有(例：{color})；附加值有时为文字(颜色)，有时为数字。
1. {table}
       咱们先来看一个例子：
例3
  1. [table=256,Olive]
  2. [tr][td]　[/td][/tr]
  3. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：
　
*1 该表格的宽度(包括边框)为256像素，开着QQ的同学可以用Ctrl+Alt+A截图量一下。
*2 为了添加可视内容，单元格内容皆为一个全角空格(“　”)，否则会变成压缩的长条。该附注通篇皆用。
。上示例子“{table=256,Olive}”中我们可以看出，{table}拥有两个附加值。
       第一个为表格宽度。它可以是百分比，也就是占帖子宽度的大小百分比(如果它在一个表格中，百分比的大小将是对这包围其的这个单元格而言的)，表达式为“**%”，一般自己输入数值最高是98%，不输入则是满的(即使在编辑器里看上去是紧贴文字)，应该是边框限定问题；也可以是像素，但表达式后面不用加px，直接为一个数字。值得注意的是，如果用百分比，在浏览者切换为宽版的时候表格大小会发生相应的改变，可能造成失真。此外，列宽一般是按照这一列当中一行的字数以及整个表格列的行字数自动调整，每列同样行字数即列宽平均，具体如何计算就不清楚了。平均列宽决定于最多单元格的那一行的行数，可能出现下表所示的情况（这样的特性也可以用来制作柱状图表）。
　　　
　　　 　
　　
　　　　　　　　
　
       第二个为整体表格背景颜色。值得注意的是它和下面{tr}的附加值的关系，待会我们会讲到。
2. {tr}
       {tr}所拥有的附加值为该行背景颜色。{tr}附加值优先于{table}的第二个附加值，请看下面的例子：
例4
  1. [table=50%,RoyalBlue]
  2. [tr][td][/td][td][/td][/tr]
  3. [tr=Pink][td][/td][td][/td][/tr]
  4. [tr][td][/td][td][/td][/tr]
  5. [tr][td][/td][td][/td][/tr]
  6. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：

* 为了展示方便，不设置可视内容。
，可见，整体表格背景颜色设置为RoyalBlue(皇家蓝)，第二行的背景颜色设置为Pink(粉色)的时候，第二行显示背景颜色的是Pink。
3. {td}
       {td}拥有两个附加值，这两个附加值是用来做到合并单元格的，比较难理解，但是有时候却十分重要——这样吧，我们来比较一下两个例子。
例5-1
  1. [table=80%]
  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]
复制代码
上示代码在帖子中展示出来是这个样子的：
　①　
②　　
　　　
例5-2
  1. [table=80%]
  2. [tr][td]　[/td][td=2,1]①[/td][td]　[/td][/tr]
  3. [tr][td=1,2]②[/td][td]　[/td][td]　[/td][/tr]
  4. [tr][td]　[/td][td]　[/td][td]　[/td][/tr]
  5. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：
　①　
②　　
　　　
       两个的分别很容易就看出来——{td}上的附加值"2,1"、"1,2"造成了这一切。先别急着目测而考虑这怎么做到的，赶快看下面的解释吧。
       我先用我自己做的GIF图片讲解一下原理。这严格来说并不是合并格子，而是增大一个格子占表上的行列数量。原理如下GIF图所示。
       如果你看懂了，下面的也就容易理解了：
       {td}上的两个附加值分别确定其这一个单元格在表上所占的列、行数量。"1,1"也就是这个单元格在一个行中占一个列，也就是不用附加值时的情况，而"2,1"意思为这个单元格在一个行中占两个列，"1,2"意思为这个单元格在两个行中占同一个列。同理，可以做出"2,3"等花样的大型单元格。
       值得注意的是，这样会“推开”其他的单元格，也如上GIF图所示一样，这个时候，整个表格仍遵循{table}附加值列出的表格大小而变形(所以例5-2和例5-1目测起来像是少了右边的一块，合并了左下两块并且分隔了中下的两块2333)。这样的话你要做的就是把多出来的单元格给清除掉。整理后如下例示。
例5-3
  1. [table=40%]
  2. [tr][td]　[/td][td=2,1]①[/td]][/tr]
  3. [tr][td=1,2]②[/td][td]　[/td][td]　[/td][/tr]
  4. [tr][td]　[/td][td]　[/td][/tr]
  5. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：
　①
②　　
　　
* 为了展示方便，把整个表格的大小缩小到了40%。
       会了吗AuA？值得注意的是，{td}貌似没有与背景颜色有关的附加值。

       现在谁说{table}不蛋疼的我跟谁急→_→现在是时候展现我的Table神力了。
终极例
  1. [table=98%,White]
  2. [tr=Red][td][/td][/tr]
  3. [tr][td][table=98%,Orange]
  4. [tr][td][table=98%,White]
  5. [tr][td][color=Orange][align=center][b][size=7]论[/size][/b][/align][/color][/td][/tr]
  6. [/table][/td][td] [/td][td][table=98%,White]
  7. [tr][td][color=Orange][align=center][b][size=7]食[/size][/b][/align][/color][/td][/tr]
  8. [/table][/td][td] [/td][td][table=98%,White]
  9. [tr][td][color=Orange][align=center][b][size=7]技[/size][/b][/align][/color][/td][/tr]
  10. [/table][/td][td] [/td][/tr]
  11. [tr][td] [/td][td][table=98%,White]
  12. [tr][td][color=Orange][align=center][b][size=7]坛[/size][/b][/align][/color][/td][/tr]
  13. [/table][/td][td] [/td][td][table=98%,White]
  14. [tr][td][color=Orange][align=center][b][size=7]用[/size][/b][/align][/color][/td][/tr]
  15. [/table][/td][td] [/td][td][table=98%,White]
  16. [tr][td][color=Orange][align=center][b][size=7]巧[/size][/b][/align][/color][/td][/tr]
  17. [/table][/td][/tr]
  18. [/table][/td][/tr]
  19. [tr=Red][td][/td][/tr]
  20. [/table]
复制代码
上示代码在帖子中展示出来是这个样子的：
论
食
技
坛
用
巧

#同时参见：
discuz 表格 TABLE 代码 使用 基础 高级 教程 详解
http://www.discuz.net/thread-2377192-1-1.html
(出处: Discuz! 官方站)



本帖为第76帖，
本子系列（论坛食用技巧：论坛代码拓展教程）第1帖。
本系列合集帖：《论坛食用技巧》合集帖
本系列最近一帖：[论坛食用技巧75]论论坛中的网络词语18：XXsama | GG | 鬼畜(音MAD)(鬼畜全明星)
By 音乐家七月天
作者: 2644511816    时间: 2016-1-27 17:57
你是说你就拿这个主题就水了76个帖子吗...
作者: 逍遥的小羊    时间: 2016-1-27 18:06
我会了点 O(∩_∩)O哈哈~
作者: 暮夜萧萧    时间: 2016-1-27 18:09
恭喜lz回归，还有，你火星了
作者: 新大爷    时间: 2016-1-27 18:10
提示: 作者被禁止或删除 内容自动屏蔽
作者: Cai_Iu    时间: 2016-1-27 18:10
TAT
终于发出来了
→_→要没有我就没有这个帖子！
作者: SuperXingYu    时间: 2016-1-27 18:12
所以，你又水了一贴
挺好用的
作者: Enderman|淡忘    时间: 2016-1-27 18:14
恭喜回归，还有这个已经有人发过了。
作者: MRTangwin8    时间: 2016-1-27 18:44
夭寿了音乐家诈尸啦
作者: 爱心魔王FHC    时间: 2016-1-27 19:52
表示这么好的帖子怎么能碰到敏感词呢……
作者: 像素君    时间: 2016-1-27 19:52
看起来可以使帖子变得更高大上的样子~
作者: 暮夜萧萧    时间: 2016-1-27 19:53
MRTangwin8 发表于 2016-1-27 18:44
夭寿了音乐家诈尸啦

@音乐家五月天@音乐家七月天
作者: 音乐家七月天    时间: 2016-1-27 19:53
MRTangwin8 发表于 2016-1-27 18:44
夭寿了音乐家诈尸啦

寒　假　诈　尸　日　常　不　可　避
作者: 音乐家七月天    时间: 2016-1-28 08:59
2644511816 发表于 2016-1-27 17:57
你是说你就拿这个主题就水了76个帖子吗...

还得加上3篇番外，一共水了79篇
（为避免说是回血我只能用回复了233）
作者: 小宇lalala    时间: 2016-1-28 09:23
附加值教程的表格貌似太小了喂。。。。。。
要不加一个200%？
作者: XVII_hao    时间: 2016-1-28 12:55
食技复活了？寒假七月天又回来浪了
作者: 1586606534    时间: 2016-1-28 13:10
看了一会 我还不不用代码了吧
作者: Donnies_Ming    时间: 2016-1-28 13:11
看来版主们正在运用本楼高亮加诈尸的影响力杀鸡儆猴中……
楼上说智商低的够了，有那么难理解么
作者: 音乐家七月天    时间: 2016-1-28 14:07
小宇lalala 发表于 2016-1-28 09:23
附加值教程的表格貌似太小了喂。。。。。。
要不加一个200%？

只有用手机的看起来才会小 手机真的会小到爆炸
还有层主头像帅瞎
作者: 小宇lalala    时间: 2016-1-28 14:26
本帖最后由 小宇lalala 于 2016-1-28 14:27 编辑
乐家七月天 发表于 2016-1-28 14:07
只有用手机的看起来才会小 手机真的会小到爆炸
还有层主头像帅瞎

手工画的头像就是好2333
你说不小。。。。。。
是我电脑小么
表示我是盯着看的

2.png (135.92 KB, 下载次数: 5)

2.png
作者: xcc    时间: 2016-2-3 18:08
排班教程
我似乎明白了什么。原来那群触手是这么发帖的
作者: Ling_Haner    时间: 2016-2-3 18:31
收藏了 方便以后继续食用 233
作者: xiaoxiaokulipa    时间: 2016-2-17 13:57
终于出论坛食用技巧了
作者: lzs1234    时间: 2016-2-17 13:59
看，表格的所有背景色：
Black 黑色 Sienna赭色 DarkOliveGreen暗橄榄绿色 DarkGreen暗绿色 DarkSlateBlue暗灰蓝色 Navy海军色 Indigo靛青色 DarkSlateGray墨绿色 DarkRed暗红色 DarkOrange暗桔黄色 Olive橄榄色 Green绿色 Teal水鸭色（←啥玩意儿） Blue蓝色 SlateGray灰石色 DimGray暗灰色 Red红色 SandyBrown沙褐色 YellowGreen黄绿色 SeaGreen海绿色 MediumTurquoise间绿宝石色（雾草） RoyalBlue皇家蓝 Purple紫色 Gray灰色 Magenta红紫色 Orange橙色 Yellow黄色 Lime酸橙色（......） Cyan青色 DeepSkyBlue深天蓝色 DarkOrchid暗紫色 Silver银色 Pink粉色 Wheat浅黄色 LemonChiffon柠檬绸色 PaleGreen苍绿色 PaleTurquoise苍宝石绿（苍宝石是啥） LightBlue亮蓝色 Plum洋李色 White白色
一个个从审查元素里抠出来我容易吗我
作者: 音乐家七月天    时间: 2016-2-17 14:00
xiaoxiaokulipa 发表于 2016-2-17 13:57
终于出论坛食用技巧了

不，这是刚被 @lzs1234 顶上来的
作者: xiaoxiaokulipa    时间: 2016-2-17 14:10
音乐家七月天 发表于 2016-2-17 14:00
不，这是刚被 @lzs1234 顶上来的

这……那你什么时候会继续更新啊？
作者: 13206194858    时间: 2016-2-21 11:39
woc
↑我只能说这个
还记得我以前的bbcode教学吗凋零蛋