本帖最后由 音乐家七月天 于 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 音乐家七月天