请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

火影忍者ONLINE

 找回密码
 立即注册
注册新账号
  忘记密码?
查看: 3890|回复: 9

[其他] ❀.【论坛进阶教程】如何使用表格排版

[复制链接]

648

主题

53

好友

18万

积分

版主

Rank: 16

RSBS-忍术博士 SHXZ-守护勋章 最强嘴遁 周年纪念 七夕勋章 忍者联军 RXQG-热血青春 YSLF-玉树临风 忍界之草 火力全开 一鸣惊人 CKL-查克拉 GSTX-国色天香 YZJG-影之眷顾 RJDF-忍界巅峰 活跃达人 DCW-吊车尾 MYYX-木叶英雄 MMJW-萌萌九尾 YQRX-有钱任性 火之意志 绝代风华 版主团 RWXF-任务先锋

发表于 2016-11-19 17:04 |显示全部楼层
本帖最后由 Dracore 于 2016-11-19 17:55 编辑

QQ截图20161119134432_meitu_1.png

看到别人的帖子图文并茂,是不是会感到羡慕呢~

明明自己拥有优秀的内容和素材,却不会排版而逊色于别人~

完这个帖子,教会您排版的秘诀~

0 (1).gif

基础篇
表格代码的基本格式:
[table=宽度,底色]
[tr][td] [/td][/tr]
[/table]
其中table是指表格的意思,宽度既可以用百分比表示,也可以用数字表示,底色是用颜色代码来表示,tr是行,td是列

例:
  
  1. [table=500,blue]
  2. [tr][td] [/td][/tr]
  3. [/table]
复制代码
从代码就可以看出,这是一个宽度为500像素,底色是蓝色的表格
0.gif

进阶篇
1多层表格
在实际的排版中,通常是不会通过输入代码直接排版的,因为在功论坛的工具栏中就可以很方便的输入表格了
QQ截图20161119145430.jpg

最简单的例子1X1的表格,只需如图输入,提交便可
QQ截图20161119162302.jpg

然后后边点上春文本,全选表格代码,根据需要在工具栏中选择对齐方式,通常认为居中比较美观
QQ截图20161119150329.jpg

如图

  
单个表格搞定,多层表格顾名思义就是表格里面套表格

QQ截图20161119163434.jpg

