找回密码
 立即加入
搜索

查看: 5990|回复: 13

『表格TABLE美化普及帖』

[复制链接]
休眠的翅膀 发表于 2011-5-29 14:25:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转闽南师范大学。

您需要 登录 才可以下载或查看,没有账号?立即加入

×
 
表格TABLE美化普及帖』
 
【感悟下】
鉴于在论坛9个多月的时间内,看到了大家的热情也看到了对美化帖子的不够普及. 说实话,一个美丽的帖子是能够让大家看得舒服,能够吸引更多的人来观看的.鉴于有会员已经发布了论坛帖子编辑基本操作代码在这我就不再多说了哈,在这里主要介绍下表格的美化,欢迎大家学习哈.有什么不足的请提出.谢谢.
论坛帖子编辑基本操作代码(里面已经汇集了基本操作代码以及颜色代码哈.大家大家可以去看看)
【无聊下】其实帖子的美化还是很简单的.相信大家小学下就会了.然后就主要是颜色的搭配了.这就要看个人习惯了.
如果学习后还有什么不懂的.请跟帖回复还是直接加我Q哈369980115.需注明龙江曦月.欢迎大家踊跃参与.让龙江曦月更加美丽~~
 
表格美化普及贴总目录
.基础知识概述
表格的套用(嵌套)
表格中的行列变化
使用表格中的拆分变化做分割线
[tr][td]
[tr][td]
一、【基础知识概述】
◆1、TABLE码
TABLE的意思是“制表”,TABLE可以手动调整其宽度、背景颜色、行与列等等。
基本的TABLE代码:
效果:
代码(空格自己去掉.下面就不多说了):
[ table=50%][ tr][ td]文字、图片[ /td][ /tr][ /table]
制作表格要输入这几项内容。每个代码的输入都要加入“[ ]”的括号进行命令。否则,代码都是失效的,可以这么说,加入“[ ]”的字母是代码,没有“[ ]”的字母还是字母。TABLE可以加参数,但是不能单独自定义颜色。[表格宽度]:用于设置表格的总宽度 (表格是不用考虑高度的) 。TABLE的宽度分为两种:一种为百分比(数值为1~100),一种为普通数值,百分比的大小是由电脑屏幕所决定,也就是说,在宽屏上看到的大小和在普通屏幕上看到的大小并不一样。数值同样设置为50%,在宽屏上所看见的外观往往会比一般的要大的多。普通数值即为像素。像素不会受到屏幕大小的限 制,当然想要再宽就只能用百分比了.
双层TABLE代码自定义宽度:
[table=100%,#000000][table=100%,#000000][table=100%,#00ced1]
[table=500]
[table=460]代码:
[ table=500][ tr][ td][ align=center][ table=460][ tr][ td]文字图片[ /td][ /tr][ /table][ /align][ /td][ /tr][ /table]
[/table][/table][/table]这样是不是觉得很不平均呢.这里我也不知道问题...就只能在内表格前加个( )就可以了
) D/ f* a( U' k看看效果
& O  V/ V4 Q# c0 b: l
[table=100%,#00ced1][table=500] 
[table=460]代码:
[ table=500][ tr][ td] [ align=center][ table=460][ tr][ td]文字图片[ /td][ /tr][ /table][ /align][ /td][ /tr][ /table]
[/table][/table][/table]
[颜色代码]:是表格的背景色代码,因为我们论坛不支持直接用表格代码[ table=50,black]这类型代码因此我们只能用填充的:
[ backcolor=#颜色代码]表格[ /backcolor]
效果
[table=100%,#00ced1]
[table=100%,#d2b48c][table=500][ backcolor=#D2B48C][ table=500][ tr][ td][ /td][ /tr][ /table][ /backcolor]
[/table][/table][/table]
颜色:就是你做这个表格以及相互套用表格的的色彩。根据主题帖的文字、图片内容和你要表达的思想,可以采取色彩相近或者反差较大的色彩搭配。同时这也是因人而异、因个人的审美情趣而定。没有固定的套路,只用流动的色彩。想提取较准确的颜色,
表格代码不会自动居中,如果需要则需在表格代码外添加居中代码。 . \, u" K& S: {2 ^( @& C3 J6 a6 ^
# `% q' V' [; s) V
◆2、TR码(行代码)
$ [# ]# d: j4 Z' u
[table=100%,#00ced1]
[/table]行代码:放在TABLE码中间,每一组TR码,代表一行。双层TABLE代码自定义宽度以及颜色:
, V  ]' q8 `7 {7 s8 E+ Y$ }
[table=100%,#00ced1][table=100%,#deb887][table=500] [table=100%,#00fa9a]
[table=460][ backcolor=#deb887][ table=500][ tr][ td] [ backcolor=#00fa9a][ align=center][ table=460][ tr][ td]文字图片 [ /td][ /tr][ /table][ /align][ /backcolor] [ /td][ /tr][ /table][ /backcolor]
 
[/table][/table][/table][/table][/table]◆3、TD码(列代码) $ {# k& a3 o. o* F
- K) f3 L+ \9 f: ^2 j; `
列代码:放在TR码中间,每一组TD码,代表一列。TD码之间,就是表格的内容。TD码也可以加参数,用来设置合并单元格,格式为:TD=m,n,或TD=m,n,X%;m为合并单元格的列数,n为合并单元格的行数(m和n不能只写一个,要同时写),X%是该单元格所在的列宽,也可以是1~560的像素值。TD码中的文本的排列方式,默认为左对齐,如果想要居中或右对齐,可以在所见即所得模式中,选定相应的单元格(可横向多选)后进行格式设置。 ; q% z+ x# {5 n; a
(测试的时候只能第一次再编辑就失效了.这个不大清楚大家试试看吧)
, c" [7 C" o5 O1 @) ?( N# T8 H. e) V
◆4、align 码 0 Y% y  @2 `1 j) A6 L  h* g
  @( r: p+ Y$ G$ e
align 属性规定元素中水平对齐方式。让表格、文字、图片居中、居左或居右的三种代码。 " S. ~& e; m) Y3 B7 _9 X# r
[ align=center]居中[ /align]
# J8 O# @. ?  ?3 t- J3 ?; J[ align=left]居左[ /align]
0 k7 b! G. g5 U7 A' s2 g+ a+ d9 W[ align=right]居右[ /align] 7 z* R5 a( L2 }5 J( ~# N2 Y

  ?) }1 a4 {! E8 g2 r0 ^6 J/ D[/td][/tr][/table][/td][/tr][/table]
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
 楼主| 休眠的翅膀 发表于 2011-5-29 14:26:30 | 显示全部楼层
二、【表格的套用(嵌套)】
编辑页面表格插入法
◆在帖子编辑页面,不勾选“Wind代码”选项(勾选Wind代码=代码模式;不勾选Wind代码=可见模式),点击“插入表格”按钮。如图:
◆弹出以下页面,默认情况表格设定是两行两列,可以根据实际更改行、列、宽度、颜色等要素。
◆这里我先新建一个一行一列、宽度500的表格。如图:
.◆将光标放置在刚新建的表格中。再重复上面新建表格的步骤,这里我嵌入一个一行一列、宽度300 的表格。如图:
[table=100%,#48d1cc][table=100%,#ffffff][table=100%,#48d1cc]. [table=100%,#48d1cc]
[table=500][table=100%,#ffffff][table=300]
[/table][/table][/table]◆同时也可以使用以下代码,使嵌入的表格居左或者居右。居左代码:
, o4 `1 b. f; I[ align=left]整贴或部分文字、图片
3 ~; f1 c, O. d8 `0 l; L; C居左代码:[ align=center]整贴或部分文字、图片 " {1 O1 f( H  ]+ v
居右代码:[ align=right]整贴或部分文字、图片
# b: Z; a/ e$ j
◆如图所示:
; Z6 ]4 X* s5 r1 j
[table=500][table=100%,#ffffff]. [table=300]
.
[table=300]
[table=300]
[/table][/table][/table][/table][/table][/td][/tr][/table]
[/table][/td][/tr][/table]
( ?: y' g6 d9 S$ @! F# V  Q6 g# \7 X7 D- v: X# E
. ^% H% e1 e& N
[/table]
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

 楼主| 休眠的翅膀 发表于 2011-5-29 14:26:35 | 显示全部楼层
三、【表格制作中的行列变化】
行列变化只能一次性重新编辑失效
■1、两行两列表格的变化
第一行第一列
第二行第一列第一行第二列
代码
[ta ble=500][tr ][t d=2,1]第一行第一列[/t d][/ tr]
[t r][t d]第二行第一列[/t d][ td]第一行第二列[/t d][/tr ]
[/ta ble]
第一行第一列第一行第二列
第二行第一列
代码
[ta ble=500]
[t r][t d]第一行第一列[/t d][td ]第一行第二列[/t d][/ tr][tr ][t d=2,1]第二行第一列[/t d][/t r]
[/t able]
第一列第二列第一行
第二列第二行
代码
[ta ble=500][tr ][t d=1,2]第一列[/t d][t d]第二列第一行[/t d][/ tr]
[t r][t d]第二列第二行[/t d][/t r]
[/ta ble]
第一列第一行第二列
第一列第二行
代码
[tab le=500]
[t r][ td]第一列第一行[/t d][td =1,2]第二列[/t d][/t r][tr ][t d]第一列第二行[/t d][/t r]
[/ta ble]
表格限宽
代码
[ta ble=500]
[t r][t d=1,1,50] [/t d][t d] [/t d][td =1,1,50] [/t d][/ tr]
[ tr][t d] [/t d][t d] [/td ][t d] [/t d][/t r]
[t r][t d] [/td ][t d] [/t d][t d] [/t d][/t r]
[/ta ble]
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

 楼主| 休眠的翅膀 发表于 2011-5-29 14:26:40 | 显示全部楼层
四、使用表格的拆分变化制作分割线
$ H! n. l' L+ x
因为比较麻烦就不发代码了哦大家小看下
 
[table=80]
 
 
 
 
 
[table=512]
 
▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒ █ ▒█ ▒ █ ▒ █ ▒ █ ▒█ ▒ █
 
♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫♫
[/td][/tr][/table]
[/table]
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

 楼主| 休眠的翅膀 发表于 2011-5-29 14:26:45 | 显示全部楼层
 
线
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

来自晴天 发表于 2011-5-29 16:13:20 | 显示全部楼层
休眠弟弟辛苦了。。
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

曾兔子 发表于 2011-5-31 23:38:51 | 显示全部楼层
看得懵懵的~~
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

玛丽不爱说谎 发表于 2012-1-29 23:32:34 | 显示全部楼层
小翅膀。我要求代码,我做表格技术不足需要充电。
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

 楼主| 休眠的翅膀 发表于 2012-1-31 16:23:43 | 显示全部楼层

回 玛丽不爱说谎 的帖子

玛丽不爱说谎:小翅膀。我要求代码,我做表格技术不足需要充电。 (2012-01-29 23:32)
0.0    代码不是有附带么。
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

玛丽不爱说谎 发表于 2012-2-1 00:53:47 | 显示全部楼层

回 休眠的翅膀 的帖子

休眠的翅膀:0.0    代码不是有附带么。 (2012-01-31 16:23)
  我看着有点懵 ,我还是自己研究研究,实在不行到学校你指点我吧,我比较笨。
宣传/支持龙江曦月.龙江曦月需要理解,适宜长居
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即加入

本版积分规则

手机版|龙江曦月 ( 闽ICP备05009150号-1 )闽公安网备35060202000316

GMT+8, 2025-5-9 09:10 , Processed in 0.046860 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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