请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站
查看: 2162|回复: 2

[版务发布] 【discuz】表格微调

[复制链接]

188

主题

298

帖子

432

韭菜花

管理员

Rank: 9Rank: 9Rank: 9

积分
1293
发表于 2014-4-26 15:36:27 | 显示全部楼层 |阅读模式
TABLE的宽度分为两种:一种为百分比(数值为1~100),一种为普通数值(1~560)
                              百分比显示的大小是由最外层table大小所决定,若无最外层,则由电脑屏幕所决定,
                              也就是说,在宽屏上看到的大小和在普通屏幕上看到的大小并不一样。
                              数值同样设置为50%,在宽屏上所看见的外观往往会比一般的要大的多。                     
                              上文所说到的普通数值即为像素。像素不会受到屏幕大小的限制,论坛允许
                              自定义表格宽度为560,超过560则默认为最大宽度。




1.宽度使用百分比示例:

1. 1 单层:
效果:


内容

代码:
  1. [table=70%,red][tr][td]
  2. 内容
  3. [/td][/tr][/table]
复制代码

1.2 两层(多层原理同两层,嵌套即可):
1.2.1 居左效果
1.2.1.1 整体居左(整体居左为论坛默认):


效果:



内容

代码:
  1. [table=70%,red][tr][td][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table]
复制代码

1.2.1.2 外框居左 内框居中
效果:




内容


代码:
  1. [table=70%,red][tr][td][align=center][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table]
复制代码



1.2.1.3 外框居左 内框居右
效果:




内容




代码:

  1. [table=70%,red][tr][td][align=right][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table]
复制代码


1.2.2 居中效果:

1.2.2.1 整体居中:


效果:



内容




代码:
  1. [align=center][table=70%,red][tr][td][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/align]
复制代码



1.2.2.2 外框居中 内框居左

代码:
  1. [align=center][table=70%,red][tr][td][align=left][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table][/align]
复制代码

1.2.2.3 外框居中 内框居右

代码:
  1. [align=center][table=70%,red][tr][td][align=right][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table][/align]
复制代码

1.2.3 居右效果

1.2.3.1 整体居右


代码:

  1. [align=right][table=70%,red][tr][td][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/align]
复制代码



1.2.3.2 外框居右 内框居中

代码:
  1. [align=right][table=70%,red][tr][td][align=center][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table][/align]
复制代码




1.2.3.3 外框居右 内框居左

代码:

  1. [align=right][table=70%,red][tr][td][align=left][table=50%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/align][/td][/tr][/table][/align]
复制代码



2. 宽度使用普通数值:

每个嵌套的table宽度一次递减12,边框四周显示较为均匀

效果:



内容


代码:
  1. [table=560,black][tr][td][table=548,red][tr][td][table=536,blue][tr][td][table=524,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码



最外层table(以上效果为黑色层)最大宽度值为560,超出便为默认大小(98%),
效果中的4层table宽度均可以根据自己喜好修改,居左、居中、居右变化均可参考示例1.2


3. 宽度同时使用百分比&数值示例:

3.1  最外层为百分比

方法一:


内容


代码:
  1. [table=70%,black][tr][td][table=560,red][tr][td][table=548,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码


方法二:


内容


代码:

  1. [table=70%,black][tr][td][table=560,red][tr][td][table=98%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码

其他形式依此类推

3.2  最外层为数值

方法一:


内容


代码:

  1. [table=560,black][tr][td][table=98%,red][tr][td][table=98%,white][tr][td]
  2. 内容
  3. [/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
复制代码

其他形式依此类推

根据桃子的实验,最外层百分比数值57%宽度接近数值宽度560(见例1)

里层递减百分比数值98%宽度接近数值宽度20(见例2)



例1:
框①:


内容


框②:


内容

代码:
  1. 框①:

  2. [table=57%,black][tr][td][table=98%,red][tr][td]
  3. 内容
  4. [/td][/tr][/table][/td][/tr][/table]

  5. 框②:

  6. [table=560,black][tr][td][table=98%,red][tr][td]
  7. 内容
  8. [/td][/tr][/table][/td][/tr][/table]
复制代码
例2:

框①:


内容


框②:


内容

代码:
  1. 框①:

  2. [table=560,black][tr][td][table=98%,red][tr][td]
  3. 内容
  4. [/td][/tr][/table][/td][/tr][/table]

  5. 框②:

  6. [table=560,black][tr][td][table=540,red][tr][td]
  7. 内容
  8. [/td][/tr][/table][/td][/tr][/table]
复制代码
注意事项:
1、TABLE代码最多可以重叠四层,第五层开始代码失效;
2、编辑多层代码时需注意以下事项:
   百分比:最外层的宽度自选,从里面开始宽度一律设置为98%;
   例如:最外层(50%)、中间层(98%)、底层(98%);
   数值:最外层的宽度最大为560,之后从外到内宽度一律间隔12;
   例如:最外层(500)、中间层(488)、底层(476)
   若有其他需要,可自行设置(可参考示例1.2)
   百分比&数值合用:① 若外层采用百分比,数值最大为560时,百分比最小为58%,否则边框显示不全。
                        ②若外层采用数值,不管百分比在那一层,填写数值层均按层间距12递减。
   注:新手不建议采用百分比&数值合用
3、表格代码不会自动居中,如果需要则需使用居中代码(可参考示例1.2.2)。



0

主题

3

帖子

1

韭菜花

1级

Rank: 1

积分
5
发表于 2015-5-1 00:50:40 来自手机 | 显示全部楼层
也是有自信的人,怎么这都不敢上
回复 支持 反对

使用道具 举报

0

主题

1

帖子

5

韭菜花

1级

Rank: 1

积分
0
发表于 2015-5-5 08:56:27 来自手机 | 显示全部楼层
龙龙龙
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表