如此反复,其实想加多少层都是可以的,头图的表格就是一个四层表格


  1. [align=center][align=center][table=500,#272727]
  2. [tr][td][table=498,#6C6C6C]
  3. [tr][td][table=496,#adadad]
  4. [tr][td][table=494,#f0f0f0]
  5. [tr][td]

  6. [/td][/tr]
  7. [/table][/td][/tr]
  8. [/table][/td][/tr]
  9. [/table][/td][/tr]
  10. [/table][/align][/align]
复制代码
如果是做个相框式的多层表格,那么建议内层的宽度比外层少2,这样看起来会比较匀称
align=center就是居中
table=500意思就是500像素大小的宽度
井号+数字是颜色代码,具体网上都可以查到
2、多行多列表格
我们首先先要确定表格的行数和列数,例如2X2,然后直接提交
QQ截图20161119151232.jpg

得到基础的表格
    
    
基础代码如下
  1. [table=50%]
  2. [tr][td] [/td][td] [/td][/tr]
  3. [tr][td] [/td][td] [/td][/tr]
  4. [/table]
复制代码
再根据基础代码的格式来修改表格的宽度和颜色,宽度不要超过570,超过了也就显示不出来了
举例:

    
      
  1. [align=center][table=400]
  2. [tr=red][td] [/td][td] [/td][/tr]
  3. [tr=green][td]  [/td][td]  [/td][/tr]
  4. [/table][/align]
复制代码
align=center的意思是居中
talbe=400的意思整个表的宽度是400
tr=red的意思是整行都是红色
tr=green的意思是整行都是绿色
如果整个表只需一个颜色的话,那么仅需在在table=400后面加上{,颜色代码}

3表格合并

了解了基本的代码意思之后,这次举例我们复杂一点,用3X3的表格来
      
      
      
  1. [table=50%]
  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]
复制代码
    
    
    
  1. [table=400]
  2. [tr=red][td=1,3]
  3. [/td][td] [/td][td] [/td][/tr]
  4. [tr=yellow][td] [/td][td] [/td][/tr]
  5. [tr=blue][td] [/td][td] [/td][/tr]
  6. [/table]
复制代码
talbe=400的意思整个表的宽度是400
td=1,3的意思就是将第一行的1-3列进行合并
tr=颜色的意思就是整行的颜色

高级篇
高级篇我们就实战分析了,这个排版是之前的旋风周刊所用,看起来很复杂,请看银桑慢慢将其拆分
最外层可以看出这个排版是整个是由一个大表格套着的
次外层是由4个1X1表格和2个2X2表格组成
次外层的第二个表格里面套了两个表格
整个排版拆分之后其实非常简单,甚至都没有用到合并的内容




























0 (2).gif


结语:排版的技术其实并不难,但是是具体的设计,就不是那么容易的事情了,这需要细心和耐心,最重要的是要会学习,多看看别人的排版,随后跟着模仿,然后到自己设计,这需要长时间的积累,最后感谢大家观看~


1

查看全部评分

回复

使用道具 举报

20

主题

3

好友

1470

积分

下忍队长

Rank: 5Rank: 5

发表于 2016-11-19 17:12 |显示全部楼层
厉害了我的银桑
回复

使用道具 举报

334

主题

5

好友

28万

积分

版主

Rank: 16

忍者联军 火力全开 手绘达人 RJDF-忍界巅峰 QGQC-倾国倾城 MYYX-木叶英雄 MMJW-萌萌九尾 DCW-吊车尾 YQRX-有钱任性 火之意志

发表于 2016-11-19 17:21 来自手机 |显示全部楼层
我家的小猪就是聪明
来自: 微社区
回复

使用道具 举报

10

主题

0

好友

1万

积分

精英中忍

Rank: 8Rank: 8

DCW-吊车尾 MMJW-萌萌九尾 MYYX-木叶英雄

发表于 2016-11-19 17:30 |显示全部楼层
连狐狸都说厉害了,那看来是真的厉害了,
火影忍者OL官方论坛版主   赤瞳   C组   15:00--18:00
回复

使用道具 举报

52

主题

0

好友

2935

积分

初级中忍

Rank: 6Rank: 6Rank: 6

发表于 2016-11-19 18:17 来自手机 |显示全部楼层
我就进来看看 版主有多少
来自: 微社区
回复

使用道具 举报

52

主题

0

好友

2935

积分

初级中忍

Rank: 6Rank: 6Rank: 6

发表于 2016-11-19 18:17 来自手机 |显示全部楼层
机油。。。。。。。。。
来自: 微社区
回复

使用道具 举报

48

主题

0

好友

1820

积分

下忍队长

Rank: 5Rank: 5

最强嘴遁 复仇末裔

发表于 2016-11-19 19:20 来自手机 |显示全部楼层
厉害~。。。
来自: 微社区
回复

使用道具 举报

无效楼层,该帖已经被删除

66

主题

0

好友

2785

积分

初级中忍

Rank: 6Rank: 6Rank: 6

发表于 2016-11-19 22:10 来自手机 |显示全部楼层
多学点东西没坏处,说不定哪天用上了呢
来自: 微社区
回复

使用道具 举报

648

主题

53

好友

18万

积分

版主

Rank: 16

RSBS-忍术博士 SHXZ-守护勋章 最强嘴遁 周年纪念 七夕勋章 忍者联军 RXQG-热血青春 YSLF-玉树临风 忍界之草 火力全开 一鸣惊人 CKL-查克拉 GSTX-国色天香 YZJG-影之眷顾 RJDF-忍界巅峰 活跃达人 DCW-吊车尾 MYYX-木叶英雄 MMJW-萌萌九尾 YQRX-有钱任性 火之意志 绝代风华 版主团 RWXF-任务先锋

发表于 2016-11-20 00:03 |显示全部楼层
2016093004VI9B5 发表于 2016-11-19 22:10
多学点东西没坏处,说不定哪天用上了呢

嗯,其实写贴也是自我学习~
回复

使用道具 举报

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

Archiver|手机版|gamebbs  |SuperBBS  

GMT+8, 2018-8-19 19:06 , Processed in 0.240605 second(s), 17 queries , Memcache On.

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部