晨风交流论坛_CMP_CChat_Flash_音乐_视频_播放器_live直播_聊天室

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 8477|回复: 8

[公告] UBB表格使用基础

[复制链接]
发表于 2008-11-26 19:16:02 | 显示全部楼层 |阅读模式
官方QQ群:102348392 | 捐赠CMP
ubb表格使用表格基础
文章来源:http://www.0551design.com/bbs/viewthread.php?tid=256
路过恋人转载编辑

最简单的表格如下
  1. [table][tr][td]内容[/td][/tr][/table]
复制代码
拆开说明:


代码
描述
  1. [table]
复制代码
表格开始
  1. [tr]
复制代码
行开始
  1. [td]
复制代码
表元头
  1. 内容
复制代码
内容
  1. [/td]
复制代码
表元尾
  1. [/tr]
复制代码
行结束
  1. [/table]
复制代码
表格结束

表格结束*注  表元:表格内具体数据,表格内所有数据都在[td]和[/td]中.

有头必有尾,有行必有元。
举两个例子
代码:

  1. [table]
  2. [tr]
  3. [td]内容[/td]
  4. [td]内容[/td]
  5. [/tr]
  6. [/table]
复制代码
效果是一行两列
内容内容

# 通过重复使用[td]内容[/td]可以把一行分为N列
代码

  1. [table]
  2. [tr]
  3. [td]内容[/td]
  4. [/tr]
  5. [tr]
  6. [td]内容[/td]
  7. [/tr]
  8. [/table]
复制代码
效果是一列两行


内容
内容

# 通过tr可以给表格分行.当然,每行必须含有表元标记.

二.表格进阶
表格宽度

表格宽度属性附加在表格头部,它可以是具体像素值也可以是百分比。
系统允许的最大像素值宽度为560,超过这个数值会自动被修改成98%。
表格没有高度的定义,表格的高度取决与表格中的内容(表元)。

两个例子:
1
代码:
  1. [table=500][tr][td]内容[/td][/tr][/table]

复制代码
效果:
内容

注:表格宽度为500像素

2
代码:
  1. [table=90%][tr][td]内容[/td][/tr][/table]

复制代码
效果:
内容

注:表格宽度为帖子内容框的90%,这个宽度会随浏览器分辨率变化而变化.

表格背景色

表格背景色属性也是加在表格头部,必须和表格宽度一起使用,它可以是16 进制RGB颜色数码, 也可以是下列预定义色彩名称:(16进制RGB颜色数值可以用色彩选取器选择,本页最下方有链接)
color=#000000>Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

两个例子:
1
代码:

  1. [table=500,red][tr][td]内容[/td][/tr][/table]
复制代码
效果:
内容

注:表格宽500像素,颜色为红色。

2
代码:

  1. [table=20%,rgb(0,0,255)][tr][td]内容[/td][/tr][/table]
复制代码
效果:
内容

注:表格宽20%,颜色值为#0000ff(蓝色)

跨行与跨列

这两个属性定义在表元,第一个数字代表所跨的列数,第二个数字代表所跨的行数。
(这个太麻烦,建议使用的时候用HTML编辑器编辑好,直接复制到论坛所见即所得模式下,或者使用后面所讲的表格叠加实现这个效果)

直接看两个例子好了:

跨多列

代码:

  1. [table][tr][td=3,1][align=center]内容1[/align][/td][/tr][tr][td]内容2[/td][td]内容3[/td][td]内容4[/td][/tr][/table]
复制代码
效果是第一行跨三列:

内容1
内容2内容3内容4



跨多行

代码:

  1. [table][tr][td=1,2]内容1[/td][td]内容2[/td][/tr][tr][td]内容3[/td][/tr][/table]
复制代码
效果是第一列跨两行:

内容1内容2
内容3

表元宽度
表元宽度属性附加在表元头([td]),必须和跨行跨列一起使用,它可以是具体数值也可以是百分比。
表元没有高度的定义。

两个例子

一行两列,宽度分别为20%和80%
代码:
  1. [table=90%][tr][td=1,1,20%]内容[/td][td=1,1,80%]内容[/td][/tr][/table]
复制代码
内容内容


两行,第一行跨两列,第二列两表元宽度分别为150像素和400像素.
代码:

  1. [table=560][tr][td=2,1,560]内容[/td][/tr][tr][td=1,1,150]内容[/td][td=1,1,400]内容[/td][/tr][/table]
复制代码
内容
内容内容

----------------------------------------------------------------------------------------------------------------------------------------------------
以下内容路过恋人原创:

前面说了跨行的方法,那我们如何给我们的表格设置个性颜色呢?
看看代码:
  1. [table=80%][tr=#e8f3fd][td=1,1,20%]论坛版块[/td][td=1,1,20%]活跃度[/td][td=1,1,20%]知识量[/td][/tr]
  2. [tr][td] 『CMP3使用交流』[/td][td]★★★★☆[/td][td]★★★★☆[/td][/tr]
  3. [tr][td] 『CMP3皮肤专区』[/td][td]★★★★☆[/td][td]★★★☆☆[/td][/tr]
  4. [tr][td] 『CMP2使用交流』[/td][td]★★★☆☆[/td][td]★★★☆☆[/td][/tr]
  5. [tr][td] 『问题解答与建议』[/td][td]★★★★☆[/td][td]★★★★☆[/td][/tr]
  6. [tr][td] 『Flash技术交流区』[/td][td]★★☆☆☆[/td][td]★★☆☆☆[/td][/tr]
  7. [tr][td] 『音乐共享区』[/td][td]★★☆☆☆[/td][td]★★☆☆☆[/td][/tr]
  8. [tr][td] 『免费资源区』[/td][td]★★★☆☆[/td][td]★★★☆☆[/td][/tr]
  9. [tr][td] 『网站内务』[/td][td]★☆☆☆☆[/td][td]★★☆☆☆[/td][/tr][/table]
复制代码
看看效果:
论坛版块活跃度知识量
『CMP3使用交流』★★★★☆★★★★☆
『CMP3皮肤专区』★★★★☆★★★☆☆
『CMP2使用交流』★★★☆☆★★★☆☆
『问题解答与建议』★★★★☆★★★★☆
『Flash技术交流区』★★☆☆☆★★☆☆☆
『音乐共享区』★★☆☆☆★★☆☆☆
『免费资源区』★★★☆☆★★★☆☆
『网站内务』★☆☆☆☆★★☆☆☆


[ 本帖最后由 kuyuqq 于 2008-11-29 18:11 编辑 ]
发表于 2008-11-26 19:53:32 | 显示全部楼层
不错,感谢转载收录
 楼主| 发表于 2008-11-26 19:58:19 | 显示全部楼层
呵呵,老大回帖的时候我还在一遍一遍的修改,不知道怎么回事。老是出错~
希望给新手一些帮助!
发现一个严重的问题!当使用代码模式插入code代码时,切换到所见即所得模式时编辑器不认code.依旧按照原来的代码显示。。。。
刚才试了一下:
插入一个表示表格的代码:
  1. [table][tr][td]表格实例[/td][/tr][/table]
复制代码
当我再切换到所见即所得模式时却直接给了我一个完整的表格··
表格实例


不知道这是不是一个新发现····

[ 本帖最后由 kuyuqq 于 2008-11-26 20:07 编辑 ]
发表于 2008-11-26 20:53:22 | 显示全部楼层
所见即所得模式不转换UBB
可点击预览帖子预览
 楼主| 发表于 2008-11-26 21:36:27 | 显示全部楼层

回复 4# cenfun 的帖子

OK.多谢老大指点!
发表于 2008-11-28 03:38:33 | 显示全部楼层
  可能还是有人不知道的
发表于 2008-11-28 17:01:55 | 显示全部楼层
这写不错
以后写帖子或是回帖子就、会用了
发表于 2011-4-6 17:08:33 | 显示全部楼层
路过恋人 发表于 2008-11-26 19:16
ubb表格使用表格基础
文章来源:http://www.0551design.com/bbs/viewthread.php?tid=256
路过恋人转载编辑

111112131221哦2
发表于 2011-8-29 21:40:49 | 显示全部楼层
呼呼,按个爪爪

QQ|Archiver|手机版|小黑屋|晨风交流论坛 ( 粤ICP备05008793号 )

GMT+8, 2020-10-21 04:07 , Processed in 0.058766 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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